3 
        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() の品質を上げたい。メソッドはありますか？返されたデータの品質が低いためです。

4

3 に答える 3

7

簡単な答え:
画像サイズを元のサイズの 1/3 に設定します。

長い答え:
Web サイトの画像の印刷品質は 72 dpi です。

ページを印刷しようとすると、すべてのテキストが高品質のベクターとしてレンダリングされます (印刷設定に応じて、通常は 300 dpi まで)。

したがって、高品質の画像を印刷する必要がある場合は、少なくとも元のサイズの 3 分の 1 に縮小する必要があります。

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 リンク

于 2013-08-19T18:04:42.947 に答える