当前位置：首页 > article >正文

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

article 2024/11/13 10:03:05

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.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);
  });

在这个示例中：