基于JavaScript的jimp库处理图片，添加绘制点

Jimp 是一个用于在 Node.js 环境下进行图像处理的 JavaScript 库。要在图片上绘制点并控制点的大小和颜色，你可以使用 Jimp 库的相关方法来实现。

这里来看介绍吧，英文不好的找翻译gpt和度娘应该都不错

GitHub - jimp-dev/jimp: An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.

jimp - npm

首先，确保你已经安装了 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 posite( 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 posite(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）。你可以根据需要调整透明度的值来达到你想要的效果。