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

有什么方法可以将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
            });
        };
    });
});

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

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

任何帮助将是巨大的！干杯

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

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

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

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

有关更多信息，请参阅API上的MDN文档canvas，其中包括的详细信息toDataURL，以及有关data:URI方案的Wikipedia文章，其中包括有关从此调用中收到的URI格式的详细信息。

简短答案：

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

看看如何绘制画布

$("canvas").drawImage();

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

这是为您工作的小提琴：http : //jsfiddle.net/e6nqzxpn/