从HTML5 Canvas获取二进制（base64）数据（使用readAsBinaryString）

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编码），以便将数据推送到服务器...

最终结果是，我需要为用户提供选择文件、裁剪/调整大小并在点击按钮后将编辑后的图像上传到服务器的能力（由于服务器端的限制，无法进行服务器端的裁剪/调整大小...）

任何帮助都将不胜感激！干杯！

- Jamz_2010

Answer 1

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

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

尽管返回值不仅仅是base64编码的二进制数据，但裁剪方案和文件类型以获取所需数据非常简单。

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

有关更多信息，请参见canvas API的MDN文档，其中包括有关“toDataURL”的详细信息，以及data：URI方案的维基百科文章，其中包括有关此调用收到的URI格式的详细信息。

- Martin Atkins

---

并非每个 web 浏览器的 canvas.toDataURL() 默认都是 PNG 格式；您需要通过指定 canvas.toDataURL('image/png') 来实现。 - PYK

Answer 2

简短回答：

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

- Masih Jahangiri

---

完全忘记了您必须拆分;base64,的值，让我疯了45分钟。 - Karl Taylor

Answer 3

看到您如何使用 HTML 画出您的画布。

$("canvas").drawImage();

看起来你正在使用由 Caleb Evans 制作的 jQuery Canvas 插件（jCanvas）。

我实际上也在使用这个插件，它有一种简单的方法可以通过 $('canvas').getCanvasImage(); 获取 canvas 的 base64 图像字符串。

这里有一个可用的 Fiddle：http://jsfiddle.net/e6nqzxpn/

- Hans Tiono

---

canvas.getCanvasImage 不是一个函数。 - Rajiv Sharma

@RajivSharma 实际上 jCanvas 有这个功能 https://projects.calebevans.me/jcanvas/docs/getCanvasImage/ 然而 canvas.toDataURL(); 看起来更容易。 - Tony