从 HTML5 Canvas 获取二进制 (base64) 数据 (readAsBinaryString)

IT技术 javascript html html5-canvas fileapi

2021-02-04 19:48:48

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

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

任何帮助都会很棒！干杯

3个回答

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

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

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

toDataURL如果浏览器认为您已经将任何从不同来源加载的数据绘制到画布上，该方法将失败，因此只有当您的图像文件与执行此脚本的 HTML 页面从同一服务器加载时，此方法才有效手术。

有关更多信息，请参阅API上的 MDN 文档canvas，其中包括有关的详细信息toDataURL，以及有关data:URI 方案的 Wikipedia 文章，其中包括有关您将从此次调用中收到的 URI 格式的详细信息。

并非每个 Web 浏览器canvas.toDataURL()都默认为 PNG；您必须通过canvas.toDataURL('image/png')指定它

2021-04-01 19:48:48

简答：

const base64Canvas = canvas.toDataURL("image/jpeg").split(';base64,')[1];

完成忘记你必须分割;base64,值。让我疯狂45分钟

2021-04-01 19:48:48

看看你是如何绘制画布的

$("canvas").drawImage();

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

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

@RajivSharma实际上jCanvas确实有功能projects.calebevans.me/jcanvas/docs/getCanvasImage的canvas.toDataURL();却似乎更容易。

2021-03-14 19:48:48

canvas.getCanvasImage 不是函数

2021-04-02 19:48:48

其它你可能感兴趣的问题

上一篇检查任何 DOM 元素的附加事件处理程序下一篇window.print() 在 IE 中不起作用