使用canvas的drawImage方法将图片分成两半

Question

我想在画布中分割图片。

首先我在HTML中声明了画布：

<canvas width="600" height="400" id="canvas_1">
        Canvas tag not supported
</canvas>

然后我尝试无果地分割我的图像：

var canvas = document.getElementById("canvas_1");

if (canvas.getContext){
   var canvas_context = canvas.getContext("2d");
   var img = document.getElementById("london_eye");
   canvas_context.drawImage(img, 0, 0, 230, 300, 20, 20, 80, 300);
   canvas_context.drawImage(img, 30, 0, 180, 300, 200, 20, 80, 300);
}

我想我在那里缺少了一些东西...

canvas_context.drawImage(img, 0, 0, 230, 300, 20, 20, 80, 300);
canvas_context.drawImage(img, 30, 0, 180, 300, 200, 20, 80, 300);

弗尼德尔
感谢您的时间和建议

- Petr Bečka

---

你的图像大小为120x120像素，但在drawImages中尝试获取超出图像大小的像素（在第一次绘制中尝试获取230x300像素，在第二次绘制中尝试获取180x300像素）。请再次查看context.drawImage的工作原理。 :-) - markE

@markE 嘿嘿，是的，我尝试了几乎所有的方法，但在这种情况下几乎不可能。 - Michelangelo

@markE 但是即使我将其调整为230x300 -> 120x120和180x300 -> 120x120像素，它仍然无法正常工作。 - Petr Bečka

或者...。 :-) - markE

Answer 1

原始代码

var canvas = document.getElementById("canvas_1");

if (canvas.getContext){
  var canvas_context = canvas.getContext("2d");
  var img = document.getElementById("london_eye");
  canvas_context.drawImage(img, 0, 0, 60, 120, 0, 0, 60, 120);
  canvas_context.drawImage(img, 60, 0, 60, 120, 70, 0, 60, 120);
}

最后四个参数是destX、destY、destWidth和destHeight。这是你想把这些图片碎片放在画布的位置，你可以看到第二个碎片的位置是70，因此它的宽度是第一个碎片的60加上间隔10。

我加了一个间隔为10像素的间隔来显示代码片段中的两个图片碎片！

var i = new Image();
i.crossOrigin = '';
i.onload = function() {
  var canvas = document.getElementById("canvas_1");
    
    if (canvas.getContext){
      var canvas_context = canvas.getContext("2d");
      canvas_context.drawImage(i, 0, 0, 60, 120, 0, 0, 60, 120);
      canvas_context.drawImage(i, 60, 0, 60, 120, 70, 0, 60, 120);
    }
};
i.onerror = function() {
    i.src = 'http://cors.io?u=' + i.src;
    i.onerror = function() {
        document.write('Error loading image');
    }
};
i.src = 'https://istack.dev59.com/olfBw.webp';

<canvas id="canvas_1"></canvas>

- Neil