Jimp 是一个用于在 Node.js 环境下进行图像处理的 JavaScript 库。要在图片上绘制点并控制点的大小和颜色,你可以使用 Jimp 库的相关方法来实现。
这里来看介绍吧,英文不好的找翻译gpt和度娘应该都不错
首先,确保你已经安装了 Jimp 库。然后,你可以按照以下步骤在图片上绘制点:
安装 Jimp:
如果还没有安装 Jimp,可以使用 npm 进行安装:
npm install jimp
基本框架
const Jimp = require('jimp');
Jimp.read('input_image.jpg')
.then(image => {
// 图像处理操作
})
.catch(err => {
console.error(err);
});
具体处理操作片段(放入上面图像处理模块就行)
调整大小
image.resize(300, Jimp.AUTO); // 宽度300像素,高度按比例自动调整
调整透明度
image.opacity(0.5); // 设置透明度为50%
增加亮度
image.brightness(0.5); // 将亮度增加50%
裁剪图像
image.crop(100, 100, 200, 200); // 从坐标(100,100)开始裁剪,宽高都是200像素
添加滤镜
image.greyscale(); // 转换为灰度图像
绘制文本
const font = await Jimp.loadFont(Jimp.FONT_SANS_16_WHITE);
image.print(font, 10, 10, 'Hello, World!');
绘制圆形
image.circle({ radius: 50, x: 100, y: 100, edge: Jimp.EDGE_HARDNESS });
绘制矩形
image.rect(50, 50, 100, 100, 0xFF0000FF); // 50x50 大小的红色矩形
保存图像
image.write('output_image.jpg');
旋转图像
image.rotate(90)
其他方法参考
/* Resize */
image.contain( w, h[, alignBits || mode, mode] ); // scale the image to the given width and height, some parts of the image may be letter boxed
image.cover( w, h[, alignBits || mode, mode] ); // scale the image to the given width and height, some parts of the image may be clipped
image.resize( w, h[, mode] ); // resize the image. Jimp.AUTO can be passed as one of the values.
image.scale( f[, mode] ); // scale the image by the factor f
image.scaleToFit( w, h[, mode] ); // scale the image to the largest size that fits inside the given width and height
// An optional resize mode can be passed with all resize methods.
/* Crop */
image.autocrop([tolerance, frames]); // automatically crop same-color borders from image (if any), frames must be a Boolean
image.autocrop(options); // automatically crop same-color borders from image (if any), options may contain tolerance, cropOnlyFrames, cropSymmetric, leaveBorder
image.crop( x, y, w, h ); // crop to the given region
/* Composing */
image.blit( src, x, y, [srcx, srcy, srcw, srch] );
// blit the image with another Jimp image at x, y, optionally cropped.
image.composite( src, x, y, [{ mode, opacitySource, opacityDest }] ); // composites another Jimp image over this image at x, y
image.mask( src, x, y ); // masks the image with another Jimp image at x, y using average pixel value
image.convolute( kernel ); // applies a convolution kernel matrix to the image or a region
/* Flip and rotate */
image.flip( horz, vert ); // flip the image horizontally or vertically
image.mirror( horz, vert ); // an alias for flip
image.rotate( deg[, mode] ); // rotate the image counter-clockwise by a number of degrees. Optionally, a resize mode can be passed. If `false` is passed as the second parameter, the image width and height will not be resized.
/* Colour */
image.brightness( val ); // adjust the brighness by a value -1 to +1
image.contrast( val ); // adjust the contrast by a value -1 to +1
image.dither565(); // ordered dithering of the image and reduce color space to 16-bits (RGB565)
image.greyscale(); // remove colour from the image
image.invert(); // invert the image colours
image.normalize(); // normalize the channels in an image
/* Alpha channel */
image.hasAlpha(); // determines if an image contains opaque pixels
image.fade( f ); // an alternative to opacity, fades the image by a factor 0 - 1. 0 will haven no effect. 1 will turn the image
image.opacity( f ); // multiply the alpha channel by each pixel by the factor f, 0 - 1
image.opaque(); // set the alpha channel on every pixel to fully opaque
image.background( hex ); // set the default new pixel colour (e.g. 0xFFFFFFFF or 0x00000000) for by some operations (e.g. image.contain and
/* Blurs */
image.gaussian( r ); // Gaussian blur the image by r pixels (VERY slow)
image.blur( r ); // fast blur the image by r pixels
/* Effects */
image.posterize( n ); // apply a posterization effect with n level
image.sepia(); // apply a sepia wash to the image
image.pixelate( size[, x, y, w, h ]); // apply a pixelation effect to the image or a region
/* 3D */
image.displace( map, offset ); // displaces the image pixels based on the provided displacement map. Useful for making stereoscopic 3D images.
完整实例1——使用 Jimp 在图片上绘制点:
const Jimp = require('jimp');
// 读取图片
Jimp.read('input_image.jpg')
.then(image => {
const x = 100; // 点的 x 坐标
const y = 150; // 点的 y 坐标
const color = 0xFF0000FF; // 点的颜色,这里是红色
const pointSize = 3; // 点的大小
// 在指定的坐标绘制一个点
image.setPixelColor(color, x, y);
// 通过绘制周围像素来增加点的大小
for (let i = x - pointSize; i <= x + pointSize; i++) {
for (let j = y - pointSize; j <= y + pointSize; j++) {
image.setPixelColor(color, i, j);
}
}
// 保存处理后的图片
return image.writeAsync('output_image.jpg');
})
.catch(err => {
console.error(err);
});
在上面的示例中:
Jimp.read
方法用于读取图片。- 使用
setPixelColor
方法在指定的坐标上设置颜色。 - 通过循环设置周围像素的颜色以增加点的大小。
- 最后,保存修改后的图片。
你可以根据需要更改点的位置、颜色和大小。修改 x
、y
、color
和 pointSize
变量以获得你想要的效果。
绘制多个点,并设置不同颜色
const Jimp = require('jimp');
const width = 500; // 图片宽度
const height = 500; // 图片高度
// 创建一个空白的图片
new Jimp(width, height, (err, image) => {
if (err) throw err;
// 需要绘制的点的信息(坐标、颜色、大小)
const points = [
{ x: 100, y: 100, color: 0xFF0000FF, size: 5 }, // 红色,大小为5像素
{ x: 200, y: 300, color: 0x00FF00FF, size: 7 }, // 绿色,大小为7像素
{ x: 400, y: 200, color: 0x0000FFFF, size: 10 } // 蓝色,大小为10像素
// 添加更多点的信息...
];
// 绘制每个点
points.forEach(point => {
const { x, y, color, size } = point;
// 绘制点的周围像素来控制大小
for (let i = x - size; i <= x + size; i++) {
for (let j = y - size; j <= y + size; j++) {
image.setPixelColor(color, i, j);
}
}
});
// 保存图片
image.write('output_image.jpg', () => {
console.log('图片已保存');
});
});
这个示例创建了一个指定宽度和高度的空白图片,并根据 points
数组中的信息,在图片上绘制了多个点。points
数组中每个元素都包含了点的坐标 (x
和 y
)、颜色 (color
) 和大小 (size
)。
x
和y
表示点的坐标位置。color
是点的颜色,采用 RGBA 格式 (0xRRGGBBAA),其中 RR 代表红色、GG 代表绿色、BB 代表蓝色、AA 代表透明度。size
表示点的大小。
然后通过双重循环在指定位置绘制了每个点,并根据大小设置了颜色。最后将生成的图片保存为 output_image.jpg
。
你可以根据需要更改点的位置、颜色和大小,以及在 points
数组中添加更多点的信息,来达到你想要的效果。
完整实例2——Jimp 合并两张图片并设置透明度:
const Jimp = require('jimp');
// 读取第一张图片
Jimp.read('image1.jpg')
.then(image1 => {
// 读取第二张图片
return Jimp.read('image2.png')
.then(image2 => {
// 调整第二张图片的大小以适应第一张图片
image2.resize(image1.bitmap.width, image1.bitmap.height);
// 将两张图片叠加并设置透明度
image1.composite(image2, 0, 0, {
mode: Jimp.BLEND_SOURCE_OVER, // 叠加模式
opacitySource: 0.5 // 设置第二张图片的透明度(这里为50%)
});
// 保存合并后的图片
return image1.writeAsync('output_image.jpg');
})
.catch(err => {
console.error(err);
});
})
.catch(err => {
console.error(err);
});
在这个示例中:
- 使用
Jimp.read()
方法读取了两张图片。 - 调整了第二张图片的大小以适应第一张图片。
- 使用
composite()
方法将第二张图片叠加到第一张图片上,并设置了透明度。 - 最后,保存了合并后的图片。
这段代码将两张图片叠加在一起,并设置了第二张图片的透明度为50%(0.5)。你可以根据需要调整透明度的值来达到你想要的效果。