如何在缩放画布后在画布中保存原来大小的图像

Question

我有一张帆布，用来编辑照片。我想把照片保存在全高清。画布尺寸远低于此分辨率，可在小屏幕上观看。所以我在画布上画了一个缩放图来观察整个画面。

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

示例:编辑画布大小为SVGA (800x600)的图像大小QHD (2560x1440)，并生成全高清(1920x1080)图片。

Answer 1

使用宽度和高度属性设置的大小将是图像的最终大小。

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';

或者，将您的实际图像作为屏幕外画布，并根据比例等将该区域复制到屏幕上的画布上。

如果您编辑的图像低于实际分辨率，那么HD等点就会消失，因为您需要将较低分辨率的图像放大到更大的图像，这将使其由于引入的插值而显得更加模糊。处理数字图像(或视频)时，始终在实际目标分辨率上工作。

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

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

用于JPEG：

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

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