Javascript 使用html2canvas设置Png的质量 html2canvas（$（“#元素”）{ onrendered:function（canvasq）{ var w=window.open（）； w、 文件。写（“+ReportTitle+”）； w、 文件。填写（“”）； w、 打印（）； } });

我想提高canvasq.toDataURL（）的质量。

---

有什么办法吗？因为返回的数据质量低。

简短回答：
将图像大小设置为原始大小的1/3

详细回答：
您网站上的图像打印质量为72dpi

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

因此，如果您需要打印出高质量的图像，您需要将其缩小到原始大小的至少三分之一

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

请考虑这个：

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

var ReportTitle='Hello world！'；//示范
var bigCanvas=$（“”）。appendTo（'body'）；//这将是我们要渲染的3倍大小的画布
var scaleElement=$（“#元素”）.clone（）
.css({
“变换”：“比例（3,3）”，
“转换原点”：“0”
})
.附录（大画布）；
var oldWidth=scaleElement.width（）；
var oldHeight=scaleElement.height（）；
var newWidth=oldWidth*3；
var newHeight=oldHeight*3；
bigCanvas.css({
“宽度”：newWidth，
“高度”：新高度
})
html2canvas（大画布{
onrendered:function（canvasq）{
var w=window.open（）；
w、 文件。写（“+ReportTitle+”）；
w、 文件。填写（“”）；
w、 打印（）；
bigCanvas.remove（）
}
});

---

使用css比例的方法是正确的

首先我们需要扩大元素的规模， 然后在“html2canvas”回调中，将其缩小

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

var-ELEMENT=jQuery（“元素”）；
//获取元素的宽度和高度
var w=ELEMENT.width（）；
var h=ELEMENT.height（）；
//放大你的元素
ELEMENT.css({
“变换”：“比例（3）”，
“-ms变换”：“比例（3）”，
“-webkit变换”：“缩放（3）”}）；
//运行html2canvas
html2canvas（元素{
onrendered：函数（画布）{
//缩小你的元素
ELEMENT.css({
“转换”：“，
“-ms转换”：”，
'-webkit转换'：''}）；
//将您的操作添加到画布
var win=window.open（）；
win.document.write（'ttl'）；
win.document.write（“”）；
win.print（）；
},
//设置合适的画布宽度和高度
宽度：w*3，
高度：h*3
});

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

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

---

这个链接有什么关系吗？有人能确认这个方法有效吗？克隆时，html2canvas出现问题（可能是因为克隆在dom上不可见），回调在.remove（）之后是否会完成？html2canvas闭包是连续的，它是异步的吗？我们必须询问@kyle zhong，他似乎编辑了我的代码。@Interlated修复并测试了代码，添加了工作JSBin linkI。我在这里也有同样的问题。在Safari中，html2canvas工作得非常好！但在Chrome中，它的形象非常低。有什么想法吗？您不需要在jQuery中使用供应商前缀。此外，这对我来说不起作用，我认为html2canvas甚至不支持任何CSS3转换。

var ELEMENT = jQuery("#ELEMENT");

//get element width and height
var w = ELEMENT.width();
var h = ELEMENT.height();

//scale up your element
ELEMENT.css({
'transform': 'scale(3)',
'-ms-transform': 'scale(3)',
'-webkit-transform': 'scale(3)' });

//run html2canvas
html2canvas(ELEMENT, {
onrendered: function(canvas) {

//scale back your element
ELEMENT.css({
'transform': '',
'-ms-transform': '',
'-webkit-transform': '' });

//your actions to canvas
var win = window.open();
win.document.write('<h3 style="text-align:center;">ttl</h3>');
win.document.write('<img width="100%" height:"90%" src="'+canvas.toDataURL()+'"/>');
win.print();


},
//set proper canvas width and height
width: w*3,
height: h*3
});

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