Question

我使用html2canvas和canvas2image时遇到问题。我使用此代码：

$('#preview').click(function () {

var scaleBy = 5;
var w = 1000;
var h = 1000;
var div = document.querySelector('#screenshot');
var canvas = document.createElement('canvas');
canvas.width = w * scaleBy;
canvas.height = h * scaleBy;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
var context = canvas.getContext('2d');
context.scale(scaleBy, scaleBy);

html2canvas(div, {
    canvas:canvas,
    onrendered: function (canvas) {
        theCanvas = canvas;
        var dataString = canvas.toDataURL("image/png");
        var link = document.createElement("a");
        link.download = 'image';
        link.href = dataString;
        link.click();
    }
});
});

#preview是用于保存图像的按钮ID，问题是当我将图像保存为.png时，它会获得更多空间。像这样http://imgur.com/2EdlhX9。保存到图像后，如何使元素大小相同？感谢..

Answer 1

Html2canvas尝试根据高度和高度捕获元素的屏幕截图。为捕获的元素提供的宽度。

还有一个选项可以设置高度和高度。 html2canvas中捕获图像的宽度。你可以尝试在那里设置新的高度和宽度吗？以下是示例。例如：

html2canvas(div, { canvas:canvas,
    onrendered: function (canvas) {
    // ur code logic
   }
  },
  { width: newWidth, height: newHeight}
);

希望这有帮助。

保存为图像后保持元素大小

1 个答案: