打印画布内容 [英] Print canvas contents

问题描述

  var print = document.createElement（'button'）; 
 var canvas = document.createElement（'canvas'）; 
 var ctx = canvas.getContext（'2d'）; 
 
 canvas.width = 300; 
 canvas.height = 100; 
 
 ctx.fillStyle ='＃000'; 
 ctx.font ='15px sans-serif'; 
 ctx.fillText（'Fill Text，18px，sans-serif'，10，20）; 
 
 print.innerHTML ='Print'; 
 
 document.body.appendChild（print）; 
 document.body.appendChild（canvas）; 
 
 print.addEventListener（'click'，function（）{
 window.print（）; 
}）; 
  

http://jsfiddle.net/vpetrychuk/LWup5/ 。

正如你可以看到画布中的文本显示确定，但是单击打印按钮（并将页面保存为PDF）输出图像变得难看。

任何机会打印画布内容而不模糊？

您需要将实际画布设置为打印尺寸，然后使用CSS规则在屏幕上缩放。浏览器将始终使用内部位图大小，并将其调整到打印或屏幕。如果位图是高分辨率的，你会得到更好的结果打印。

但请注意，虽然，你将需要缩放每个坐标和大小，当你打印到画布。你还需要优先屏幕与打印，因为其中之一将看起来更糟（如果你优先打印，它不会超越屏幕和vica的经验）。

这里是 画布的修改示例 ，现在相当于300 DPI （对比默认96DPI）。您可以看到它在屏幕上看起来一样，但打印时会变得更清晰。

  ///转换因子在这个例子中我们想要300DPI 
 var dpiFactor = 300/96，
 width = 400，
 height = 100; 
 
 ///设置画布大小表示300 DPI 
 canvas.width = width * dpiFactor; 
 canvas.height = height * dpiFactor; 
 
 ///缩放所有内容以适合96 DPI显示（DPI在这里不重要）
 canvas.style.width = width +'px'; 
 canvas.style.height = height +'px'; 
 
 ///缩放所有尺寸incl。字体大小
 ctx.font =（15 * dpiFactor）.toFixed（0）+'px sans-serif'; 
 
 ///缩放所有位置
 ctx.fillText（'Fill Text，18px，sans-serif'，10 * dpiFactor，20 * dpiFactor）; 
  

只需使用包装函数为你做所有的数学：

  function fillText（txt，x，y）{
 ctx.fillText（txt，x * dpiFactor，y * dpiFactor）; 
} 
  

var print = document.createElement('button');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

canvas.width = 300;
canvas.height = 100;

ctx.fillStyle = '#000';
ctx.font = '15px sans-serif';
ctx.fillText('Fill Text, 18px, sans-serif', 10, 20);

print.innerHTML = 'Print';

document.body.appendChild(print);
document.body.appendChild(canvas);

print.addEventListener('click', function () {
    window.print();
});

http://jsfiddle.net/vpetrychuk/LWup5/.

As you can see text in the canvas displays ok, but after clicking "Print" button (and saving page as PDF) output image becomes ugly.

Any chance to print the canvas contents without blur?

解决方案

You need to make the actual canvas at print size then scale it on screen using CSS rules.

The browser will always use the internal bitmap size first and adjust that to the print or screen. If the bitmap is then of high resolution you will get better result on the print.

But mind you though, you will need to scale every coordinate and size when you print to the canvas. You will also need to prioritize screen versus print as one of them will look worse (if you prioritize print it will not look super on screen and vica verse).

Here is a modified example of your canvas which is now equivalent of 300 DPI (versus default 96 DPI). You can see it looks about the same on screen but will be much sharper when you print it.

/// conversion factor for scale, we want 300 DPI in this example
var dpiFactor = 300 / 96,
    width = 400,
    height = 100;

/// set canvas size representing 300 DPI
canvas.width = width * dpiFactor;
canvas.height = height * dpiFactor;

/// scale all content to fit the 96 DPI display (DPI doesn't really matter here)
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';

/// scale all sizes incl. font size
ctx.font = (15 * dpiFactor).toFixed(0) + 'px sans-serif';

/// scale all positions
ctx.fillText('Fill Text, 18px, sans-serif', 10 * dpiFactor, 20 * dpiFactor);

Simply use wrapper functions to do all the math for you:

function fillText(txt, x, y) {
    ctx.fillText(txt, x * dpiFactor, y * dpiFactor);
}

这篇关于打印画布内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！