缩放到DataURL之前的图像-html2 canvas

Scale image before toDataURL - html2canvas

本文关键字：图像 -html2 canvas DataURL 缩放      更新时间：2024-02-09

在你告诉我这是一个重复的问题之前，要知道我已经搜索了每一个类似的问题，其中任何一个的答案都不适合我。

我使用html2canvas来获取div的快照，我需要做的是在通过canvas.toDataURL()将其保存到png之前将其放大到750x1050。

我得到的最接近的是以下代码。

html2canvas(document.getElementById('div_id'), {
   onrendered: function(canvas) {
      var extra_canvas = document.createElement("canvas");
        extra_canvas.setAttribute('width', 750);
        extra_canvas.setAttribute('height', 1050);
        var ctx = extra_canvas.getContext('2d');
        ctx.drawImage(canvas, 0, 0, 750, 1050);
        var dataURL = extra_canvas.toDataURL();
        window.open(dataURL);
   }
});

图像大小合适，但图像中的文本质量极差，就好像在变成png后，它调整了大小。

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

我们将非常感谢您的每一个建议/工作！

我遇到了类似的问题，这就是我最终做的原因

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

对于其他想知道如何从html获得高分辨率打印内容的人来说：PhantomJS和wkhtmltopdf/wkhtmltoimage是更好地处理这些问题的好选择。

即使是我的图像也会被像素化，有时会因为在预设的宽度和高度内有很多内容而变得局促。经过数小时的搜索，从这篇帖子中找到了一个很好的解决方案。即使在缩放和没有可见像素化的情况下，它也能很好地保持分辨率。

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");  
       }
 });
相关文章：