从图像中提取 rgba 数据答案

【问题标题】：Extract rgba data from image从图像中提取 rgba 数据
【发布时间】：2017-08-18 03:39:31
【问题描述】：

我正在寻找一种方法来提取图像的所有 rgba 数据。

我从模块画布中遇到了getImageData() 方法，在我的情况下，对于 10x10，它返回一个仅为零的数组。下面是我现在如何提取数据。有什么意见，谢谢

fs.readFile(__dirname + '/image.jpg', function(err, data) {
    if (err) throw err;
    var img = new Canvas(10, 10)   
    img.src = data;
    var c = img.getContext('2d');
    var imgData = c.getImageData(0, 0, img.width, img.height);
})

【问题讨论】：

当您说图像的“所有 rgba 数据”时，您到底在要求什么？你想用画布做什么。可能更容易理解上下文：一旦你有了 rgba 数据，你打算做什么？
我的意思是一个接一个的数组中的rgba数据，就像我想要rgb数据一样，我使用canvas来获取数据，仅此而已。
我得到一个 400 元素数组，在 10x10 上调用 getImageData。那是RGB和A。我错过了什么？另外，如果你在 node 中，你使用的是 electron 还是 nwjs，或者你是如何获得 Canvas 的？
该死，是的，我也这样做，只是它充满了零，至少我登录控制台的前 100 个 - 检查了它们，全部为零。（我知道我应该编辑问题，因为这不是它所说的）
这将返回正确的格式，但数据还不会在画布中。您需要将数据转换为 base 64，然后适当地预先添加详细信息。我相信我在下面的答案中的 dataURL 语法是正确的。祝你好运。我很快就要睡觉了，但会在上午入住。

标签： node.js image node-canvas

【解决方案1】：

正如我在最后的评论中提到的，我认为根本问题是 fs.readFile 正在返回您的原始数据，这对画布的 src 属性没有用处。我认为下面会起作用，但我承认我还没有测试过。

fs.readFile(__dirname + '/image.jpg', function(err, data) {
    if (err) throw err;
    var img = new Canvas(10, 10)
   img.src = 'data:image/jpeg;base64,'+ data.toString('base64');
   var c = img.getContext('2d');
   var imgData = c.getImageData(0, 0, img.width, img.height);
})

【讨论】：

好的，谢谢你，你真的帮了我很多，而且你听起来是个很好的人:)。它还没有完全起作用，但我认为它只需要一些调整。
好吧，有些人可能会争论“好人”的标签，但只有当他们发现我心情不好时！就像我说的，我明天也去看看。我想到的一件事是，我不知道画布如何处理比自己大的 src 图像。这可能是我明天阅读的一些有趣的 JavaScript 琐事。
最后一件事：this question 可能会有帮助。
嗯是的，不幸的是我没有让它工作，如果你能看看它会很酷
祝你好运。看起来像一个有点挑剔的包。我还将您的画布标签更改为“节点画布”，以便其他人更清楚。您还可以查看其他类似标记的问题。