如何在节点js中编辑base64图像

Question

我正在尝试向 base64 图片添加一个像素。我希望我的快递服务器接收 base64 图像字符串（例如 data:image/png;base64,iVBORw0KG...），例如，假设图像是 100x100px，我想在 x=10 和 y=10 上添加红色像素，然后发送它作为回应。我没有任何可行的代码可以显示，因为我不知道该怎么做，也无法在互联网上找到任何东西。表达部分不是我知道如何做到的问题。寻找正确方向的任何指针、任何建议或部分代码。谢谢！

Answer 1

您可以使用 Jimp 包来做到这一点。

这是一个在 100x100 黑色 png 图像上设置红色像素的简单示例：

const Jimp = require('jimp');
const { promisify } = require('util');

const MIME_TYPE = 'image/png';
const IMAGE_URL = `data:${MIME_TYPE};base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAA0SURBVHhe7cEBDQAAAMKg909tDjcgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAbNXWUAAEE/b5iAAAAAElFTkSuQmCC`;

const coords = {
    x: 10,
    y: 10
};

const color = {
    r: 255,
    g: 0,
    b: 0,
    a: 255
};

async function main(color, coords) {
    const imageData = IMAGE_URL.split(',').pop();
    const image = await Jimp.read(Buffer.from(imageData, 'base64'));

    const hexColor = Jimp.rgbaToInt(color.r, color.g, color.b, color.a);

    image.setPixelColor(hexColor, coords.x, coords.y);

    const toBase64 = promisify(image.getBase64).bind(image);

    return await toBase64(MIME_TYPE);
}

main(color, coords)
    .then(console.log)
    .catch(console.error);

Answer 2

尝试使用sharp处理图像。您可以将 base64 图像转换为缓冲区并使用此库

var imgUri = base64Str.split(';base64,').pop()
var buffer = Buffer.from(uri, 'base64');
sharp(buffer)
 . // Do your thing here with sharp

如何在节点js中编辑base64图像

How to edit base64 image in node js

javascript

base64

node.js