인쇄 중 <canvas>이 날카롭지 않습니다.

웹 페이지에서 라벨을 생성하고 화면에 멋지게 표시하지만 프린터로 용지에 인쇄하면 날카 로워 보이지 않습니다. . canvas.toDataURL ("image/png")을 사용하여 이미지로 변환하려고했지만 여전히 PNG가 선명하지 않습니다.인쇄 중 <canvas>이 날카롭지 않습니다.

날카로운 인쇄에 사용할 수있는 기술이 있습니까?

출처

2014-07-09 user967722

프린터는 일반적으로 디스플레이 화면의 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>

출처

2014-07-09 18:14:56 markE

시도 뭔가를하지만, 텍스트는 여전히 나쁜 인쇄합니다. 내가 놓친 게 있니? \t \t \t \t \t <캔버스 ID = "myCanvas"폭 = "2700"높이 = "1800"스타일 = "너비 : 540px; 높이 : 360 픽셀;"> \t – user967722

I 내 대답에 예제 코드와 데모를 추가했습니다. 건배! – markE

인쇄 중 <canvas>이 날카롭지 않습니다.

답변

관련 문제