有没有办法将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
方法,该方法返回包含给定格式的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格式的详细信息。
看看你如何绘制画布
$("canvas").drawImage();
看来你使用Caleb Evans的jQuery Canvas(jCanvas)。我实际上使用该插件,它有一个简单的方法来检索canvas base64图像字符串与$('canvas').getCanvasImage();
这是一个适合你的小提琴:http://jsfiddle.net/e6nqzxpn/