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

是否有任何方式将HTML Canvas的内容作为二进制数据读取？从HTML5 Canvas获取二进制（base64）数据（readAsBinaryString）

目前我有以下的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编码）...

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

任何帮助将是伟大的！ Cheers

来源

2013-03-28 Jamz_2010

100

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

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格式的详细信息。

来源

2013-03-28 15:30:11

看你如何与

$("canvas").drawImage();

看来你使用jQuery帆布（jCanvas）由迦勒埃文斯画出你的画布。我实际使用该插件，它有一个简单的方法来检索与$('canvas').getCanvasImage();

这里帆布的base64图像串的工作捣鼓你：http://jsfiddle.net/e6nqzxpn/

来源

2015-12-03 20:38:31

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

回答

相关问题