如何在缩放画布后以原始大小保存图像

Question

我有一个用于照片编辑的画布。我希望将照片保存为全高清。画布大小远低于小屏幕查看所需的分辨率。因此，我对画布进行了缩放以查看整个图片。

在编辑后，如何保存在画布中可见的图像为全高清？

例如：在画布大小为SVGA（800x600）的情况下编辑尺寸为QHD（2560x1440）的图像，并生成全高清（1920x1080）的图片。

- Scandinave

---

你想要什么分辨率（我假设是1920x1080）？你能展示一下你的代码吗？ - howderek

我还没有代码。我不知道该如何开始。我只是想要一个实现的思路。我会处理代码的。我认为，我不能使用 var data = canvas.toDataURL(); :) - Scandinave

Answer 1

您使用width和height属性设置的尺寸将成为图像的最终尺寸。

canvas.width = 1920;              // actual size given with integer values
canvas.height = 1080;

如果你需要在屏幕上缩小，就需要使用CSS（这是其中的一个特例）：

canvas.style.width = '960px';     // show at 50% on screen
canvas.style.height = '540px';

另外，您可以将实际图像作为屏幕外画布，并根据比例从中复制区域到屏幕上的画布。

如果您以低于实际分辨率的分辨率编辑图像，则高清等的优点就消失了，因为您需要将低分辨率图像放大到更大的分辨率，这会由于引入的插值而使其看起来更模糊。使用数字图像（或视频）时，始终在实际目标分辨率下工作。

然后使用toDataURL()获取图像：

var dataUri = canvas.toDataURL(); // saves a PNG at 1920x1080

对于JPEG格式：

var dataUri = canvas.toDataURL('image/jpeg', 0.8);  // last = quality

请注意，您的鼠标位置将需要按相反的方式缩放，因为它们是相对于画布元素而不是其位图。

- user1693593