从HTML5画布获取二进制(base64)数据（readAsBinaryString）

Question

有什么方法可以将HTML画布的内容作为二进制数据读取吗？

目前，我有以下HTML来显示输入文件及其下面的画布：

<p><button id="myButton" type="button">Get Image Content</button></p>
<p>Input:<input id="fileInput" type="file"/></p>
<p>Canvas<canvas id="myCanvas" width="578" height="200"/></p>

$('#fileInput').on('change', function() {
    $.each(this.files, function() {
        var image = new Image();
            image.src = window.URL.createObjectURL(this);

        image.onload = function() {
            $("canvas").drawImage({
                source: image,
                x: 50, y: 50,
                width: 100,
                fromCenter: false
            });
        };
    });
});

任何帮助都会很好！干杯

Answer 1

canvas元素提供了一个ToDataurl方法，该方法返回一个data:URL，该URL包括给定格式的base64编码的图像数据。例如：

var jpegUrl = canvas.toDataURL("image/jpeg");
var pngUrl = canvas.toDataURL(); // PNG is the default

虽然返回值不仅仅是base64编码的二进制数据，但要想获得所需的数据，只需删减方案和文件类型就可以了。

如果浏览器认为您向画布绘制了从不同来源加载的任何数据，则ToDataurl方法将失败，因此只有当图像文件与执行此操作的脚本所在的HTML页面从同一服务器加载时，此方法才起作用。

有关更多信息，请参阅canvasAPI上的MDN文档，其中包括关于ToDataurl的详细信息，以及关于Data:URI方案的Wikipedia文章，其中包括您将从该调用接收到的URI格式的详细信息。