Node.js-ում պատկերների սեղմում Sharp-ով

Ձեր կայքի կամ ձեր հավելվածի համար պատկերների սեղմումը կարող է արմատապես բարելավել կատարողականությունը: Sharp-ը կատարում է ծանրաբեռնվածություն:

Անտեղի մեծ պատկերները կարող են հանգեցնել ավելի դանդաղ արձագանքման ժամանակի, սպառել չափազանց մեծ թողունակություն և ապահովել դանդաղ փորձ օգտատերերի համար, հատկապես նրանց, ովքեր ավելի դանդաղ կապեր ունեն: Սա կարող է հանգեցնել ավելի բարձր վերադարձի կամ ավելի քիչ փոխակերպումների:

Պատկերների սեղմումը նախքան դրանք վերբեռնելը կարող է մեղմել այս խնդիրները և ապահովել ավելի լավ օգտվողի փորձ: Sharp մոդուլը այս գործընթացը դարձնում է արագ և հեշտ:

Ստեղծեք ձեր զարգացման միջավայրը

Պատկերների սեղմման գործընթացը ցուցադրելու համար սկսեք ստեղծել պատկերների վերբեռնման ծառայություն՝ օգտագործելով multer: Դուք կարող եք արագացնել գործընթացը՝ կլոնավորելով այս GitHub պահոցը:

GitHub պահեստը կլոնավորելուց հետո գործարկեք այս հրամանը՝ պատկերների վերբեռնման ծառայության կախվածությունները տեղադրելու համար.

npm install

Հաջորդը, տեղադրեք Sharp-ը՝ գործարկելով այս հրամանը.

npm install sharp

