如何調整畫布內容的大小並將圖像上傳到服務器？

Question

我一直在嘗試找出如何調整畫布內容的大小以獲取大約100x100的縮略圖並將其上傳到服務器的方法。 我想將現有的畫布保持在當前大小，因為所有這些操作對於用戶來說都是不可見的。

我知道可以使用toDataURL以當前畫布大小獲取內容，但是如何調整其大小然后上載到服務器？

var image = canvas.toDataURL("image/png");

Answer 1

您可以在JS腳本中創建畫布（不將其附加到DOM），然后在工作畫布上繪制您的內容（您的圖像），在臨時畫布的上下文中調整其大小（ 有關在畫布中調整大小的信息 ）。 然后canvas.toDataURL("image/png"); 以獲得調整大小的圖像。 然后，將其作為base64字符串發送，並作為png文件保存在服務器上。

Answer 2

多虧了Alexander Kremenets，我才得以整理所需的代碼。 我使用了Alexander鏈接的問題中的Hermite調整大小 。 還結合了其他問題的代碼：

var originalCanvas = document.getElementById("c");
// Create canvas for resizing
var resizeCanvas = document.createElement("canvas");
resizeCanvas.height = originalCanvas.height;
resizeCanvas.width = originalCanvas.width;

var resizeCtx = resizeCanvas.getContext('2d');
// Put original canvas contents to the resizing canvas
resizeCtx.drawImage(originalCanvas, 0, 0);

// Resize using Hermite resampling
resampleHermite(resizeCanvas, resizeCanvas.width, resizeCanvas.height, 150, 90);

// Use the resized image to do what you want
var image = resizeCanvas.toDataURL("image/png");