在JavaScript画布中显示多个特定于X、Y、宽度和高度的图像

我目前正在尝试制作一个画布，以显示图像的特定裁剪。我已经创建了一小段代码，可以用一个图像来实现这一点，但我想知道这是否可行，以及如何使用一个json文件，该文件具有多个裁剪图像以在单个画布中显示

守则：

<canvas id="canvas"></canvas>
    
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var img = new Image();
    img.onload = function () {

        clipImage(img, 140, 2, 120, 110);

    }
    img.crossOrigin = "anonymous";
    img.src = "image.jpg";

    function clipImage(image, clipX, clipY, clipWidth, clipHeight) {

        // draw the image to the canvas
        // clip from the [clipX,clipY] position of the source image
        // the clipped portion will be clipWidth x clipHeight
        ctx.drawImage(image, clipX, clipY, clipWidth, clipHeight,
        0, 0, clipWidth, clipHeight);
    }
</script>

---

看起来你大部分时间都在那里…
现在它只是json数据上的一个循环，不确定如何获取数据，所以作为一个简单的示例，我正在使用textarea，请参见下面的代码

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var字段=document.getElementById（“数据”）；
var data=JSON.parse（field.value）；
for（设i=0；i

[
{“姓名”：http://i.stack.imgur.com/UFBxY.png“，“clipWidth”：70，“clipHeight”：80，“clipX”：0，“clipY”：0}，
{“姓名”：http://i.stack.imgur.com/UFBxY.png，clipWidth:89，clipHeight:99，clipX:70，clipY:10}，
{“姓名”：http://i.stack.imgur.com/UFBxY.png“，“clipWidth”：50，“clipHeight”：60，“clipX”：170，“clipY”：30}”
]

“但我想知道是否有可能使用一个json文件，该文件具有多个裁剪图像以在单个画布中显示”-是的。问题是？->@Andreas我是JavaScript新手，所以我想知道如何做，或者是否有任何文档/指南可以做到这一点。这两个都不是so->的主题，而这个问题很简单，我的回答不到5分钟。。。我同意@Andreas，为了你自己的利益，你必须在这些方面投入更多的研究精力。。。一开始，这是痛苦和耗时的，但研究耐心是一项技能，它将在你身上成长，并永远伴随着你。非常感谢你，这就是我一直在寻找的@yasuperu非常欢迎你。。。

[{"name":"image.jpg","clipWidth":512,"clipHeight":512, "clipX":0,"clipY":0},
{"name":"image2.jpg","clipWidth":512,"clipHeight":512, "clipX":30,"clipY":60}]