使用 Deno 进行图像处理实战

前言

前端开发已然不是当年写样式和 JS 的时候，如今不少前端工程师不仅限于开发网站或者APP界面，而是涉及到一些比较高的技术，在此，我们将介绍一个前端技术的实践——使用 Deno 配合图像处理库进行图像处理。

什么是 Deno？

Deno 是一个完全以 Rust 构建的运行时，兼顾安全性与可维护性，使得我们可以非常方便地使用 JavaScript 和 TypeScript 进行命令行工具和服务端的开发。

Deno 的目标是提供一个更好的 TypeScript 开发体验。

安装 Deno

Deno 官方提供了多种安装方式，可以去官网查看，本篇文章将采用简单的方式进行安装。

安装脚本

在 MacOS 和 Linux 中您可以使用 Shell 一键安装：

curl -fsSL https://deno.land/x/install/install.sh | sh

在 Windows 下可以使用 PowerShell 一键安装：

iwr https://deno.land/x/install/install.ps1 -useb | iex

用自己的方式安装

Deno 也支持用多种方式进行安装，可以根据您的使用习惯进行安装选择：

brew install deno          // Homebrew
choco install deno         // Chocolatey
scoop install deno         // Scoop
sh <(curl -fsSL https://deno.land/x/install/install.sh)          // Shell
iwr https://deno.land/x/install/install.ps1 -useb | iex         // PowerShell

安装图像处理库

在使用 Deno 进行图像处理之前，首先需要安装一个图像处理库，本文采用的是 sharp，其提供了几乎所有的图像处理场景满足我们的需求。

sharp 只依赖 libvips 库，并且兼容 macOS，Linux 和 Windows 操作系统，安装也十分简单：

npm install sharp

图片大小

在 Web 开发中，图片的体积往往是一个重要的瓶颈性能问题。所以对图片进行处理往往是必要的。

在 Deno 的 sharp 库中，通过缩放可以控制图片的体积大小。

示例代码：

import sharp from "sharp";

sharp("input.jpg").resize(640, 480).toFile("output.jpg");

上面代码将会将 input.jpg 缩放为 640x480，生成 output.jpg。

图片裁剪

在 Web 开发中，不仅仅是缩放图片，更多的时候需要对图片进行裁剪。

在 Deno 的 sharp 中，我们可以通过 crop 方法进行图片的裁剪。

示例代码：

import sharp from "sharp";

sharp("input.jpg").resize(640, 480).crop(sharp.strategy.entropy).toFile("output.jpg");

上面的代码将会将 input.jpg 裁剪成 640x480，生成 output.jpg。

图片旋转与翻转

在处理图片时，需要对图片进行旋转或者翻转。

在 Deno 的 sharp 中，我们可以通过 rotate 和 flip 方法进行图片的旋转或翻转。

示例代码：

import sharp from "sharp";

sharp("input.jpg").rotate(90).flip().toFile("output.jpg");

上述代码将会将 input.jpg 旋转 90 度并且翻转，生成 output.jpg。

色彩调整

在 Deno 的 sharp 中，提供了多种调整色彩的方法，如亮度、对比度、饱和度等。

示例代码：

import sharp from "sharp";

sharp("input.jpg")
  .brightness(10)
  .contrast(60)
  .saturation(50)
  .toFile("output.jpg");

上述代码将会将 input.jpg 亮度增加 10，对比度增加 60，饱和度增加 50，生成 output.jpg。

结语

在此，我们使用 Deno 配合 sharp 库实现了图像处理并获得了更好的开发体验和性能。尝试使用 Deno 吧，让我们更加轻松地编写出更好的代码。

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