canvas drawImage() - 将图像切成两半并取左侧部分答案

【问题标题】：canvas drawImage() - cut image in half and take left partcanvas drawImage() - 将图像切成两半并取左侧部分
【发布时间】：2019-11-26 09:37:00
【问题描述】：

使用的图片：https://i.imgur.com/5KYZ1M2.jpg

代码：

var canvas = document.createElement('canvas');  
var ctx = canvas.getContext('2d');
ctx.drawImage(media, canvas.width / 2, 0, canvas.width, canvas.height);

结果：https://imgur.com/wywJZ69

有没有办法只获取左侧图像并将其居中？

【问题讨论】：

标签： javascript image canvas cut drawimage

【解决方案1】：

你应该使用drawImage的可选参数，这样你的画布可以是任何大小，所以它应该是：

context.drawImage( media, 0, 0, media.width / 2, media.height, 0, 0, canvas.width, canvas.height);

var my_canvas = document.getElementById('canvas'),
    context = my_canvas.getContext("2d");
    
let media = new Image();
media.src = 'https://i.imgur.com/5KYZ1M2.jpg';
media.onload = function() { 
  context.drawImage( media, 0, 0, media.width / 2, media.height, 0, 0, canvas.width, canvas.height);
}

canvas {
    border: 1px dotted black;
    width: 200px;
    height: 200px;
}

<canvas id="canvas" width="200" height="200">
  This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

您可以阅读有关drawImagehere的更多信息

【讨论】：

【解决方案2】：

我在Codepen 中做了一个例子，画布元素是图像宽度的一半，然后图像左上对齐。 ctx.drawImage(img, 0, 0);

【讨论】：