通过html表单发送画布图像数据，并将数据加载到新的空白画布页面

Question

我有一个HTML按钮，使用toDataURL（）捕获画布图像。我想将数据传递给表单元素，表单元素将通过formmail发送。我可以通过隐藏的表单元素传递所有其他变量，但画布数据不会被采用。发送时格式不正确。如果可能，发送的语法是什么？

在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...

之类的字符串

此格式适合以HTML格式传输（而不是某些二进制数据）。

要使用imgData将其放回画布上的某个位置，您可以使用this：

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