縮放畫布后如何在畫布中保存原始尺寸的圖像

Question

我有一個用於照片編輯的畫布。 我想以全高清格式保存照片。 畫布大小遠低於此分辨率，可以在小屏幕上查看。 因此，我在畫布上應用了縮放比例以查看整個圖片。

編輯后如何保存全高清畫布中可見的圖像？

示例：在畫布尺寸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元素而不是其位圖。