Sharp մոդուլը բարձր արդյունավետությամբ Node.js գրադարան է պատկերների մշակման և մանիպուլյացիայի համար: Դուք կարող եք օգտագործել Sharp-ը` չափափոխելու, կտրելու, պտտելու և տարբեր այլ գործողություններ պատկերների վրա արդյունավետ կերպով կատարելու համար: Sharp-ն ունի նաև հիանալի աջակցություն պատկերների սեղմման համար:

Կոմպրեսիոն տեխնիկա տարբեր պատկերների ձևաչափերի համար

Պատկերի տարբեր ձևաչափերն ունեն սեղմման հստակ տեխնիկա: Դա պայմանավորված է նրանով, որ նրանցից յուրաքանչյուրը բավարարում է որոշակի կիրառություններ և պահանջներ, և նրանք առաջնահերթություն են տալիս տարբեր գործոնների, ներառյալ որակը, ֆայլի չափը և այնպիսի հատկություններ, ինչպիսիք են թափանցիկությունը և անիմացիաները:

JPG/JPEG

JPEG-ը պատկերի սեղմման ստանդարտ է, որը մշակվել է Joint Photographic Experts Group-ի կողմից՝ լուսանկարներն ու իրատեսական պատկերները շարունակական երանգներով և գունային գրադիենտներով սեղմելու համար: Այն օգտագործում է կորստի սեղմման ալգորիթմ՝ ստեղծելով ավելի փոքր ֆայլեր՝ հեռացնելով պատկերի որոշ տվյալներ:

Sharp-ով JPEG պատկերը սեղմելու համար ներմուծեք Sharp մոդուլը և փոխանցեք filePath-ը կամ պատկերի բուֆերը որպես փաստարկ: Հաջորդը, զանգահարեք .jpeg մեթոդը Sharp օրինակում: Այնուհետև փոխանցեք կազմաձևման օբյեկտ quality հատկությամբ, որը որպես արժեք վերցնում է 0-ի և 100-ի միջև ընկած թիվը: Որտեղ 0 վերադարձնում է ամենափոքր սեղմումը ամենացածր որակով, իսկ 100 վերադարձնում է ամենամեծ սեղմումը ամենաբարձր որակով:

Դուք կարող եք սահմանել արժեքը՝ կախված ձեր կարիքներից: Սեղմման լավագույն արդյունքների համար պահեք արժեքը 50-80միջակայքում՝ չափի և որակի միջև հավասարակշռություն պահպանելու համար:

Ավարտեք՝ սեղմված պատկերը պահելով ֆայլային համակարգում՝ օգտագործելով .toFile մեթոդը: Անցեք այն ֆայլի ուղին, որին ցանկանում եք գրել որպես փաստարկ:

Օրինակ:

await sharp(req.file.path)
        .jpeg({ quality: 60 })
        .toFile(`./images/compressed-${req.file.filename}`)
        .then(() => {
          console.log(`Compressed ${req.file.filename} successfully`);
        });

որակի կանխադրված արժեքը 80 է:

PNG

PNG (Portable Network Graphics) պատկերի ֆայլի ձևաչափ է, որը հայտնի է իր անկորուստ սեղմումով և թափանցիկ ֆոնի աջակցությամբ:

Sharp-ով PNG պատկերը սեղմելը նման է Sharp-ով JPEG պատկերի սեղմմանը: Այնուամենայնիվ, կան երկու փոփոխություն, որոնք դուք պետք է կատարեք, երբ պատկերը PNG ձևաչափով է:

1. Sharp-ը մշակում է PNG պատկերները՝ օգտագործելով .png մեթոդը՝ .jpeg մեթոդի փոխարեն:
2. .png մեթոդը օգտագործում է compressionLevel, որը 0-ի և 9-ի միջև որակի < փոխարեն թիվ է: իր կոնֆիգուրացիայի օբյեկտում: 0 տալիս է հնարավոր ամենաարագ և ամենամեծ սեղմումը, մինչդեռ 9-ը տալիս է հնարավոր ամենադանդաղ և ամենափոքր սեղմումը:

Օրինակ:

await sharp(req.file.path)
        .png({
          compressionLevel: 5,
        })
        .toFile(`./images/compressed-${req.file.filename}`)
        .then(() => {
          console.log(`Compressed ${req.file.filename} successfully`);
        });

compressionLevel-ի կանխադրված արժեքը 6 է:

Այլ ձևաչափեր

Sharps-ն աջակցում է սեղմումը տարբեր այլ պատկերների ձևաչափերում, որոնք ներառում են.

• WebP. Sharp-ով WebP պատկերի սեղմումը կատարվում է նույն գործընթացով, ինչ JPG-ն: Միակ տարբերությունն այն է, որ Sharp օրինակում .jpeg մեթոդի փոխարեն պետք է կանչեք webp մեթոդը:
• TIFF. TIFF (Tag Image File Format) պատկերի սեղմումը Sharp-ով կատարվում է նույն գործընթացը, ինչ JPG-ն: Միակ տարբերությունն այն է, որ Sharp օրինակում .jpeg մեթոդի փոխարեն պետք է կանչեք tiff մեթոդը:
• AVIF. AVIF (AV1 Image File Format) պատկերի սեղմումը Sharp-ով կատարվում է նույն գործընթացը, ինչ JPG-ն: Միակ տարբերությունն այն է, որ Sharp օրինակում .jpeg մեթոդի փոխարեն պետք է կանչեք avif մեթոդը: AVIF-ի լռելյայն արժեքը որակի համար 50 է:
• HEIF. HEIF (High Efficiency Image File Format) պատկերի սեղմումը Sharp-ով կատարվում է նույն գործընթացը, ինչ JPG-ն: Միակ տարբերությունն այն է, որ Sharp օրինակում .jpeg մեթոդի փոխարեն պետք է կանչեք heif մեթոդը: AVIF-ի լռելյայն արժեքը որակի համար 50 է:

Պատկերների սեղմում Sharp-ով

Եթե դուք կլոնավորել եք GitHub պահոցը, բացեք ձեր app.js ֆայլը և ավելացրեք հետևյալ ներմուծումները:

const sharp = require("sharp");
const { exec } = require("child_process");

exec-ը գործառույթ է, որը տրամադրվում է child_process մոդուլի կողմից, որը թույլ է տալիս ձեր Node.js հավելվածից կատարել կեղևի հրամաններ կամ արտաքին գործընթացներ:

Դուք կարող եք օգտագործել այս գործառույթը հրաման գործարկելու համար, որը համեմատում է ֆայլի չափերը սեղմումից առաջ և հետո:

Հաջորդը, փոխարինեք POST «/single» մշակիչը ստորև բերված կոդի բլոկով.

app.post("/upload-and-compress", upload.single("image"), async (req, res) => {
  try {
    if (!req.file) {
      return res.status(404).send("Please upload a valid image");
    }
    const compressedFileName = req.file.filename.split(".")[0];
    const compressedImageFilePath = `./images/${compressedFileName}-compressed.png`;
    await sharp(req.file.path)
      .jpeg({ quality: 50 })
      .toFile(compressedImageFilePath)
      .then(() => {
        let sizeBeforeCompression, sizeAfterCompression;
        const sizeBeforeCompressionCommand = `du -h ${req.file.path}`;
        const sizeAfterCompressionCommand = `du -h ${compressedImageFilePath}`;
        exec(sizeBeforeCompressionCommand, (err, stdout, stderr) => {
          sizeBeforeCompression = stdout.split("\\t")[0];
          exec(sizeAfterCompressionCommand, (err, stdout, stderr) => {
            sizeAfterCompression = stdout.split("\\t")[0];
            res.send({
              message: "Image uploaded and compressed successfully",
              sizeBeforeCompression,
              sizeAfterCompression,
            });
          });
        });
      });
  } catch (error) {
    console.log(error);
  }
});

Վերևում գտնվող կոդի բլոկն իրականացնում է JPEG պատկերները սեղմելու տեխնիկան և համեմատում է չափերը du հրամանն օգտագործելուց առաջ և հետո:

du հրամանը Unix կոմունալ ծրագիր է, որը նշանակում է «սկավառակի օգտագործում»: Այն գնահատում է ֆայլի տարածքի օգտագործումը և վերլուծում սկավառակի օգտագործումը գրացուցակում կամ դիրեկտորիաների մի շարքում: Երբ դուք գործարկում եք du հրամանը -h դրոշակով, այն ցուցադրում է յուրաքանչյուր ենթագրքի օգտագործած ֆայլի տարածությունը և դրա բովանդակությունը մարդու համար ընթեռնելի տեսքով:

Գործարկեք ձեր վերբեռնման ծառայությունը՝ գործարկելով այս հրամանը.

node app.js

Այնուհետև փորձարկեք ձեր հավելվածը՝ ուղարկելով JPG պատկեր դեպի localhost:/upload-and-compress երթուղին՝ օգտագործելով Postman հաճախորդի հավելվածը կամ որևէ այլ API-ի փորձարկման գործիք:

Դուք պետք է տեսնեք այսպիսի պատասխան.

{
  "message": "Image uploaded and compressed successfully",
  "sizeBeforeCompression": "13M",
  "sizeAfterCompression": "3.1M"
}

Sharp մոդուլի այլ կիրառումներ

Բացի պատկերները սեղմելուց, սուր մոդուլը կարող է նաև չափափոխել, կտրել, պտտել և շրջել պատկերները ըստ ցանկալի բնութագրերի: Այն նաև աջակցում է գունային տարածության ճշգրտմանը, ալֆա ալիքի գործողություններին և ձևաչափի փոխարկումներին: