Печать холста HTML5 в правильном размере

Есть ли правильный способ указать размер элемента холста, например, в миллиметрах, чтобы, если я распечатаю его, он будет иметь правильный размер?Печать холста HTML5 в правильном размере

Я попробовал этот простой пример:

<!DOCTYPE html> 
<html> 
<body> 
<canvas id="myCanvas" 
style="border:1px solid #c3c3c3; width:50mm; height:50mm;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 
<script> 
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.fillStyle = "#FF0000"; 
ctx.fillRect(0,0,150,75); 
</script> 
</body> 
</html>

Но на экране холст 45мм вместо 50мм и при печати его 55мм ^^

источник

2015-01-21 Moeren

Не используйте стиль, чтобы объявить ширину и высота. Объявите его в пикселях в элементе, например: <canvas width = "500" height = "500"></canvas>

Должно работать.

источник

2015-01-21 12:42:47 Rye123

Я хочу указать размер в миллиметрах или сантиметрах, но не в пикселях. – Moeren

@Moeren Вы можете определить холст в пикселях, а затем масштабировать его, используя CSS в сантиметрах. Кстати, я рекомендую вам не ограничивать себя сантиметрами и миллиметрами. – Rye123

Не могли бы вы привести пример, как правильно масштабировать его с помощью CSS? – Moeren

Часть 1: Сколько пикселей на холсте требуется для создания печатного рисунка на 50 мм?

Принтеры обычно печатаются с разрешением 300 пикселей на дюйм.

В миллиметрах: 300ppi/25.4 mm-in = 11.81 пикселей на миллиметр.

Так что, если вы хотите напечатать 50мм рисунок вы бы рассчитать необходимый размер пикселя, как это:

50мм х 11.81ppm = 590,5 пикселей (591 пикселей)

И изменить размер холста, чтобы иметь 591 пикселей (предполагая, что площадь) следующим образом:

// resize the canvas to have enough pixels to print 50mm drawing 
c.width=591; 
c.height=591;

Часть 2: Экспорт холст как изображение

Чтобы распечатать холст, вам нужно будет преобразовать холст в изображение, которое вы можете сделать с помощью context.toDataURL.

// create an image from the canvas 
var img50mm=new Image(); 
img50mm.src=canvas.toDataURL();

Часть 3: Преобразование экспортируемого изображения в надлежащее разрешение

context.toDataURL печати всегда создает изображение, которое 72 пикселей на дюйм.

Принтеры обычно печатаются с более высоким разрешением, может быть, 300 пикселей на дюйм.

Так что для экспортированного изображения для правильной печати на странице экспортированное изображение должно быть преобразовано от 72ppi до 300ppi.

ImageMagick библиотека может сделать преобразование: http://www.imagemagick.org/

Это на стороне сервера инструмент, так что вы должны будете подпрыгивать экспортируемого изображения с вашего сервера (возможно, с использованием AJAX для спускоподъемных изображение).

ImageMagick работает в PHP, IIS и других серверных средах.

Вот пример, который используют PHP для преобразования разрешения изображения и эхо преобразованного изображения обратно вызывающему:

// Assume you've uploaded the exported image to 
// "uploadedImage.png" on the server 
<?php 
    $magic = new Imagick(); 
    $magic->setImageUnits(imagick::RESOLUTION_PIXELSPERINCH); 
    $im->setImageResolution(300,300); 
    $im->readImage("uploadedImage.png"); 
    $im->setImageFormat("png"); 
    header("Content-Type: image/png"); 
    echo $im; 
?>

Заключительная часть: Распечатайте его!

Конвертированный файл, который вы получаете с сервера, напечатает 50-миллиметровое квадратное изображение на вашем принтере 300ppi.

источник

2015-01-21 18:31:16 markE

Спасибо за подробное объяснение! Я думаю, что нет никакого готового способа сделать это с помощью только javascript. – Moeren

Если вы решили обработать сгенерированный PNG на стороне сервера, вы можете set PNG pHYs chunk in pure PHP.

источник

2017-10-03 10:07:17 soulmare

Печать холста HTML5 в правильном размере

ответ

Смежные вопросы