在javascript中将图像转换为二进制数据

IT技术 javascript jquery
2021-01-20 15:47:05

可能的重复:
在 Javascript 中获取图像数据?
如何在 HTML 文件中编码图像数据?

有没有办法在javascript中将图像转换为二进制数据,反之亦然。

1个回答

我认为在 JavaScript 中获取图像数据?回答你的问题:

// Code taken from MatthewCrumley (https://stackoverflow.com/a/934925/298479)
function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to guess the
    // original format, but be aware the using "image/jpg" will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

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

img标签传递给这个函数。它将以 base64 编码返回图像。它将被重新编码。因此您无法访问原始图像数据。

我把它变成了一个书签在这里: jsfiddle.net/bgmort/m26yr你在它自己的选项卡中打开你想要的图像,然后运行它,它会在屏幕上插入一个带有数据 url 的文本区域。
2021-03-18 15:47:05
这是一个 base64 编码,而不是直接二进制,因为你需要一个文件
2021-03-25 15:47:05
您可以使用“dataURL.split(',')[1]”代替“dataURL.replace”,它也适用于“png”或“jpg”以外的其他格式。:)
2021-04-10 15:47:05
打败我,但我也是这样做的。+1
2021-04-12 15:47:05
嗯.. 如何在不使用画布的情况下获取 base64 图像数据?可能的?
2021-04-13 15:47:05