将图像 src 数据：转换为 Uint8Array答案

【问题标题】：convert image src data: into Uint8Array将图像 src 数据：转换为 Uint8Array
【发布时间】：2015-05-02 00:59:33
【问题描述】：

我想使用 (pica library) 来调整图像大小，但它要求我提供 Uint8Array，而我只有一个带有

的 Image 对象

src = 'data:image/jpeg;base64,/9j/4AAQ...'

我不知道如何把它变成一个 Uint8Array，有什么想法吗？
谢谢

【问题讨论】：

从内存中，存储在画布中的数据存储在相同类型的类型化数组中。因此，您可以将图像绘制到画布上，然后在画布上调用 getImageData。在返回的对象中，您将拥有一个您想要的数组。当然，如果你无论如何都要通过画布，你可以自己调整大小，不需要图书馆。这是一个使用画布缩放图像的示例：stackoverflow.com/questions/28773631/…（忽略上传部分）

标签： javascript

【解决方案1】：

您需要将图像应用到画布并使用getImageData()。

这里有一个简单的例子来说明如何做到这一点：

//create canvas, set base64 test img
var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    base64 = 'data:image/jpeg;base64...'; //base64 string

//size canvas
canvas.width = 34,
canvas.height = 34;

//create image, set src to base64 and onload draw to canvas
var image = new Image();
image.onload = (function(canvas, ctx){
    return function(){
        ctx.drawImage(this, 0, 0);

        //now we can finally get a Uint8ClampedArray
        var imageData = ctx.getImageData(0, 0, 34, 34);
        console.log(imageData.data);
    };
})(canvas, ctx);
image.src = base64;

jsfiddle

【讨论】：

嗨@EvilZebra！在不使用Image 类的情况下，是否可以从ctx.getImageData 获得相同的结果？
恐怕不是@SergeyVolkov，将图像数据放入画布的唯一其他方法是putImageData()，它本身需要Uint8ClampedArray。而且我们不能轻易地从 base64 编码的图像中提取像素颜色数据，因为字符串包含图像标题和其他数据。