Question

在你告诉我这是一个重复的问题之前，请知道我已经搜索了每个单个类似的问题，并且无的答案中的任何一个都在努力我

我使用 html2canvas 来抓取div的快照，我需要做的是将其扩展到 750x1050 ，然后通过{{1将其保存到png }}

我最接近的是以下代码。

canvas.toDataURL()

图像尺寸合适但图像中的文字质量非常差，就好像它在成为png后一样。

我做错了什么，或者你不能这样扩大规模？

非常感谢任何建议/解决方案！

Answer 1

对于其他任何想知道如何从html获得高分辨率打印内容的人：PhantomJS和wkhtmltopdf / wkhtmltoimage是更好地处理这些事情的替代方案。

Answer 2

我有类似的问题，这就是我最终做的事情

html2canvas($('#div_id'), {width: 750, height: 1050}).then(
    function(canvas) {
       window.open(canvas.toDataURL("image/png"));
    }
)

现在这仍然会导致图像模糊（尤其是文字），但这是因为浏览器上的默认缩放设置为110％，导致window.devicePixelRatio为1.1000 ......我只是通过显示警告对其进行排序对于用户（为了我需要的目的工作），但显然有更好的方法来解决它https://stackoverflow.com/a/22819006/460586

Answer 3

即使我的图像都是像素化的，当有大量内容适合预先设定的宽度和高度时，有时也会变得狭窄。经过几个小时的搜索，找到了一个很好的解决方案post。即使在缩放和没有可见像素化的情况下，它也能很好地保持分辨率。

html2canvas(document.getElementById('div_id'), {
onrendered: function(canvas) {
        var ctx = canvas.getContext('2d');
        ctx.webkitImageSmoothingEnabled = false;
        ctx.mozImageSmoothingEnabled = false;
        ctx.imageSmoothingEnabled = false;
        var myImage = canvas.toDataURL("image/jpeg,1.0");  
       }
 });

在toDataURL之前缩放图像 - html2canvas

3 个答案: