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

Question

• 我的画布宽度等于窗口宽度。
• 我正在将图像 (1920x1080) 绘制到画布上。
• 然后我选择了区域以裁剪画布内的图像，该区域将为 492x369。
• 裁剪图像后，我想将裁剪后的图像缩放为 1024x768。

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

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

我执行的步骤是

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

Answer 1

简单的答案是你不能..

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

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