Question

我需要从网页上获取画布，并在后端将其转换为PDF，以便可以将其保存在服务器上，并在以后以600 DPI的价格下载和打印。

我遵循了this问题，并且我有一个有效的代码原型：AJAX调用，将画布发送到Base64中的后端，然后使用Java函数将其转换为PDF。

但是，问题在于图像的质量取决于用户单击按钮触发图像创建时的屏幕/浏览器窗口大小-全屏浏览器会比部分浏览器创建更高分辨率的图像窗口浏览器。示例：两者均在我的PC上拍摄，但在后者的窗口上大约是屏幕大小的一半。

我正在考虑以某种方式在无预置浏览器上创建具有预设大小的画布，这至少会使用户的画质保持一致，但是我不知道如何动态更改图像，因此我可以将其保持在600 DPI无论用户选择使用哪种纸张尺寸。

我是否必须将画布形状直接绘制到PDF上？我知道这将满足DPI要求，但是甚至可以从AngularJS / Java堆栈中做到吗？

Answer 1

您可以确定画布的适当大小，然后通过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>

如何将高质量的画布转换为PNG

1 个答案: