时间戳

首页 > 解决方案 > 在 JavaScript 画布中显示多个特定于 X、Y、宽度和高度的图像

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

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

标签： javascripthtmljsoncanvas

解决方案

看起来你已经完成了大部分工作......
现在它只是对那个 json 数据的一个循环，不知道你是如何获取数据的，所以作为一个快速示例，我使用的是 textarea，请参见下面的代码

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你应该没有任何问题改变所有这些以满足你的需要

推荐阅读