用html2canvas设置Png的质量 [英] Set Quality of Png with html2canvas

问题描述

  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（）的质量。
有没有方法？因为返回的数据质量不高。

解决方案

长回答：

在您的网站上打印图片的质量

当您尝试打印页面时，所有文本都会呈现为高质量的矢量（通常为〜300dpi，具体取决于打印设置）。

因此，如果您需要打印出高品质的图片，则需要将其缩小至原来尺寸的三分之一。

当你使用html2canvas库来产生图像时，你必须在渲染之前将所有的CSS大小设置为300％。

因此请考虑：

  var scaledElement = $（＃Element）。clone（）。css（{
'transform'：'scale（3,3）'，
'-ms-transform'：'scale（3,3）'，
'-webkit-transform'：'scale ，3）'
}）。addClass（scaled-element）; 
 var oldWidth = scaledElement.width（）; 
 var oldHeight = scaledElement.height（）; 
 
 var newWidth = oldWidth *（1/3）; 
 var newHeight = oldHeight *（1/3）; 
 
 $（body）。append（scaledElement）; //将元素添加到body 
 html2canvas（scaledElement，{
 onrendered：function（canvasq）{
 var w = window.open（）; 
 w.document.write < h3 style ='text-align：center;'>+ ReportTitle +< / h3>）; 
 w.document.write（< img width ='+ newWidth + height ='+ newHeight +'src ='+ canvasq.toDataURL（）+'/>）; 
 w.print（）; 
} 
 $ scale-element）。remove（）; //当渲染完成时删除
}）; 
  

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

I wanna increase quality of canvasq.toDataURL(). Is there any Method ? Because Returned data low quality.

解决方案

Short answer:
Set your image size to 1/3 of it's original size.

Long answer:
Print quality of images on your website is 72dpi.

When you try print your page, all texts are rendered as high quality vectors (normally ~300dpi, depending on your print settings).

So if you need to print out a high-quality image, you'll need to scale it down at least to a third of it's original size.

An when you're using html2canvas library to produce the image, you'll have to set all the CSS sizes to 300% before doing the render.

So consider this:

var scaledElement = $("#Element").clone().css({
    'transform': 'scale(3,3)',
    '-ms-transform': 'scale(3,3)',
    '-webkit-transform': 'scale(3,3)'
}).addClass("scaled-element");
var oldWidth = scaledElement.width();
var oldHeight = scaledElement.height();

var newWidth = oldWidth * (1/3);
var newHeight = oldHeight * (1/3);

$("body").append(scaledElement); // add the element to body
html2canvas(scaledElement, {
   onrendered: function(canvasq) {
     var w=window.open();
      w.document.write("<h3 style='text-align:center;'>"+ReportTitle+"</h3>");
      w.document.write("<img width='"+newWidth+"' height='"+newHeight+"' src='"+canvasq.toDataURL()+"' />");
      w.print();
  }
$(".scaled-element").remove(); // removed when rendering is done
});

这篇关于用html2canvas设置Png的质量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！