从 HTML5 Canvas (readAsBinaryString) 获取二进制 (base64) 数据

Question

有没有办法将 HTML Canvas 的内容读取为二进制数据？

目前我有以下 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
            });
        };
    });
});

我现在需要在单击按钮时从画布中获取二进制数据（Base64 编码），以便将数据推送到服务器...

最终结果是我需要为用户提供选择文件，裁剪/调整大小，然后单击按钮，此时编辑后的图像将上传到服务器（我做不到由于服务器端限制，服务器端裁剪/调整大小...）

任何帮助都会很棒！干杯

Answer 1

简答：

const base64Canvas = canvas.toDataURL("image/jpeg").split(';base64,')[1];

Answer 2

看看你是如何用

画你的画布的

$("canvas").drawImage();

您似乎使用的是 Caleb Evans 的 jQuery Canvas (jCanvas)。 我实际上使用了那个插件，它有一个简单的方法来检索带有$('canvas').getCanvasImage();的画布base64图像字符串

这是一个适合你的小提琴：http://jsfiddle.net/e6nqzxpn/

Answer 3

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

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

虽然返回值不是只是 base64 编码的二进制数据，但只要去掉方案和文件类型就可以得到你想要的数据是一件简单的事情。

如果浏览器认为您已将任何从不同来源加载的数据绘制到画布上，toDataURL 方法将失败，因此此方法仅在您的图像文件与 HTML 从同一服务器加载时才有效其脚本正在执行此操作的页面。

有关详细信息，请参阅 the MDN docs on the canvas API，其中包含有关 toDataURL 的详细信息，以及 the Wikipedia article on the data: URI scheme，其中包含有关您将从该调用中收到的 URI 格式的详细信息。