使用html2canvas设置Png的质量

Question

        html2canvas($("#Element"), {
  onrendered: function(canvasq) {
    var w=window.open();
    w.document.write("<h3 style='text-align:center;'>"+ReportTitle+"</h3>");
    w.document.write("<img width='100%' height:'90%' src='"+canvasq.toDataURL()+"' />");
    w.print();
  }
});

我想提高canvasq.toDataURL()的质量.有什么方法吗？因为返回数据质量低.

Answer 1

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

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

// Create a canvas with double-resolution.
html2canvas(element, {
    scale: 2,
    onrendered: myRenderFunction
});

Answer 2

简答:
将图像大小设置为原始大小的1/3.

答案很长:
您网站上的图像打印质量为72dpi.

当您尝试打印页面时,所有文本都会呈现为高质量的矢量(通常为~300dpi,具体取决于您的打印设置).

因此,如果您需要打印出高质量的图像,则需要将其缩小至少至原始尺寸的三分之一.

当您使用html2canvas库生成图像时,您必须在执行渲染之前将所有CSS大小设置为300%.

所以考虑一下:

var ReportTitle = 'Hello world!';  // For demonstration

var bigCanvas = $("<div>").appendTo('body');  // This will be the 3x sized canvas we're going to render
var scaledElement = $("#Element").clone()
.css({
  'transform': 'scale(3,3)',
  'transform-origin': '0 0'
})
.appendTo(bigCanvas);

var oldWidth = scaledElement.width();
var oldHeight = scaledElement.height();

var newWidth = oldWidth * 3;
var newHeight = oldHeight * 3;

bigCanvas.css({
  'width': newWidth,
  'height': newHeight
})

html2canvas(bigCanvas, {
  onrendered: function(canvasq) {
    var w=window.open();
    w.document.write("<h3 style='text-align:center;'>"+ReportTitle+"</h3>");
    w.document.write("<img width='"+oldWidth+"' height='"+oldHeight+"' src='"+canvasq.toDataURL()+"' />");
    w.print();
    bigCanvas.remove() 
  }
});

正在使用JSBin链接