如何获得高质量的画布到 PNG 的转换答案

【问题标题】：How to get a high quality canvas to PNG conversion如何获得高质量的画布到 PNG 的转换
【发布时间】：2019-07-09 15:45:21
【问题描述】：

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

我已关注this 问题，并且我有一个代码的工作原型：AJAX 调用以将画布发送到 Base64 的后端，然后是一个 Java 函数将其转换为 PDF。

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

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

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

【问题讨论】：

你可以设置画布大小和使用css来改变它的显示大小。我认为 toDataURL 会使用画布大小（不太确定）
所以您是说在发送 AJAX 请求之前编辑画布的 CSS？
听起来 CSS 可能已经在影响您的画布了。如果您的画布随窗口大小而变化，那么这意味着您的画布正在应用一些比例大小，例如百分比的宽度。你能告诉我们你的画布元素的 CSS 规则吗？

标签： javascript java angularjs pdf canvas

【解决方案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>

【讨论】：

我做了类似的事情，我用JS改变了大小，取了图像数据，然后把画布改回原来的大小。谢谢！