HTML5 Canvas图像裁剪，调整大小和保存而不会降低质量

Question

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

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

如何在不降低图像质量的情况下缩放图像？

我执行的步骤是

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

Answer 1

简单的答案是你不能......

缩放时的图像被插值。如果源图像质量较差（如在此视频快照中），结果将最多相等，但如果没有一些复杂的处理，则永远不会更好。

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