Html 从 HTML5 Canvas 获取二进制 (base64) 数据 (readAsBinaryString)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15685698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)
提问by Jamz_2010
Is there any way of reading the contents of a HTML Canvas as binary data?
有没有办法将 HTML Canvas 的内容作为二进制数据读取？
At the moment I've got the following HTML to show an input file and the canvas below it:
目前我有以下 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>
I've then setup my input file to set the canvas correctly which works fine:
然后我设置了我的输入文件以正确设置画布，它工作正常：
$('#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
});
};
});
});
I now need to get the binary data (Base64 encoded) from the Canvas when the button is clicked so it'll push the data to the server...
我现在需要在单击按钮时从 Canvas 获取二进制数据（Base64 编码），以便将数据推送到服务器...
The end result is that I need to provide the user with the ability to select a file, crop/resize it, and then click a button at which point the edited image will be uploaded to the server (I can't do server-side cropping/resizing due to server-side limitations...)
最终结果是我需要为用户提供选择文件、裁剪/调整大小的能力，然后单击一个按钮，此时编辑后的图像将上传到服务器（我不能在服务器端由于服务器端限制而裁剪/调整大小...）
Any help would be great! Cheers
任何帮助都会很棒！干杯
回答by Martin Atkins
The canvaselement provides a toDataURLmethod which returns a data:URL that includes the base64-encoded image data in a given format. For example:
该canvas元素提供了一种toDataURL方法，该方法返回data:包含给定格式的 base64 编码图像数据的URL。例如：
var jpegUrl = canvas.toDataURL("image/jpeg");
var pngUrl = canvas.toDataURL(); // PNG is the default
Although the return value is not justthe base64 encoded binary data, it's a simple matter to trim off the scheme and the file type to get just the data you want.
虽然返回值不仅仅是base64 编码的二进制数据，但修剪方案和文件类型以获取所需的数据是一件简单的事情。
The toDataURLmethod will fail if the browser thinks you've drawn to the canvas any data that was loaded from a different origin, so this approach will only work if your image files are loaded from the same server as the HTML page whose script is performing this operation.
toDataURL如果浏览器认为您已经将任何从不同来源加载的数据绘制到画布上，该方法将失败，因此只有当您的图像文件与执行此脚本的 HTML 页面从同一服务器加载时，此方法才有效手术。
For more information see the MDN docs on the canvasAPI, which includes details on toDataURL, and the Wikipedia article on the data:URI scheme, which includes details on the format of the URI you'll receive from this call.
有关更多信息，请参阅API上的 MDN 文档canvas，其中包括有关 的详细信息toDataURL，以及有关data:URI 方案的维基百科文章，其中包括有关您将从此次调用中收到的 URI 格式的详细信息。
回答by Hans Tiono
Seeing how you draw your canvas with
看看你是如何绘制画布的
$("canvas").drawImage();
$("canvas").drawImage();
it seems that you use jQuery Canvas (jCanvas) by Caleb Evans.
I actually use that plugin and it has a simple way to retrieve canvas base64 image string with $('canvas').getCanvasImage();
您似乎使用了 Caleb Evans 的jQuery Canvas ( jCanvas)。我实际上使用了那个插件，它有一个简单的方法来检索画布 base64 图像字符串$('canvas').getCanvasImage();
Here's a working Fiddle for you: http://jsfiddle.net/e6nqzxpn/
这是一个适合你的小提琴：http: //jsfiddle.net/e6nqzxpn/
