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

Question

我有一张用于照片编辑的画布。我想以全高清保存照片。在小屏幕上观看时，画布尺寸远低于此分辨率。所以我在画布上应用缩放以查看整个画面。

如何在编辑后保存画布中以Full HD显示的图像？

示例：在画布尺寸SVGA（800x600）中编辑图像尺寸QHD（2560x1440）并生成全高清（1920x1080）图片

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

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

如果您以低于实际分辨率的方式编辑图像，则HD等点将消失，因为您需要将较低分辨率的图像放大到较大的图像，这会使其看起来更加模糊。在处理数字图像（或视频）时，始终以实际目标分辨率工作。

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

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

表示JPEG：

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

请注意，您的鼠标位置必须按照相对于canvas元素而不是其位图的相反方式进行缩放。