Question

使用的图像：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

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

Answer 1

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

Answer 2

您应该使用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>

您可以阅读有关drawImage here

的更多信息

canvas drawImage（）-将图像切成两半并向左移

2 个答案: