# SharpStudy

**Repository Path**: y206/sharp-study

## Basic Information

- **Project Name**: SharpStudy
- **Description**: Sharp库学习
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-05-10
- **Last Updated**: 2024-05-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Sharp 库学习

## 小结

sharp 是一个基于 promise 的图像处理模块。

## 介绍

Sharp 库学习。sharp 是一个基于 promise 的图像处理模块。当创建一个 sharp 的实例时，它会返回一个 promise。可以使用 then 方法或使用具有更清晰语法的 async/await 来解析。

### 安装

```sh
npm init -y
npm i sharp
```

## 实例学习

### 1. 创建空白透明底图

通过调用 sharp() 来创建图像

```js
const sharp = require("sharp");

sharp({
  create: {
    width: 300,
    height: 200,
    channels: 4,
    background: { r: 0, g: 0, b: 0, alpha: 0 },
  },
})
  .png()
  .toFile("./output/0output.png")
  .then(() => {
    console.log("图片已成功生成");
  })
  .catch((err) => {
    console.error("生成图片时出错：", err);
  });
```

### 2. 读取图像

通过调用 sharp() 来读取图像，该函数将图像路径作为参数

```js
const sharp = require("sharp");

async function getMetadata() {
  const img = sharp("sammy.webp");
  const metadata = await img.metadata();
  console.log(metadata);
}
```

### 3. 调整大小、更改图像格式和压缩图像

#### 调整大小 resize()

```js
const sharp = require("sharp");

async function resizeImage() {
  try {
    await sharp("sammy.png")
      .resize({
        width: 150,
        height: 97,
      })
      .toFile("sammy-resized.png");
  } catch (error) {
    console.log(error);
  }
}

resizeImage();
```

#### 更改图像格式和压缩图像 toFormat()

`toFormat()`方法的第一个参数是一个字符串，其中包含要将图像转换为的图像格式。第二个参数是一个可选对象，包含增强和压缩图像的输出选项。

```js
const sharp = require("sharp");

async function resizeImage() {
  try {
    await sharp("sammy.png")
      .resize({
        width: 150,
        height: 97,
      })
      .toFormat("jpeg", { mozjpeg: true })
      .toFile("sammy-resized-compressed.jpeg");
  } catch (error) {
    console.log(error);
  }
}

resizeImage();
```

### 4. 裁剪图像并将其转换为灰度

#### 裁剪图像 `extract`

```js
const sharp = require("sharp");

async function cropImage() {
  try {
    await sharp("sammy.webp")
      .extract({ width: 500, height: 330, left: 120, top: 70 })
      .toFile("./output/sammy-cropped.png");
  } catch (error) {
    console.log(error);
  }
}

cropImage();
```

![](assets/extract.webp)

#### 转换为灰度 `grayscale`

```js
const sharp = require("sharp");

async function cropImage() {
  try {
    await sharp("sammy.webp")
      .extract({ width: 500, height: 330, left: 120, top: 70 })
      .grayscale()
      .toFile("./output/sammy-cropped-grayscale.png");
  } catch (error) {
    console.log(error);
  }
}

cropImage();
```

### 5. 旋转和模糊图像

#### 旋转图像 rotate

```js
const sharp = require("sharp");

async function rotateImage() {
  try {
    await sharp("sammy.webp")
      .rotate(33, { background: { r: 0, g: 0, b: 0, alpha: 0 } })
      .toFile("./output/sammy-rotated.png");
  } catch (error) {
    console.log(error);
  }
}

rotateImage();
```

#### 模糊处理 blur

```js
const sharp = require("sharp");

async function rotateImage() {
  try {
    await sharp("sammy.webp")
      .rotate(33, { background: { r: 0, g: 0, b: 0, alpha: 0 } })
      .blur(4)
      .toFile("./output/sammy-rotated-blurred.png");
  } catch (error) {
    console.log(error);
  }
}

rotateImage();
```

### 6. 使用`composite`合成图像

普通合成

```js
const sharp = require("sharp");

async function compositeImages() {
  try {
    await sharp("underwater.webp")
      .composite([
        {
          input: "sammy-transparent.webp",
          top: 50,
          left: 50,
        },
      ])
      .toFile("./output/sammy-underwater.png");
  } catch (error) {
    console.log(error);
  }
}

compositeImages();
```

合成一个缩小的图

```js
const sharp = require("sharp");

async function compositeImages() {
  try {
    await sharp("underwater.webp")
      .composite([
        {
          input: await sharp("sammy-transparent.webp")
            .resize({
              width: 300,
              height: 200,
            })
            .toBuffer(),
          top: 50,
          left: 50,
        },
      ])
      .toFile("./output/sammy-underwater.png");
  } catch (error) {
    console.log(error);
  }
}

compositeImages();
```

### 7. 在图像上添加文本

创建 svg

```js
const sharp = require("sharp");

async function addTextOnImage() {
  try {
    const width = 750;
    const height = 483;
    const text = "Sammy the Shark";

    const svgImage = `
    <svg width="${width}" height="${height}">
      <style>
        .title { fill: #001; font-size: 70px; font-weight: bold;}
      </style>
      <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
    </svg>
    `;
    const svgBuffer = Buffer.from(svgImage);
    // const image = await sharp(svgBuffer).toFile("./output/svg-image.png");
    await sharp("sammy.webp")
      .composite([
        {
          input: svgBuffer,
        },
      ])
      .toFile("./output/sammy-text-overlay.png");
  } catch (error) {
    console.log(error);
  }
}

addTextOnImage();
```