HTMLCanvasElement.toDataURL（）仅返回部分信息？

Question

我想从网页中的画布上获取图像，并试图使用.toDataURL（）这样做。我的目标是获取图像，将信息写入数据库，然后稍后对其进行任何处理。

我正在使用此javascript代码：

    function makeImageValue() {
        var canvas = document.getElementById('meme');
        var dataURL = canvas.toDataURL();
      return dataURL
    }

    function setInputValue(input_id, val) {
        document.getElementById(input_id).setAttribute('value', val);
    }

setInputValue('image_string', makeImageValue())

它利用了.toDataURL（）功能，如此处记录的：in Mozilla documentation。我的理解是，这基本上会返回一个很长的字符串，看起来像：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAEYkl...我得到的长度是1594个字符。

然后我尝试使用以下python脚本对其进行解码：

import base64

# Separate the metadata from the image data
head, data = mystring.split(',', 1)

# Get the file extension (gif, jpeg, png)
file_ext = head.split(';')[0].split('/')[1]

# Decode the image data
plain_data = base64.urlsafe_b64decode(data)

# Write the image to a file
with open('image.' + file_ext, 'wb') as f:
    f.write(plain_data)

但是，它是空白的。然后我转到website that does this for you，它给了我类似的字符串，但是长度为551374个字符。当我运行上面的python脚本时，它可以工作。这表明我的.toDataURL（）做错了。

我是不是对.toDataURL（）的解释不正确？我不应该得到重建原始图像所需的一切吗？

其他信息：我正在使用此表单从html发送信息：

<form  method="POST" enctype = "multipart/form-data">
    {{ form.hidden_tag() }}
    <div>
      <input id="image_string" name="image_string" type="hidden" value="placeholder">
      <input class="btn btn-success" id="submit" name="submit" type="submit" value="Upload Meme">
    </div>
</form>

我不认为html是问题，但希望包含在内以保持透彻。

Answer 1

问题是在填充画布之前，我正在调用.toDataURL函数。我将此函数的调用移到了按钮单击操作中，这解决了问题。

结果是1594个字符长的字符串仅与我在页面加载时绘制的空白画布相对应。