使用 jimp 为图像着色

Question

我正在使用 jimp 为文件夹中的 png 图像着色，但出现错误：w 和 h 必须是数字（第 42 行 - image.color 函数。）。 这似乎应该是一个简单的操作，但我发现的解决方案非常复杂。 似乎 jimp 是要走的路，但显然它有一些我不熟悉的怪癖。

const { jimpEvChange } = require('@jimp/core');
const { write } = require('jimp');
const { composite } = require('jimp');
const jimp = require('jimp');
var fs = require('fs');

// create an array of 6 colors and specify the colors
const colors = [
    ['green'],
    ['red'],
    ['blue'],
    ['yellow'],
    ['purple'],
    ['orange']
];

// call functions to colorize the images
var pngFiles = GetPNGs("ToColor/");
for (var i = 0; i < pngFiles.length; i++) {
    var image = new jimp(pngFiles[i]);
    Colorize(image, colors[i]);
    image.write(pngFiles[i]);
}


// get pngs from a folder "ToColor" and colorize them each using the colors array
function GetPNGs (folder) {
    var pngFiles = [];
    const newLocal = fs.readdirSync(folder);
    var files = newLocal;
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (file.split(".").pop() == "png") {
            pngFiles.push(folder + "/" + file);
        }
    }
    return pngFiles;
}

// colorize the images
function Colorize (image, color) {
    image.color([
        { apply: 'red', params: [color[0]] },
        { apply: 'green', params: [color[0]] },
        { apply: 'blue', params: [color[0]] }
    ]);
}

// loop through the images and colorize them
function ColorizeImages (pngs, colors) {
    for (var i = 0; i < pngs.length; i++) {
        var image = new jimp(pngs[i]);
        Colorize(image, colors[i]);
        image.write(pngs[i]);
    }
}

任何提示将不胜感激。 谢谢，詹姆斯。

Answer 1

好吧，我试了一下，想出了这个例子：

请注意，此代码需要位于扩展名为.mjs的文件中，因为我们使用的是import语句而不是require 。 您可以以与具有node index.mjs的普通.js文件完全相同的方式运行.mjs文件。 如果您真的想使用requires ，请将导入更改为 requires 并使用.js扩展名正常命名文件。

import jimp from "jimp";
import fs from "fs";

// I wanted to make this example to use async/await properly with Jimp
// So that's why we are using util.promisify to convert fs.readdir
// into a function named readDir, which we can await on
import util from "util";
const readDir = util.promisify(fs.readdir);

// Colors for mix operations
const colors = [ 
    {r: 0, g: 255, b: 154, a: 1}, 
    {r: 255, g: 40, b: 108, a: 1}, 
    {r: 26, g: 172, b: 255, a: 1}, 
    {r: 255, g: 190, b: 171, a: 1}, 
    {r: 255, g: 239, b: 117, a: 1}, 
    {r: 137, g: 91, b: 255, a: 1} 
];

// Colorsnames for output file naming, these correspond to colors array
const colorNames = ['green', 'red', 'blue', 'orange', 'yellow', 'purple'];

// Define which color operations we want to do, using mix as an example
// https://www.npmjs.com/package/jimp#colour-manipulation
const operations = colors.map((c) => {
    return { apply: "mix", params: [c, 60 ]};
});

// Input and output folder names
const inputFolderName = "./ToColor";
const outputolderName = "./out";
const outputFileSuffix = "edited"; // Optional suffix for the output files

// We're using async/await, so must wrap top level code like this
// https://stackoverflow.com/questions/46515764/how-can-i-use-async-await-at-the-top-level
(async () => {

    // Get filenames of the png files in the specified folder
    let pngFileNames = await readDir(inputFolderName);

    // Optional filtering of only .png files
    pngFileNames = pngFileNames.filter((f) => f.includes(".png"));

    // Go through each file
    // Must use for...of loop here, because we have awaits inside the loop
    let i = 0;
    for (let fileName of pngFileNames) {

        // Optional output file name suffixing
        const outPutFileName = outputFileSuffix.length > 0 ? fileName.split('.').reduce((a, b) => `${a}_${outputFileSuffix}.${b}`) : fileName;

        // Make an actual Jimp image object from the file
        const jimpImage = await jimp.read(`${inputFolderName}/${fileName}`);

        // Make one new image per operation, so in total, we output colors.length * pngFileNames.length images
        let j = 0;
        for(let colorOperation of operations) {
            // Apply operation
            jimpImage.color([colorOperation]);

            // Write the edited image to out folder
            await jimpImage.writeAsync(`${outputolderName}/${colorNames[j]}_${outPutFileName}`);
            j++;
        }
        
        i++;
    }
    
})();

您的代码有很多问题。 有一些关于阅读实际图像的问题和许多关于使用 Jimp 库的问题，但除非你想要我，否则我不会全部介绍。

尽管关于 Jimp 文档，您是对的，但它……太糟糕了。 尤其是如果您对 JavaScript 有一些了解的话。

您最大的问题可能是您如何尝试创建新的 Jimp 图像对象。 文档说使用new Jimp(...)是为了创建新图像，这意味着如果你一开始没有任何图像，你就会使用它。

但是，当您已经将图像放在某个文件夹中并希望加载它们以使用 Jimp 进行编辑时，您需要使用jimp.read(...)代替。 jimp.read是一个异步函数，这意味着即使尚未读取图像，您的其余代码也会继续运行。 出于这个原因，我们需要使用await jimp.read ，您可以将其视为“暂停”程序，直到jimp.read实际读取图像。

在读取图像并且图像对象位于名为jimpImage的变量中后，我们使用预定义operations数组调用jimpImage.color() ，在本例中我们使用mix 。 这个函数不是异步的，所以我们不必await它。

最后，在我们对图像应用着色操作后，我们使用writeAsync将图像保存到具有相同名称（和可选后缀）的指定输出文件夹中。 顾名思义，这是一个异步函数，所以我们必须await它。

程序运行完成后，您可以在指定的输出文件夹中找到修改后的图像。

另请注意，Jimp 将一些文档（尤其是关于“颜色内容”）委托给TinyColor Github 页面，因为 Jimp 在后台使用 TinyColor 来处理某些与颜色相关的实用程序内容。 因此，例如，如果您想知道是否可以使用“红色”一词而不是“#FF0000”，那么 TinyColor 文档就有了答案。

关于error: w and h must be numbers -error; 最可能的原因是您使用var image = new jimp(pngFiles[i]);为 Jimp 初始化了错误的图像。 . 就像我说的，这是从头开始创建新图像，我再次参考文档，其中说如果您使用这种语法来创建新图像，它会像这样使用（其中前两个参数是宽度和高度，您的代码中没有给出）：

new Jimp(256, 256, (err, image) => {
  // this image is 256 x 256, every pixel is set to 0x00000000
});

我已经为您提供了一个简化示例，说明如何读取图像、对其应用一些操作并将修改后的图像写回某个文件夹。 剩下的交给你！

如果您有任何问题，请询问，我现在是 Jimp 大师。

这些是我使用的测试图像：

这些是程序输出的内容（请记住，数量只有 60，我们的基础图像具有强烈的色彩）：