有没有办法将 HTML Canvas 的内容读取为二进制数据?
目前我有以下 HTML 来显示输入文件和它下面的 Canvas :
<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>
然后我设置了我的输入文件以正确设置 Canvas ,效果很好:
$('#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:
URL,其中包含给定格式的 base64 编码图像数据。例如:
var jpegUrl = canvas.toDataURL("image/jpeg");
var pngUrl = canvas.toDataURL(); // PNG is the default
虽然返回值只是 base64 编码的二进制数据,但 trim 方案和文件类型以获取您想要的数据是一件简单的事情。
如果浏览器认为您已将从不同来源加载的任何数据绘制到 Canvas ,则 toDataURL
方法将失败,因此此方法仅在您的图像文件是从与其脚本执行此操作的 HTML 页面相同的服务器。
有关详细信息,请参阅 the MDN docs on the canvas
API ,其中包括有关 toDataURL
和 the Wikipedia article on the data:
URI scheme 的详细信息,其中包含有关您将从该调用中收到的 URI 格式的详细信息。
关于javascript - 从 HTML5 Canvas (readAsBinaryString) 获取二进制 (base64) 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15685698/