如何調整畫布內容的大小並獲取經過調整大小（和壓縮）的圖像base64數據？

Question

我正在玩canvas ，並創建了一個繪畫演示。

現在，我可以在畫布上繪制內容，並使用.toDataURL()獲取數據。

除了圖像的數據太大以外，其他一切都完美。 而且我只需要一個很小的圖紙版本。

是否可以（甚至可能）將畫布調整為較小的版本並加載調整后的圖像數據？ 有點像使用純JavaScript壓縮圖像。

例如，我讓用戶在1000px * 500px的畫布上繪制並將其大小調整為50px * 25px。 經過調整大小的base64數據將非常小，並且方便進行進一步的網絡傳輸。 那就是我想要的。

Answer 1

您讓用戶在大畫布上繪制，然后將大畫布作為圖像繪制在小畫布上。 最后，您將獲得小畫布圖像作為數據URI。

小畫布不必附加到DOM。

let bigCanvas_img = document.querySelector("bigCanvas");
smallCanvas_ctx.drawImage(bigCanvas_img,0,0,smallCanvas_w,smallCanvas_h);


let url = smallCanvas.toDataURL();