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

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元素而不是其位图的相反方式进行缩放.