Fatal编程技术网
  • javascript/
  • Javascript HTML2canvas生成模糊图像

Javascript HTML2canvas生成模糊图像

javascript html canvas

Javascript HTML2canvas生成模糊图像,javascript,html,canvas,html2canvas,jspdf,Javascript,Html,Canvas,Html2canvas,Jspdf,我使用的是jsPDF，它使用html2canvas从一些html元素生成一个图像，并插入到.pdf文件中。但是html2canvas有一个问题，它从html生成模糊的图像。见下例： HTML内容： html2canvas生成的图像： 有没有办法修复它，或者有没有更好的方法来获取图像表单html 谢谢 我发现了我的问题。碰巧我的屏幕是视网膜显示器，所以当canvas2html将呈现HTML时，由于视网膜屏幕上像素密度的差异，图像呈现模糊 在此处找到解决方案： 试试Canvas2图像库，它至少为

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

HTML内容：

html2canvas生成的图像：

有没有办法修复它，或者有没有更好的方法来获取图像表单html

谢谢

我发现了我的问题。碰巧我的屏幕是视网膜显示器，所以当canvas2html将呈现HTML时，由于视网膜屏幕上像素密度的差异，图像呈现模糊

在此处找到解决方案：

试试Canvas2图像库，它至少为我提供了更好的图像质量

祝你好运

这就是为我修好的。这并不是因为我使用了视网膜显示器（因为我没有）：

只需使用以下方法更改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 {};
    }
我有这个问题是因为我在视网膜显示器上。我用计算机解决了这个问题

无缩放的HTML和PNG

带缩放的HTML和PNG

您可以在html2canvas中使用缩放选项

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

我面临这个问题，我用
domtoimage
而不是
html2canvas
解决了这个问题

这个
HTML2CANVAS
解决方案对我来说不太好，我知道缩放选项在捕获目标div之前确实会增加目标div的大小，但如果该div中有一些无法调整大小的内容，则它将不起作用，例如，在我的情况下，它是我的编辑工具的画布

无论如何，我选择了
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:



jspdf的Cdn:


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

将您的ALL div设置为2倍，IMG设置为2倍，最后将html缩放设置为0.5，
或者，如果您还想要更好的质量，请将其设置为高3倍（在本例中，html缩放必须为0.33）或更大（假设原始图像大小更大）

例如：

HTML

CSS后（仅更改）

下面是我的结果：



如果有人还在为他们寻找解决方案，我成功地设置了5分制。在他们的文档中查看
 您是否检查过这是否涉及所有web浏览器？我会尝试将ImageSmoothInEnabled设置为false（注意供应商前缀）我也面临着这个模糊图像的问题，但我没有得到你的答案。你能详细说明一下吗？请让解决方案更加明显：）@YoYo实际上没有。没有合适的解决方案可以从所有类型的HTML+SVG打印PDF，只使用前端堆栈。但是，您可以将这些内容配置为使用一些简单的网页。您可能应该使用Phantomjs实现PDF打印功能，它更稳定，但需要额外的服务器。还有一些在线服务，您可以提供一个公共url并获取pdf。另外，欢迎您为前端编写pdf打印库：）如果html2canvas已经生成了低质量的图像，那么Canvas2图像无法提高图像质量，这是第一个问题。请注意，虽然它使它比以前更好，但它仍然不能完全使它完美。您使用什么版本的html2canvas库来进行此修复？对我来说非常有效。请确保包含以使其正常工作。这不是按应采用的方式生成。。我将702的尺寸改为800的宽度，但当图像生成时，它会显示较小的尺寸，并从图像的顶部和右侧剪切。@crclayton：“canvas.width”和“canvas.style.width”之间有什么区别？我的问题与最新版本中未使用的saadk.dpi选项相同。因此，请使用高质量图像缩放。我已尝试修复我模糊的PDF数小时。由于jspdf和html2canvas的各种可能组合，我无法找到任何有效的js解决方案。然而，这个CSS解决方案非常适合我的需要。谢谢你这么简单的回答。

$(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);
        }
    });
});



// 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
});



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');
    });
}



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



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



html {
   zoom: 0.5;
}

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