通過html表單發送畫布圖像數據，並將數據加載到新的空白畫布頁面中

Question

我有一個HTML按鈕，可以使用toDataURL（）捕獲畫布圖像。 我想將數據傳遞給一個表單元素，該表單元素將通過formmail發送。 我可以通過隱藏的表單元素傳遞所有其他變量，但是canvas數據不會。 不能正確格式化發送。 如果可能的話，發送正確的語法是什么？

在JavaScript中

imgData = theCanvas.toDataURL();

document.getElementById('theImageData').value=imgData;

在HTML中

<input type="hidden" name="theImageData" id="theImageData" value="">

Answer 1

使用時：

var imgData = theCanvas.toDataURL(); 

imgData應該是一個包含如下data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby...的字符串data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby...

這種格式適合以HTML格式傳輸（與某些二進制數據相反）。

要將imgData放回畫布上的某個位置，可以使用以下命令 ：

var img = new Image();
img.src = imgData;
var ctx = theCanvas.getContext('2d');
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
};