javascript - 使用 Canvas 裁剪图像 - 结果是小图像

Question

我正在尝试使用 Canvas 裁剪图像。
原始图像为 2217 x 790。
加载到页面时，它缩放至 1515 x 540
Canvas 尺寸为 960 x 540。
图像和 Canvas 都位于屏幕中央，因此水平对齐。
我需要裁剪中心区域 - 960 x 540。

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

var a = $('#imgt').width() - 960;
var a = a/2; // this is 277.7...

ctx.drawImage(img, a, 0, 960, 540, 0, 0, 960, 540);
//also tried:
ctx.drawImage(img, 0, 0, 960, 540, 0, 0, 960, 540);

var newimg = new Image();
newimg.src = canvas.toDataURL('image/jpeg');

var dl = document.createElement("a");
dl.href = canvas.toDataURL("image/jpeg");
dl.download = true;
document.body.appendChild(dl);
dl.click();

下载 newimg 我看到的 - 它是 300 x 150!

Answer 1

请参阅我的评论，了解宽度属性和宽度样式之间的差异。它们并不完全相同。此外，我只是做了一个 fiddle ，因为你没有，而且我没有得到同样的行为!下载的图片尺寸为960*540

HERE - fires with delay

ONLOAD

setTimeout(function(){
  var canvas = document.createElement("canvas");
  canvas.width = "960";
  canvas.height="540";
  var ctx = canvas.getContext("2d");
  ctx.drawImage(document.images[0], 0, 0, 960, 540, 0, 0, 960, 540);
  var a = document.createElement("a");
  a.download = "image.jpeg";
  a.href = canvas.toDataURL("image/jpeg");
  a.click();
},5000);