npm 包 graphicsmagickextension 使用教程

前言

在前端开发中，有时候需要对图片进行处理，比如压缩、裁剪、添加水印等，这时候就需要使用到图片处理工具。其中一款常用的工具是 graphicsmagick，它是一款开源的命令行图片处理工具，在 Linux 和 macOS 操作系统中有自带的安装包，但在 Windows 操作系统中需要下载安装。

虽然 graphicsmagick 自带的命令行工具可以满足开发中的绝大部分需求，但有时候需要在 JavaScript 代码中调用这些处理，这时候就需要用到 npm 包 graphicsmagickextension。

本篇文章将介绍 npm 包 graphicsmagickextension 的使用教程，包括安装、基本使用和高级功能等。

安装

npm 包 graphicsmagickextension 可以通过以下命令进行安装：

npm install graphicsmagickextension

安装完成后，就可以在 JavaScript 代码中引用它了。

基本使用

压缩图片

压缩图片是常用的图片处理操作之一，可以通过 graphicsmagickextension 来实现。下面是一个简单的实例：

const gm = require('graphicsmagickextension');

gm('./example.jpg')
    .compress(80)
    .write('./example-compressed.jpg', function (error) {
        if (error) console.log(error);
        else console.log('图片压缩完成');
    })

上述代码中，首先通过 require('graphicsmagickextension') 引入 graphicsmagickextension 模块，然后通过 gm('./example.jpg') 创建一个对 example.jpg 进行处理的图形对象，并使用 .compress(80) 方法将图片进行 80% 的压缩。接着使用 .write('./example-compressed.jpg', function (error) {}) 方法将处理后的图片保存到 example-compressed.jpg 中。

裁剪图片

裁剪图片也是常用的图片处理操作之一，可以通过 graphicsmagickextension 的 .crop() 方法来实现。下面是一个裁剪图片的实例：

const gm = require('graphicsmagickextension');

gm('./example.jpg')
    .crop(300, 300, 100, 100)
    .write('./example-cropped.jpg', function (error) {
        if (error) console.log(error);
        else console.log('图片裁剪完成');
    })

上述代码中，首先通过 require('graphicsmagickextension') 引入 graphicsmagickextension 模块，然后通过 gm('./example.jpg') 创建一个对 example.jpg 进行处理的图形对象，并使用 .crop(300, 300, 100, 100) 方法将图片裁剪成宽度为 300，高度为 300，位于左上角起点为 (100, 100) 的图片。接着使用 .write('./example-cropped.jpg', function (error) {}) 方法将处理后的图片保存到 example-cropped.jpg 中。

添加水印

在图片上添加水印是常见的图片处理操作之一，可以通过 graphicsmagickextension 的 .drawText() 方法来实现。下面是一个添加水印的实例：

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

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

上述代码中，首先通过 require('graphicsmagickextension') 引入 graphicsmagickextension 模块，然后通过 gm('./example.jpg') 创建一个对 example.jpg 进行处理的图形对象，并使用 .drawText() 方法在图片中间添加一个文本水印，并设置其字体、字号、边框颜色、填充颜色以及对齐方式。接着使用 .write('./example-with-watermark.jpg', function (error) {}) 方法将处理后的图片保存到 example-with-watermark.jpg 中。

高级功能

除了上述基本功能之外，graphicsmagickextension 还支持一些高级的图片处理操作，比如旋转、调整亮度等。下面是一个旋转图片的实例：

const gm = require('graphicsmagickextension');

gm('./example.jpg')
    .rotate(45, 'black')
    .write('./example-rotated.jpg', function (error) {
        if (error) console.log(error);
        else console.log('图片旋转完成');
    })

上述代码中，首先通过 require('graphicsmagickextension') 引入 graphicsmagickextension 模块，然后通过 gm('./example.jpg') 创建一个对 example.jpg 进行处理的图形对象，并使用 .rotate() 方法将图片旋转 45 度，并以黑色填充非旋转后的区域。接着使用 .write('./example-rotated.jpg', function (error) {}) 方法将处理后的图片保存到 example-rotated.jpg 中。

总结

本文介绍了如何使用 npm 包 graphicsmagickextension 实现图片的压缩、裁剪、添加水印等处理功能，并介绍了一些高级的图片处理操作。graphicsmagickextension 是一个功能强大、使用方便的图片处理工具，可以大大提高前端开发中对图片的处理效率。

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