HTML2canvas 生成模糊图像 [英] HTML2canvas generates Blurry images

问题描述

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

I am using jsPDF and it uses html2canvas to generate an image from some html element and insert on the .pdf file. But there is a problem on html2canvas, it generates blurry images from the html. See example below:

HTML 内容:

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

html2canvas 生成的图像:

html2canvas generated image:

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

有什么办法可以修复它或者有没有更好的选择来获取图像表单html?

Is there any way to fix it or is there any better option to get the image form html?

谢谢！

推荐答案

我发现了我的问题.碰巧我的屏幕是Retina Display，所以canvas2html在渲染HTML时，由于Retina屏幕上像素密度的差异，导致图像渲染模糊.

I have found out my problem. Happens that my screen is a Retina Display, so when the canvas2html will render the HTML, due to the difference of pixel density on retina screen, the image is rendered blurred.

在这里找到解决方案:

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

这篇关于HTML2canvas 生成模糊图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！