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

Question

可能的重复问题：
在Javascript中获取图像数据？
如何在HTML文件中编码图像数据？

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

- simplyblue

Answer 1

我认为JavaScript中如何获取图像数据？回答了你的问题：

// Code taken from MatthewCrumley (https://dev59.com/GXNA5IYBdhLWcg3wgeId#934925)
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编码返回图像。但它将被重新编码。因此，您无法访问原始图像数据。

- ThiefMaster

---

我已经知道了，这也是我所做的。+1 - Hacknightly

我已将其转换为书签工具，链接在这里：http://jsfiddle.net/bgmort/m26yr/ 您需要在单独的选项卡中打开所需图像，然后运行此工具，它会在屏幕上插入一个文本区域，其中包含数据URL。 - undefined

你可以使用"dataURL.split(',')[1]"代替"dataURL.replace"，这样也适用于除了"png"或"jpg"之外的其他格式。 :) - Benny Code

这是进行base64编码，而不是像文件那样直接进行二进制编码。 - Chris - Haddox Technologies

有没有一种不使用canvas就能获取base64图像数据的方法？ 可能吗？ - WebWanderer

这是 Base64 而不是二进制。 - Prince Hamza