Как получить высококачественный конверт из PNG - PullRequest
Новая
       0

Как получить высококачественный конверт из PNG

0 голосов
/ 15 февраля 2019

У меня есть требование взять холст с веб-страницы и преобразовать его в PDF в бэкэнде, чтобы его можно было сохранить на сервере, а затем загрузить и распечатать позже с разрешением 600 DPI.

У меня естьзатем этот вопрос, и у меня есть рабочий прототип кода: вызов AJAX для отправки холста на серверную часть в Base64 и затем функция Java для преобразования его в PDF.

Однакопроблема заключается в том, что качество изображения зависит от размера окна экрана / браузера, который пользователь имеет, когда нажимает кнопку для запуска создания изображения - полноэкранный браузер создает изображение с более высоким разрешением, чем браузер с частичным окном.Пример: оба сняты на моем ПК, но на последнем окно составляет примерно половину размера экрана.enter image description here enter image description here

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

Нужно ли рисовать формы холста непосредственно в PDF?Я знаю, что это будет соответствовать требованию DPI, но возможно ли это сделать из стека AngularJS / Java?

1 Ответ

0 голосов
/ 15 февраля 2019

Вы можете выбрать правильный размер холста, а затем изменить способ его отображения с помощью CSS.Здесь окончательный размер установлен как 2000x2000, и он будет сохранен как таковой (при нажатии на него), независимо от размера области просмотра: 

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Draw the ellipse
ctx.beginPath();
ctx.lineWidth = 10;
ctx.ellipse(1000, 1000, 500, 800, Math.PI / 4, 0, 2 * Math.PI);
ctx.stroke();

// Draw the ellipse's line of reflection
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(0, 2000);
ctx.lineTo(2000, 0);
ctx.stroke();


canvas.addEventListener('click', function (e) {
  var dataURL = canvas.toDataURL('image/png');
  var link = document.createElement("a");
  link.download = "finalsize.png";
  link.href = dataURL;
  link.click();
});
<body style="display:flexbox">
	<canvas id="canvas" width="2000" height="2000" style="width:100%; "></canvas>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...