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

Question

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

代码：

<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示例：

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

Answer 1

看起来你已经完成了大部分...
现在它只是 json 数据的循环，不确定你是如何获取数据的，所以作为一个简单的例子，我正在使用文本区域，请参见下面的代码

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var field = document.getElementById("data");
var data = JSON.parse(field.value);

for (let i = 0; i < data.length; i++) {
  var img = new Image();
  img.onload = function() {
    clipImage(img, data[i].clipX, data[i].clipY, data[i].clipWidth, data[i].clipHeight);
  }
  img.src = data[i].name;
}

function clipImage(image, clipX, clipY, clipWidth, clipHeight) {
  ctx.drawImage(image, clipX, clipY, clipWidth, clipHeight);
}

<canvas id="canvas"></canvas>
<br>
<textarea id="data" rows="9" cols="64">
[
{"name":"http://i.stack.imgur.com/UFBxY.png","clipWidth":70,"clipHeight":80, "clipX":0,"clipY":0},
{"name":"http://i.stack.imgur.com/UFBxY.png","clipWidth":89,"clipHeight":99, "clipX":70,"clipY":10},
{"name":"http://i.stack.imgur.com/UFBxY.png","clipWidth":50,"clipHeight":60, "clipX":170,"clipY":30}
]
</textarea>

代码太短了我删除了你所有的评论并简化了你的ctx.drawImage你应该没有任何问题改变所有这些以满足你的需要

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

Show multiple images specific X, Y, width and height in JavaScript canvas

html

javascript

json

canvas