从调整画布大小的 div 生成图像答案

【问题标题】：Generate an image from div adjusting canvas size从调整画布大小的 div 生成图像
【发布时间】：2018-04-08 12:07:59
【问题描述】：

我有一个将 DIV HTML 转换为 PNG 图像的代码，它可以成功运行。但是当我以大尺寸导出到 PDF 时，它的质量会变差，可能是因为它在画布中创建的比原始尺寸小。

所以，我将画布的大小调整为宽度 2482 像素和高度 3508 像素，这是我想要生成 PDF 的大小。但是图像很小，没有得到盒子的总面积，大约是它们的 1/16。见：

html2canvas($('#quadro'), {
    onrendered: function(canvas) {
        var imgData = canvas.toDataURL('image/png', 1.0);
        img = new Image();
        img.src = imgData;
        img.onload = function() {
            localStorage.setItem('imagem', imgData);
            window.location.href = 'escolherMoldura.html';
        }
        img.onerror = function() { alert('there was an image load error :('); };
    },
    scale: 2,
    dpi: 300,
    width: 2482,
    height: 3508,
    letterRendering: true,
});

看，应该是填满了。

你能帮帮我吗？

【问题讨论】：

标签： javascript canvas html5-canvas html2canvas

【解决方案1】：

使用此代码，您可以获得高分辨率图像

saveSvgAsPng($('#quadro'), "quadro.png", {scale: 2});

更多详情请使用link。

【讨论】：

@michelmfreitas 尝试上述解决方案，我认为这会对您有所帮助。