首页 文章

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

提问于
浏览 次
60

有没有办法将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编码），因此它会将数据推送到服务器...

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

任何帮助都会很棒！干杯

javascript html5 html5-canvas fileapi

2 回答

  • 118

    canvas 元素提供 toDataURL 方法，该方法返回 data: 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格式的详细信息 .

    回复于
  • -1

    看看你如何绘制画布

    $("canvas").drawImage();

    看来你使用了Caleb Evans的jQuery Canvas（jCanvas） . 我实际上使用该插件，它有一个简单的方法来检索画布base64图像字符串 $('canvas').getCanvasImage();

    这是一个适合您的小提琴：http://jsfiddle.net/e6nqzxpn/

    回复于

相关问题