如何用javascript将图像从base64转换为数组

Question

我的javascript代码中有一个图像，它是base64格式的，如下所示：

Img=image/jpeg;base64,/9j/4AAQSK.......

现在我想使用javascript将这个图像转换为数组。

Answer 1

你可能是指ImageData吗？它是一个1d数组，其中每4个连续的数字(字节？(表示(r，g，b，a(，值为0..255

var str = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII="

var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
var image = new Image()
image.onload = function() {
ctx.drawImage(image, 0, 0);
var imageData = ctx.getImageData(0, 0, image.width, image.height);
console.log(imageData)
}
image.src = str;
document.body.appendChild(canvas)

Answer 2

试试这个：

---

function base64ToUint8Array(base64) {
const binary = atob(base64);
const len = binary.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++)
bytes[i] = binary.charCodeAt(i);
return bytes;
}
base64ToUint8Array(YourBase64String)

解释

---

这很简单，

1. 首先我们解码base64字符串(atob(
2. 然后我们创建新的数组与解码的长度相同的8位无符号整数一串(Uint8Array(
3. 之后，我们迭代字符串并填充字符串中每个字符的Unicode值的数组

示例：

---

function base64ToUint8Array(base64) {
const binary = atob(base64);
const len = binary.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++)
bytes[i] = binary.charCodeAt(i);
return bytes;
}
const image = `Img=image/jpeg;base64,T25seUV4YW1wbGU=`
const base64 = image.split('base64,')[1]
console.log(base64ToUint8Array(base64))

参考：将base64字符串转换为ArrayBuffer

备注

---

如果要返回ArrayBuffer而不是Uint8Array，则应返回bytes.buffer而不是bytes