javascript - HTML5 Canvas 图像裁剪、调整大小和保存而不损失质量

Question

• 我有宽度等于窗口宽度的画布。
• 我正在画布上绘制图像（1920x1080）。
• 然后我选择区域来裁剪画布内的图像，这将是 492x369。
• 裁剪图像后，我想将该裁剪图像缩放为 1024x768。

但是当我缩放该图像时，它会失去其质量..

如何在不损失质量的情况下缩放图像？

我执行的步骤是

1. 将图像添加到主画布
2. 画布上的选定裁剪区域
3. 使用 getImageData() 将裁剪的图像数据存储在 temp 变量中。
4. 在内存中创建了新的画布
5. 使用 putImageData() 将图像数据添加到新的内存画布中
6. 然后使用 newcanvas.toDataURL() 获取 base64 图像数据

Answer 1

简单的答案是你不能..

图像在缩放时被插值。如果源图像质量低（如在此视频快照中），则结果充其量是相同的，但如果没有一些复杂的处理，永远不会更好。

在这种情况下，视频快照被严重压缩，因此您会得到一个块状图像（MPEG 压缩的结果），这在原始尺寸上并不明显，但在缩放时变得很明显（您只会更好地看到伪影，因为它们也被缩放了）。