html2canvas 不在左上角呈现图像

Question

我的网页中有一个图表，我使用 html2canvas 将其提取到图像中。提取的图像质量模糊，我想通过将其渲染成大 4 倍来提高质量。

正常功能：

function exportChart() {
html2canvas($("[id$='extract']"), {
    onrendered: function (canvas) {
        var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        var a = document.createElement('a');
         a.href = image;
         a.download = 'chart.png';
         a.click();
    }
});

更大尺寸的函数：

function exportChart(e) {
var scaleBy = 4;
var w = 1000;
var h = 1000;
var div = document.querySelector('#extract');
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) {
        var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
        var a = document.createElement('a');
         a.href = image;
         a.download = 'chart.png';
         a.click();
    }
});

结果是我得到了质量更好的图像，但它没有放在左上角，这对于正常功能来说不会发生。如何将更大的图像（右侧）放在左上角？ For your reference

Answer 1

事实证明，context.scale() 函数还改变了 canvas 中图像的起始位置。

这样我们就会得到我描述的结果。

html2canvas 不在左上角呈现图像

html2canvas doesn't render image at top left

html2canvas