javascript - 将图像的每个像素颜色转换为json

Question

如何将图像中的每个像素颜色转换为 json 文件。 例如，我有一张 352x240 (240p) 的 Mario 图像，我不会抓取这张照片中的每个像素，获取其 RGB 值，然后将其从左到右、从上到下添加到 json 文件中。

(我认为你必须循环遍历图像的每个像素，你如何实现这一点？)

像这样:(我必须创建变量，以便我可以使用要求的 fs 来保存文件。)

    data: 
    [
        "0, 0, 0",
        "0, 0, 5"
    ]
};

保存后应如下所示:(String)

{"data":["0, 0, 0","0, 0, 5"]}

我现在的代码:

var getPixels = require("get-pixels")
var Jimp = require('jimp');
const fs = require("fs");

Jimp.read("240p.png", function (err, image) {
    var imgg = image.getPixelColor(1, 1); // For example I want to get pixel 1,1
    var imgg2 = Jimp.intToRGBA(imgg);

});

var obj = {
    data: 
    [
        "0, 0, 0",
        "0, 0, 5"
    ]
};
var filestring = JSON.stringify(obj);
var filename = "eek"
var file = filename
fs.access(file, fs.F_OK, (err) => {
    if (err) {
        console.log("Creating file.")
        fs.writeFile(filename, filestring, 'utf8', function (err){
            if (err) {
                return console.log("Something wen't wrong saving the file.")
            }
            console.log("File was successfully saved.")
        });
        return
    }
    console.log("File already exists.")
})

来源:get-pixels (获取图像大小) jimp (获取像素颜色)

Answer 1

这是我第一次使用 Nodejs 处理图像。这使用另一个 npm 包 pngjs 。希望这可以帮助您实现您想要做的事情!

var PNG = require('pngjs').PNG;
var fs = require("fs");

fs.createReadStream('240p.png').pipe(new PNG({ filterType: 4 })).on('parsed', () => {
    var pixels = [];
    for (var y = 0; y < this.height; y++) {
        for (var x = 0; x < this.width; x++) {
            var idx = (this.width * y + x) << 2;
            var r = this.data[idx];
            var g = this.data[idx + 1];
            var b = this.data[idx + 2];
            pixels.push(`${r}, ${g}, ${b}`);
        }
    }
    fs.writeFile('output.json', JSON.stringify({ data: pixels }), 'utf8', (err) => {
        if (err) {
            console.error(err)
        }
    });
});

更新(2019 年 11 月 10 日)

经过对 Jimp 的使用进行一些研究后，我成功地在不使用 pngjs 的情况下使其工作。包裹。这应该输出一个包含正确 RGB 数据的 JSON!

var Jimp = require("Jimp");
var fs = require("fs");

Jimp.read("240p.png")
  .then(image => {
    var width = image.bitmap.width;
    var height = image.bitmap.height;
    var pixels = [];
    for (var y = 0; y < height; y++) {
      for (var x = 0; x < width; x++) {
        var pixel = Jimp.intToRGBA(image.getPixelColor(x, y));
        pixels.push(`${pixel.r}, ${pixel.g}, ${pixel.b}`);
      }
    }
    fs.writeFile('output.json', JSON.stringify({ data: pixels }), 'utf8', (err) => {
        if (err) { throw err; }
    });
  })
  .catch(err => { throw err; });

更新 2(2019 年 11 月 10 日)

经过大量的尝试和错误，我终于得出了一个工作脚本，可以将 png 文件转换为二维 rgb 数组，并将二维 rgb 数组转换回 png 图像! 另请注意，我假设您正在尝试将 RGB 数据保存为二维数组，因为它非常重要，因为我们必须根据数组长度知道图像大小。

var Jimp = require('Jimp');
var fs = require('fs');

// Create two-dimensional pixels rgb array based on png image
Jimp.read('240p.png')
  .then(image => {
    var width = image.bitmap.width;
    var height = image.bitmap.height;
    var pixels = [];
    for (var y = 0; y < height; y++) {
      var rowPixels = [];
      for (var x = 0; x < width; x++) {
        var pixel = Jimp.intToRGBA(image.getPixelColor(x, y));
        rowPixels.push(`${pixel.r}, ${pixel.g}, ${pixel.b}`);
      }
      pixels.push(rowPixels);
    }
    fs.writeFile('INPUT_DATA.json', JSON.stringify({ data: pixels }), 'utf8', err => {
        if (err) { throw err; }
      }
    );
  })
  .catch(err => { throw err; });

// Create png image based on two-dimensional pixels rgb array
fs.readFile('INPUT_DATA.json', 'utf8', (err, file) => {
    if (err) { throw err; }
    var pixelsData = JSON.parse(file);
    var pixels = pixelsData.data;
    new Jimp(pixels[0].length, pixels.length, (err, image) => {
        if (err) { throw err; }
        pixels.forEach((rowPixels, y) => {
            rowPixels.forEach((pixel, x) => {
                var rgb = pixel.split(',');
                var r = Number(rgb[0]);
                var g = Number(rgb[1]);
                var b = Number(rgb[2]);
                var color = Jimp.rgbaToInt(r, g, b, 255);
                image.setPixelColor(color, x, y)
            })
        })
        image.write('OUTPUT_IMAGE.png', (err) => {
            if (err) { throw err; }
        });
    });
})