npm 包 photo-magician 使用教程

前言

在前端开发中，我们通常会处理或优化图片，而 photo-magician 是一个可以方便地对图片进行压缩、裁剪、缩放、添加水印等操作的 npm 包。本文将介绍如何使用 photo-magician。

安装

首先，我们需要安装 photo-magician，可通过以下命令进行安装：

npm install photo-magician

使用

在安装成功后，我们可以在项目中引入 photo-magician：

const magician = require('photo-magician');

压缩图片

photo-magician 中提供了多种压缩方法，常用的有 jpegCompress 和 pngCompress。下面以 jpegCompress 为例：

magician.jpegCompress(inputFilePath, outputFilePath, quality)

其中，inputFilePath 是要压缩的图片路径，outputFilePath 是输出图片的路径，quality 是压缩质量（0 到 100）。

示例代码：

const magician = require('photo-magician');
magician.jpegCompress('input.jpg', 'output.jpg', 70);

裁剪图片

photo-magician 中提供了 cropImage 方法进行图片裁剪。我们需要指定裁剪的区域和输出图片的大小。

magician.cropImage(inputFilePath, outputFilePath, startX, startY, width, height, finalWidth, finalHeight)

示例代码：

const magician = require('photo-magician');
magician.cropImage('input.jpg', 'output.jpg', 0, 0, 200, 200, 100, 100);

缩放图片

photo-magician 中提供了 resizeImage 方法进行图片缩放。我们需要指定缩放的比例或输出图片的大小。

magician.resizeImage(inputFilePath, outputFilePath, scale, finalWidth, finalHeight)

示例代码：

const magician = require('photo-magician');
// 缩小为原来的一半
magician.resizeImage('input.jpg', 'output.jpg', 0.5);
// 输出大小为 200x200
magician.resizeImage('input.jpg', 'output.jpg', null, 200, 200);

添加水印

photo-magician 中提供了 watermark 方法进行图片水印添加。

magician.watermark(inputFilePath, outputFilePath, watermarkPath, watermarkX, watermarkY)

示例代码：

const magician = require('photo-magician');
magician.watermark('input.jpg', 'output.jpg', 'watermark.png', 50, 50);

总结

本文介绍了如何使用 photo-magician 进行图片压缩、裁剪、缩放、添加水印等操作。希望本文能为前端开发者提供一些参考和帮助。

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