我有一个用于照片编辑的画布.我想以全高清保存照片.在小屏幕上观看时,画布尺寸远低于此分辨率.所以我在画布上应用缩放以查看整个画面.
如何在编辑后保存在Full HD中画布中可见的图像?
示例:在画布尺寸SVGA(800x600)中编辑图像尺寸QHD(2560x1440)并生成图像全高清(1920x1080)
使用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元素而不是其位图的相反方式进行缩放.