npm 包 @tohru/gm 使用教程

简介

@tohru/gm 是一个非常实用的 npm 包，它可以帮助前端开发者快速处理并转换图片。@tohru/gm 基于 GraphicsMagick 开发，提供了很多图片处理的方法，例如：缩放、裁剪、旋转、水印等等，而且 @tohru/gm 也非常容易使用！

安装

首先，我们需要在本地安装 @tohru/gm。使用 npm 命令即可：

npm install @tohru/gm

安装完成后，我们就可以使用 @tohru/gm 进行图片处理了。

快速开始

下面是一个简单的 @tohru/gm 示例，它会对一个图片进行缩放操作，并且保存到指定的文件夹中：

const gm = require('@tohru/gm');

gm('path/to/image.png')
  .resize(800, 600)
  .write('path/to/dest.png', function (err) {
    if (err) console.log(err);
    console.log('done');
  });

以上代码使用 gm() 方法创建一个 gm() 对象，然后使用 .resize() 方法缩放图片大小，最后使用 .write() 方法保存图片。如果没有出现错误，done 就会被打印出来。

图片处理方法

GraphicsMagick 提供了很多图片处理方法，@tohru/gm 也都封装了起来。下面是一些常用的图片处理方法和相应的使用示例。

缩放

.resize(w, h, options)：使用该方法可以将图片按指定宽高缩放。

使用示例：

gm('path/to/image.png')
  .resize(800, 600)
  .write('path/to/dest.png', function (err) {
    if (err) console.log(err);
    console.log('done');
  });

裁剪

.crop(w, h, x, y)：使用该方法可以将图片剪裁为指定宽高以及位置。

使用示例：

gm('path/to/image.png')
  .crop(400, 400, 0, 0)
  .write('path/to/dest.png', function (err) {
    if (err) console.log(err);
    console.log('done');
  });

旋转

.rotate(color, degrees)：使用该方法可以将图片按指定角度旋转。

使用示例：

gm('path/to/image.png')
  .rotate('white', 45)
  .write('path/to/dest.png', function (err) {
    if (err) console.log(err);
    console.log('done');
  });

添加水印

.drawText(x, y, text, options)：使用该方法可以给图片添加文字水印。

使用示例：

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

.drawImage(x, y, width, height, image)：使用该方法可以给图片添加图片水印。需要传入图片路径作为参数。

使用示例：

gm('path/to/image.png')
  .drawImage(0, 0, 200, 200, 'path/to/watermark.png')
  .write('path/to/dest.png', function (err) {
    if (err) console.log(err);
    console.log('done');
  });

总结

@tohru/gm 是一个非常实用的 npm 包，它可以帮助我们快速处理和转换图片。本文介绍了 @tohru/gm 的安装、基本用法，以及常用的图片处理方法和相应的使用示例。相信通过本文的学习，大家已经掌握了 @tohru/gm 的使用方法，可以使用它来更方便地处理图片了。

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