从HTML5 Canvas获取二进制（base64）数据（readAsBinaryString） [英] Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)

问题描述

是否有任何方式将HTML Canvas的内容作为二进制数据读取？

目前，我拥有以下HTML以显示输入文件和

 < p>< button id =myButtontype =button>获取图片内容和LT; /按钮>< / p为H. 
< p>输入：< input id =fileInputtype =file/>< / p> 
< p>帆布< canvas id =myCanvaswidth =578height =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编码）它会将数据推送到服务器...

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

任何帮助都会很棒！ Cheers

解决方案

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

  var jpegUrl = canvas.toDataURL（image / jpeg）; 
 var pngUrl = canvas.toDataURL（）; // PNG是默认的
  

虽然返回值不是，但 base64编码的二进制数据，修剪方案和文件类型以获得你想要的数据是一件简单的事情。

toDataURL 方法将失败，如果浏览器认为您已将任何从不同来源加载的数据绘制到画布上，则此方法仅适用于如果您的图像文件是从与HTML页面相同的服务器加载的其脚本正在执行此操作。

有关更多信息，请参阅 MDN文档包含 toDataURL 和关于数据的维基百科文章： URI方案，其中包含格式的详细信息您将通过此调用收到的URI。

Is there any way of reading the contents of a HTML Canvas as binary data?

At the moment I've got the following HTML to show an input file and the canvas below it:

<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...

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

解决方案

The canvas element provides a toDataURL method which returns a data: URL that includes the base64-encoded image data in a given format. For example:

var jpegUrl = canvas.toDataURL("image/jpeg");
var pngUrl = canvas.toDataURL(); // PNG is the default

Although the return value is not just the 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.

The toDataURL method 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.

For more information see the MDN docs on the canvas API, 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.

这篇关于从HTML5 Canvas获取二进制（base64）数据（readAsBinaryString）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！