从 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
});
};
});
});
我现在需要在单击按钮时从画布中获取二进制数据（Base64 编码），以便将数据推送到服务器......
最终结果是我需要为用户提供选择文件，裁剪/调整大小，然后单击按钮，此时编辑后的图像将上传到服务器（我不能做服务器端由于服务器端的限制，裁剪/调整大小...）
任何帮助都会很棒！干杯
canvas 元素提供了一个 toDataURL 方法，该方法返回一个包含给定格式的 base64 编码图像数据的 data: URL。例如：
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 格式的详细信息。
简短的回答：
const base64Canvas = canvas.toDataURL("image/jpeg").split(';base64,')[1];
;base64, 值。让我疯狂 45 分钟
看看你如何绘制你的画布
$("canvas").drawImage();
看来您使用的是 Caleb Evans 的 jQuery Canvas (jCanvas)。我实际上使用了那个插件，它有一种简单的方法来检索带有 $('canvas').getCanvasImage(); 的画布 base64 图像字符串
这是一个适合您的小提琴：http://jsfiddle.net/e6nqzxpn/
canvas.toDataURL(); 但似乎更容易。
