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

Question

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

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

如何缩放图像而又不损失其质量？

我执行的步骤是

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

Answer 1

简单的答案是你不能..

缩放后对图像进行插值。 如果源图像的质量较低（如此视频快照中所示），则结果最多将是相等的，但如果不进行某些复杂的处理，则永远不会更好。

在这种情况下，视频快照会被大量压缩，因此您会得到一个块状图像（MPEG压缩的结果），该图像在原始大小下不那么明显，但是在缩放后变得明显（您可以更好地看到这些伪像，因为它们也在缩放）。