npm 包 jimp 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对图片进行处理。jimp 是一款轻量级的 Node.js 图片处理库，可以方便地实现各种图片处理操作。本文将介绍如何使用 jimp 库来进行图片处理。

安装 jimp

使用 npm 安装 jimp：

npm install jimp

加载图片

使用 jimp 库加载图片：

const Jimp = require('jimp');

Jimp.read('image.png', (err, image) => {
  if (err) throw err;
  // 处理图片
});

这里的 image.png 是需要处理的图片文件名，可以是相对路径或绝对路径。

调整大小

调整图片大小非常简单，只需要使用 resize 方法即可。例如，将图片缩小一半：

image.resize(image.bitmap.width / 2, image.bitmap.height / 2);

裁剪图片

裁剪图片也很容易。使用 crop 方法指定裁剪区域：

image.crop(x, y, width, height);

其中，x 和 y 是裁剪区域左上角的坐标，width 和 height 是裁剪区域的宽度和高度。

添加文本水印

添加文本水印也很容易，使用 print 方法即可：

image.print(font, x, y, text);

其中，font 是字体对象，可以使用 Jimp.FONT_SANS_16_BLACK 等常量来指定字体；x 和 y 是文本左上角的坐标；text 是要添加的文本。

添加图片水印

添加图片水印也很容易，使用 composite 方法即可：

Jimp.read('watermark.png', (err, watermark) => {
  if (err) throw err;

  image.composite(watermark, x, y, {
    mode: Jimp.BLEND_SOURCE_OVER,
    opacitySource: 0.5,
  });
});

其中，watermark 是要添加的水印图片对象，x 和 y 是水印左上角的坐标。mode 指定了水印图层和原图层之间的混合模式，opacitySource 指定了水印的不透明度。

保存图片

处理完图片后，使用 write 方法将图片保存到文件：

image.write('output.png');

这里的 output.png 是保存的文件名，可以是相对路径或绝对路径。

完整示例代码

下面是一个完整的示例代码，实现了将图片裁剪为正方形，并在右下角添加了一个带阴影的文本水印：

-- -------------------- ---- -------
----- ---- - ----------------

---------------------- ----- ------ -- -
  -- ----- ----- ----

  -- ------
  ----- ---- - ---------------------------- ---------------------
  ----- - - ------------------- - ----- - --
  ----- - - -------------------- - ----- - --
  ------------- -- ----- ------

  -- ----
  ----- ------ - --- ---------- ----- ------------
  ----------------------- -- ---

  -- ------
  ----- ---- - ----- ---------------------------------------
  ------------------ ---- - --- ---- - --- -------------

  ---------------------------
---展开代码

总结

jimp 是一款非常方便实用的图片处理库，可以实现各种常见的图片处理操作。本文介绍了 jimp 的基本用法，并给出了实际应用的示例代码。希望读者能够通过本文学会使用 jimp 进行图片处理

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/53741

npm 包 jimp 使用教程