HTML2canvas 生成模糊图像

Posted 2023-03-05

技术标签:

【中文标题】HTML2canvas 生成模糊图像【英文标题】：HTML2canvas generates Blurry images 【发布时间】：2014-05-13 06:51:55 【问题描述】：

我正在使用 jsPDF，它使用 html2canvas 从某个 html 元素生成图像并插入到 .pdf 文件中。但是 html2canvas 有一个问题，它会从 html 生成模糊的图像。请参见下面的示例：

HTML 内容：

http://puu.sh/7SZz4.png

html2canvas 生成的图片：

http://puu.sh/7SZAT.png

有什么办法可以修复它或者有更好的选择来获取图像形式的html吗？

谢谢！

【问题讨论】：

您是否检查过这是否涉及所有网络浏览器？我会尝试将 imageSmoothingEnabled 设置为 false（注意供应商前缀） 【参考方案1】：

如果有人仍在寻找适合他们的解决方案，我通过设置规模取得了成功： 5. 在他们的文档中查看。 https://html2canvas.hertzen.com/configuration

【讨论】：

【参考方案2】：

解决方案非常简单，经过 X 小时的测试。

将所有 div 设置为 2 倍，IMG 设置为 2 倍，最后将 html 缩放设置为 0.5，或者如果您还想要更好的质量，请将 3 倍设置为更高（在这种情况下，html 缩放必须为 0.33）或更高，（假定原始图像尺寸更大）。

例如：

HTML

<body>
 <div class="pdf">
   <img src="image.jpg">
 </div>
</body>

CSS 之前

body 
    background: #b2b2b2;

.pdf 
   background: #fff;
   /* A4 size */
   width: 842px;
   height: 595px;
 
img 
   width: 300px;
   height: 200px;

CSS 之后（仅更改）

html 
   zoom: 0.5;


.pdf 
   /* A4 size before . 2 */
   width: 1684; 
   height: 1190px; 
 
img  /* size before . 2 */
   width: 600px;
   height: 400px;

这是我的结果：

PDF before PDF after

【讨论】：

数小时以来，我一直在尝试修复模糊的 PDF。由于 jspdf 和 html2canvas 的各种可能组合，我无法找到任何有效的 js 解决方案。但是，这个 CSS 解决方案非常适合我的需求。谢谢你这么简单的回答。【参考方案3】：

我遇到了这个问题，我通过使用 domtoimage 而不是 html2canvas 解决了这个问题。

这个HTML2CANVAS 解决方案对我来说效果不好它是我的编辑工具的画布。

无论如何，我选择了domtoimage，相信我，我认为这是所有解决方案中最好的。

我不必面对html2canvas 的任何问题，例如：

需要在网页顶部，这样html2canvas才能完全捕捉到镜头和低dpi问题

function print()

    var node = document.getElementById('shirtDiv');
    var options = 
        quality: 0.95
    ;

    domtoimage.toJpeg(node, options).then(function (dataUrl)
    
        var doc = new jsPDF();
        doc.addImage(dataUrl, 'JPEG', -18, 20, 240, 134.12);
        doc.save('Test.pdf');
    );

dom 到图像的 Cdn：

https://cdnjs.com/libraries/dom-to-image

jspdf 的 Cdn：

https://cdnjs.com/libraries/jspdf

【讨论】：

您对 domtoimage 的建议对我来说就像是一种魅力。 html2canvas 是一个可怕的痛苦。 domtoimage 解决了像素问题。非常感谢:)【参考方案4】：

您可以在 html2canvas 中使用 scale 选项。

在最新版本 v1.0.0-alpha.1 中，您可以使用 scale 选项来提高分辨率（scale: 2 将使默认 96dpi 的分辨率增加一倍）。

// Create a canvas with double-resolution.
html2canvas(element, 
    scale: 2,
    onrendered: myRenderFunction
);
// Create a canvas with 144 dpi (1.5x resolution).
html2canvas(element, 
    dpi: 144,
    onrendered: myRenderFunction
);

【讨论】：

dpi 选项未在最新版本中使用。所以使用比例以获得高质量图像【参考方案5】：

我遇到了这个问题，因为我使用的是视网膜显示器。我用MisterLamb's solution here解决了。

$(window).load(function () 

    var scaleBy = 5;
    var w = 1000;
    var h = 1000;
    var div = document.querySelector('#screen');
    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;
            document.body.appendChild(canvas);

            Canvas2Image.saveAsPNG(canvas);
            $(body).append(canvas);
        
    );
);

HTML 和 PNG 没有缩放

HTML 和 PNG 缩放

【讨论】：

您使用哪个版本的 html2canvas 库进行此修复？非常适合我。确保包含 this version of html2canvas script 以使其正常工作。这不是生成的方式应该是..我将 702 尺寸变成 800 宽度，但是当图像生成时，它显示更小并且从图像的顶部和右侧切割。 @crclayton：“canvas.width”和“canvas.style.width”有什么区别？我和saadk有同样的问题。【参考方案6】：

这就是为我解决的问题。这不是因为我使用的是视网膜显示器（因为我没有）：

https://github.com/niklasvh/html2canvas/issues/576

只需将 html2canvas.js 中的 getBounds() 方法改成这个：

 function getBounds (node) 
        if (node.getBoundingClientRect) 
            var clientRect = node.getBoundingClientRect();
            var width = node.offsetWidth == null ? clientRect.width : node.offsetWidth;
            return 
                top   : Math.floor(clientRect.top),
                bottom: Math.floor(clientRect.bottom || (clientRect.top + clientRect.height)),
                right : Math.floor(clientRect.left + width),
                left  : Math.floor(clientRect.left),
                width : width,
                height: node.offsetHeight == null ? clientRect.height : node.offsetHeight
            ;
        
        return ;

【讨论】：

请注意，虽然它比原来的更好，但它仍然不能完全完美。【参考方案7】：

试试 Canvas2Image 库，它至少对我来说提供了更好的图像质量 div to image (fiddle).

    html2canvas($("#widget"), 
        onrendered: function(canvas) 
            theCanvas = canvas;
            Canvas2Image.saveAsPNG(canvas);  // Convert and download as image with a prmompt. 
        
    );

祝你好运！

【讨论】：

如果 html2canvas 已经生成了低质量的图像，Canvas2Image 无法提高图像质量，这首先是问题所在。【参考方案8】：

我发现了我的问题。碰巧我的屏幕是Retina Display，所以canvas2html在渲染HTML的时候，由于retina屏幕像素密度的不同，导致图像渲染模糊。

在这里找到解决方案：

https://github.com/cburgmer/rasterizeHTML.js/blob/master/examples/retina.html

【讨论】：

我也面临这个模糊图像的问题，但我没有得到你的答案，你能详细说明一下吗请让解决方案更明显:) @YoYo 实际上没有。没有合适的解决方案可以仅使用前端堆栈从各种 HTML+SVG 打印 PDF。但是你可以配置这些东西来处理一些简单的网页。您可能应该将 Phantomjs 用于 PDF 打印功能，它更稳定但需要额外的服务器。还有一些在线服务，您可以在其中提供公共 url 并取回 pdf。也欢迎你为前端编写 pdf 打印库:)

以上是关于HTML2canvas 生成模糊图像的主要内容，如果未能解决你的问题，请参考以下文章

Js实现将html页面或div生成图片

html转为图片插件：html2canvas保存图片模糊问题解决

JS生成海报

生成 div 的图像并另存为

html2canvas + jspdf 实现 html 转 pdf

html2canvas 调整图片大小并下载