如何从 JavaScript 中已加载的图像中获取 Base64 编码的图像数据？-js教程-PHP中文网

如何从 JavaScript 中已加载的图像中获取 Base64 编码的图像数据？

Mary-Kate Olsen

发布： 2024-12-15 22:56:11

原创

623 人浏览过

How Can I Get Base64-Encoded Image Data from Already Loaded Images in JavaScript?

在JavaScript中提取图像数据URL

问题：

如何获得base64-使用 HTML 标签对已经加载到浏览器中的图像进行编码，无需重新下载？

Greasemonkey 和 Firefox 的解决方案：

要使用 Greasemonkey 和 Firefox 提取完全加载的图像的内容，请执行以下步骤：

创建画布：生成尺寸与图像的大小。
复制图像数据：利用drawImage函数将图像数据传输到画布。
获取数据URL：使用toDataURL 函数从canvas.

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

登录后复制

注意：此解决方案假设图像数据可从与页面相同的域中获得，或者在服务器支持下启用了 crossOrigin="anonymous" 属性CORS。此外，返回的图像可能会被重新编码。

以上是如何从 JavaScript 中已加载的图像中获取 Base64 编码的图像数据？的详细内容。更多信息请关注PHP中文网其他相关文章！