Изменить разрешение изображения в соответствии с определенной плотностью пикселей (DPI) - PullRequest
Новая
       6

Изменить разрешение изображения в соответствии с определенной плотностью пикселей (DPI)

0 голосов
/ 05 октября 2019

Я работаю над холстом HTML5, где я манипулирую определенной графикой и текстом, используя JavaScript. Я хочу включить функцию предварительного просмотра для отображения, как будет выглядеть холст при печати. Я преобразую холст в изображение, используя следующий код, и позже буду использовать изображение для предварительного просмотра. 

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");

Поскольку принтер сможет печатать с плотностью пикселей 260 точек на дюйм, я быхотелось бы, чтобы img соответствовал плотности пикселей принтера.

1 Ответ

0 голосов
/ 05 октября 2019

Вам необходим размер печати, чтобы установить DPI

Холст безразмерен. Без известного фиксированного размера точки на дюйм не имеет смысла.

Вы можете напечатать холст размером 240 на 240 с разрешением 240 точек на дюйм, напечатав его размером 1 на 1 дюйм. Этот же холст будет также иметь разрешение 24dpi, если вы напечатаете его размером 10 на 10 дюймов.

Если вы хотите, чтобы плотность пикселей холста соответствовала какому-либо DPI, вам нужно установить разрешение холста, соответствующее известномуразмер печати, и при печати холста необходимо указать этот размер, иначе значение DPI не будет соответствовать.

Пример. Установите разрешение холста в соответствии с известным размером печати и точками на дюйм

Чтобы напечатать холст, чтобы он уместился на странице формата А4, с разрешением 240 точек на дюйм 

const A4_PAGE_SIZE = {width: 8.27, height: 11.69); // in inches
const DPI = 240;  
canvas.width = A4_PAGE_SIZE.width * DPI;   // ~1984px
canvas.height = A4_PAGE_SIZE.height * DPI; // ~2805px

Теперь визуализируйте содержимое холста в соответствии с новым разрешением холста и выполните преобразование. в PNG. Затем можно распечатать изображение с разрешением 240 т / д, установив размер печати 8,27 на 11,69 дюйма.

Примечание Если вы не визуализируете содержимое холста (например, содержимое является загруженным изображением)) затем вы должны сопоставить размер холста с размером изображения, поэтому разрешение холста выше (или ниже) исходного изображения приведет к снижению качества печати, поскольку масштабирование, используемое в API Canvas 2D, не предназначено для печати. ​​

Примечание Формат изображения PNG позволяет указывать физический размер изображения PNG, задавая количество пикселей на метр, а не общее количество пикселей в заголовке. Однако вы не можете сделать это через нативный API Canvas. Вам понадобится сторонний PNG-кодировщик для установки этой информации заголовка.

...