使用画布裁剪图像 - 结果是小图像

debugcn 发表于 Dev

卡登扎

我正在尝试使用画布裁剪图像。
原始图像为 2217 x 790。
加载到页面时将其缩放为 1515 x 540
画布为 960 x 540。
图像和画布都位于屏幕中央，因此水平对齐。
我需要裁剪中心区域 - 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！

易卜拉欣坦雅辛

有关宽度属性和宽度作为样式之间的差异，请参阅我的评论。它们并不完全相同。此外，我只是做了一个小提琴，因为你没有，我没有得到同样的行为！下载的图片为960*540

HERE - 延迟触发

负载

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);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。