如何在縮放畫布之後將圖像以原始大小保存在畫布中

Question

我有用於編輯照片的畫布。我想將照片保存爲全高清。在小屏幕上查看畫布尺寸遠低於此分辨率。所以我在畫布上應用縮放以查看整個圖片。

如何在編輯後保存在Full HD畫布中可見的圖像？

實施例：編輯畫布大小SVGA（800×600）的圖像尺寸QHD（2560×1440），併產生一個圖像的全高清（1920×1080）

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等點消失了較低的編輯圖像更大的一個，由於引入的int會使它看起來更模糊erpolation。處理數字圖像（或視頻）時，始終以實際的目標分辨率工作。

然後使用toDataURL()來獲得圖像：

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

爲JPEG：

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

要知道的是你的鼠標位置將不得不進行縮放以相反的方式，因爲它們相對於畫布元素而不是它的位圖。