javascript - Can I use Sharp image processing library in React js? - Stack Overflow

admin管理员组

文章数量:1247288

I tried to use Sharp image processing in my create react app. But it sends an error

This is my code:

import sharp from 'sharp';

const buffer = await sharp(req.file.buffer)
          .resize({ width: 250, height: 250 })
          .extend({
            top: 10,
            bottom: 10,
            left: 10,
            right: 10,
            background:  '#d7d8de'
          })
          .png()

Edit: I’m using Node.js version 12.18.0

I tried to use Sharp image processing in my create react app. But it sends an error

This is my code:

import sharp from 'sharp';

const buffer = await sharp(req.file.buffer)
          .resize({ width: 250, height: 250 })
          .extend({
            top: 10,
            bottom: 10,
            left: 10,
            right: 10,
            background:  '#d7d8de'
          })
          .png()

Edit: I’m using Node.js version 12.18.0

• javascript
• node.js
• reactjs
• image
• sharp

Share Improve this question Follow edited Apr 4, 2023 at 9:06 ChimdumebiNebolisa 31322 silver badges1111 bronze badges asked Nov 2, 2021 at 16:12 RupamRupam 11511 gold badge22 silver badges1010 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

No.

Sharp uses the node.js runtime as well as binary executable code that is installed on the host system. All this means that Sharp does not work in a web browser.

I see that somebody already provided a good answer, but more alternatives can't hurt

For the simple task of resizing an image that I had to do in a service worker for a Chrome V3 extension, after many tries with canvases I found that image-js easily did the trick.

Here is a snippet for what I did:

import { Image } from 'image-js';

export const downsizeImage = async (
    imageBase64: string
): Promise<string> => {
  const blob = await fetch(imageBase64).then(r => r.blob());
  const buffer = await blob.arrayBuffer();

  const image = await Image.load(buffer);

  const resizedImage = image.resize({ width: 200, height: 200 });

  const imgBuffer = resizedImage.toBuffer();

  // convert to base64
  return Buffer.from(imgBuffer)
      .toString('base64');
}

本文标签： javascriptCan I use Sharp image processing library in React jsStack Overflow