Question

我在网页上生成一堆标签，它们在屏幕上显示很好，但是当我用打印机在一张纸上打印时，它们看起来并不敏锐。我尝试使用canvas.toDataURL（＆＃34; image / png＆＃34;）转换为图像，但PNG看起来并不清晰。

是否有一些我可以用来打印锐利的技术？

Answer 1

打印机的打印速度通常是显示屏分辨率的5倍以上。

因此，您的画布需要比您要打印的尺寸大5倍。

一种常见的技术是将画布元素的大小设置为远大于css大小。

<canvas width="3332" height="2499" style="width:640px;height:480px;"></canvas>

[添加代码和演示]

以下是带注释的代码和演示：http://jsfiddle.net/m1erickson/eFgGd/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var originalCW=canvas.width;
    var originalCH=canvas.height;

    // calc ratio of screen res to print res
    // (multiply all drawings by this res ratio)
    var screenToPrintRes=300/72;

    // make the CSS size the same as the original canvas size
    canvas.style.width=originalCW+'px';
    canvas.style.height=originalCH+'px';

    // make more pixels on the canvas
    canvas.width=originalCW*screenToPrintRes;
    canvas.height=originalCH*screenToPrintRes;

    // test drawings
    ctx.lineWidth=2*screenToPrintRes;
    ctx.strokeRect(20*screenToPrintRes,10*screenToPrintRes,265*screenToPrintRes,50*screenToPrintRes);
    ctx.font=24*screenToPrintRes+'px verdana';
    ctx.fillText('Hello (at printer res)', 30*screenToPrintRes,40*screenToPrintRes);

    // print
    $("#testprint").click(function(){ window.print(); });

}); // end $(function(){});
</script>
</head>
<body>
    <button id="testprint">Print</button><br>
    <canvas id="canvas" width=300 height=150></canvas>
</body>
</html>

在纸上打印<canvas>不是很清晰</canvas>

1 个答案: