Node.js: การปรับขนาดรูปภาพโดยไม่มี ImageMagick

ฉันกำลังพัฒนาเว็บแอปบน Node.js (+ express 4) ซึ่งผู้ใช้สามารถตั้งค่ารูปโปรไฟล์ได้โดยการอัปโหลดไปยังเซิร์ฟเวอร์ เรา จำกัด ประเภทไฟล์และขนาดไฟล์สูงสุดไว้แล้วดังนั้นผู้ใช้จึงไม่สามารถอัปโหลดภาพ png หรือ jpeg เกิน 200KB ได้

ปัญหาคือเราต้องการปรับขนาด (ด้านเซิร์ฟเวอร์) ความละเอียดของภาพที่อัปโหลดเป็น 200x200 เพื่อปรับปรุงการโหลดหน้าเว็บและประหยัดเนื้อที่บนดิสก์ หลังจากการวิจัยบางส่วนคำตอบทั้งหมดชี้ไปที่การใช้โมดูลใด ๆ ที่ใช้ ImageMagick หรือ GraphicsMagick

อย่างไรก็ตามการต้องติดตั้ง ImageMagick / GraphicsMagick เพื่อทำการปรับขนาดภาพอย่างง่ายดูเหมือนจะมากเกินไปสำหรับฉันดังนั้นมีวิธีอื่นนอกเหนือจากนี้สำหรับ Node.js หรือไม่

แก้ไข:ฉันได้เปลี่ยนวิธีการแก้ปัญหาที่ยอมรับเป็นความคมชัดเนื่องจากโซลูชันก่อนหน้า (lwip) ไม่ได้รับการดูแลอีกต่อไป ขอบคุณสำหรับความคิดเห็นของคุณ!

ฉันจะโหวตให้คม :

sharp('input.jpg')
  .resize(200, 200)
  .toFile('ouput.jpg', function(err) {
    // output.jpg is a 200 pixels wide and 200 pixels high image
    // containing a scaled and cropped version of input.jpg
  });

มันรวดเร็วมักจะ 6x เร็วกว่าที่เร็วที่สุด ImageMagick ตามผูกโหนดและวิ่งในหน่วยความจำน้อยมากอาจจะถึง 10 เท่าน้อย ลิงก์ที่คมชัดไปยังไลบรารีรูปภาพlibvipsโดยตรงไม่มีการแยกส่วนออกไปยังโปรแกรมภายนอกและไลบรารีนั้นเร็วและมีประสิทธิภาพมากกว่า * magick ในงานนี้ สนับสนุนสิ่งที่มีประโยชน์เช่นสตรีมบัฟเฟอร์และอินพุตและเอาต์พุตระบบไฟล์การจัดการสีความโปร่งใสสัญญาการวางซ้อน WebP SVG และอื่น ๆ

เมื่อคมชัด 0.20 npm จะดาวน์โหลดไบนารีที่คอมไพล์ไว้ล่วงหน้าโดยอัตโนมัติบนแพลตฟอร์มส่วนใหญ่ดังนั้นจึงไม่จำเป็นต้องใช้ node-gyp เพียงป้อน:

npm install sharp

หรือ:

yarn add sharp

และจากคุณไป

ฉันเพิ่งเริ่มพัฒนาโมดูลการประมวลผลภาพสำหรับ NodeJS โดยไม่ต้องพึ่งพารันไทม์ ( อ่านเหตุผล ) ยังอยู่ในช่วงเริ่มต้น แต่ใช้งานได้แล้ว

สิ่งที่คุณขอจะทำดังนี้:

image.resize(200, 200, function(err, image){
    // encode resized image to jpeg and get a Buffer object
    image.toBuffer('jpg', function(err, buffer){
        // save buffer to disk / send over network / etc.
    });
});

ข้อมูลเพิ่มเติมได้ที่โมดูลGithub repo

ดู lwip: https://github.com/EyalAr/lwip

ง่ายมากและใช้งานง่าย

npm install lwip

จากนั้นในโค้ดโหนดของคุณ

// obtain an image object:
require('lwip').open('image.jpg', function(err, image){

  // check err...
  // define a batch of manipulations and save to disk as JPEG:
  image.batch()
    .scale(0.75)          // scale to 75%
    .rotate(45, 'white')  // rotate 45degs clockwise (white fill)
    .crop(200)            // crop a 200X200 square from center
    .blur(5)              // Gaussian blur with SD=5
    .writeFile('output.jpg', function(err){
      // check err...
      // done.
    });

});

ฉันติดตั้งสิ่งนี้สำเร็จแล้วในโปรแกรมอัปโหลดไฟล์ของฉันและมันใช้งานได้ดี

มีไลบรารีการปรับแต่งรูปภาพที่ดีที่เขียนด้วย JavaScript ทั้งหมดโดยไม่ต้องพึ่งพาไลบรารีอื่น ๆ Jimp https://github.com/oliver-moran/jimp

ตัวอย่างการใช้งาน:

var Jimp = require("jimp");

// open a file called "lenna.png"
Jimp.read("lenna.png", function (err, lenna) {
    if (err) throw err;
    lenna.resize(256, 256)            // resize
         .quality(60)                 // set JPEG quality
         .write("lena-small.jpg"); // save
});

Sharpได้รับความนิยมเมื่อเร็ว ๆ นี้ แต่ก็เป็นแนวคิดเดียวกับ * Magick bindings

อย่างไรก็ตามการต้องติดตั้ง ImageMagick / GraphicsMagick เพื่อทำการปรับขนาดภาพอย่างง่ายดูเหมือนจะมากเกินไปสำหรับฉัน

การปรับขนาดภาพเป็นเรื่องง่าย รูปแบบ JPEG มีความซับซ้อนเป็นพิเศษและมีหลายวิธีในการปรับขนาดกราฟิกด้วยผลลัพธ์ที่มีคุณภาพที่แตกต่างกันซึ่งมีเพียงไม่กี่วิธีที่สามารถนำไปใช้งานได้อย่างง่ายดาย ไลบรารีการประมวลผลภาพมีไว้เพื่อทำงานนี้ดังนั้นหากไม่มีเหตุผลอื่นที่คุณไม่สามารถติดตั้งได้ให้ไปหามัน

Canvas เร็วกว่า ImageMagic 2.3 เท่า

คุณสามารถลองเปรียบเทียบโมดูล Node.js สำหรับการปรับแต่งรูปภาพ - https://github.com/ivanoff/images-manipulation-performance

author's results:
 sharp.js : 9.501 img/sec; minFreeMem: 929Mb
 canvas.js : 8.246 img/sec; minFreeMem: 578Mb
 gm.js : 4.433 img/sec; minFreeMem: 791Mb
 gm-imagemagic.js : 3.654 img/sec; minFreeMem: 804Mb
 lwip.js : 1.203 img/sec; minFreeMem: 54Mb
 jimp.js : 0.445 img/sec; minFreeMem: 82Mb

หากคุณไม่ต้องการภาพขนาดใหญ่คุณสามารถปรับขนาดได้ที่ฝั่งไคลเอ็นต์ก่อนที่จะอัปโหลด:

การอ่านไฟล์ใน JavaScript โดยใช้ File API

การปรับขนาดภาพฝั่งไคลเอ็นต์ด้วยจาวาสคริปต์ก่อนอัปโหลดไปยังเซิร์ฟเวอร์

ผู้ใช้หลายคนอาจมีภาพที่ดีของตัวเองจากสมาร์ทโฟนและหลายคนมีขนาดเกิน 200kB โปรดทราบว่าข้อมูลที่ไคลเอ็นต์ให้มาไม่น่าเชื่อถือดังนั้นการตรวจสอบฝั่งเซิร์ฟเวอร์จึงยังใช้

ผมใช้ lwip (แนะนำให้เป็นก่อนหน้านี้โดย Arvind) แต่เปลี่ยนPNG พืช ดูเหมือนว่าจะทำงานได้เร็วขึ้นเล็กน้อยสำหรับฉัน (Win 8.1 x64, Node v0.12.7) โค้ดใน repo ดูมีน้ำหนักเบาอย่างไม่น่าเชื่อและใช้งานง่าย

var pngcrop = require('png-crop');
var config = {left: 10, top: 100, height: 150, width: 150};
pngcrop.crop('cats.png','cats-cropped.png',config);

แน่นอนมันจะทำได้แค่ไฟล์ png ...

งานที่คมชัดเป็นอย่างดีและใช้งานง่ายกับสตรีมทำงานได้อย่างมีเสน่ห์ แต่คุณต้องรวบรวมด้วยเวอร์ชันโหนดนี่เป็นข้อเสีย ฉันใช้ Sharp สำหรับการประมวลผลภาพด้วยภาพจากที่เก็บข้อมูล AWS S3 และทำงานได้อย่างสมบูรณ์แบบ แต่ฉันต้องใช้โมดูลอื่น GM ไม่ได้ทำงานให้ฉัน แต่ Jimp ทำงานได้ดีมาก!

คุณต้องให้ความสนใจกับเส้นทางของภาพที่เขียนมันอาจทำให้คุณมีข้อผิดพลาดบางอย่างหากคุณเริ่มต้นเส้นทางด้วย "/"

นี่คือวิธีที่ฉันใช้ Jimp ใน nodeJS:

const imageUrl = `SOME_URL`;
let imgExported = 'EXPORTED_PIC.png';

Jimp.read(imageUrl)
    .then(image => {
        image   
            .resize(X, Y) 
            .write(`tmp/`+ imgExported, err => { 
                if(err) 
                    console.error('Write error: ', err);
                else { ... // don't forget to put a callback() } }

            });

ระวังคำสั่งของการดำเนินการโทรกลับเพื่อไม่ให้สิ่งอื่นเกิดขึ้นเมื่อคุณไม่ต้องการ พยายามใช้ "await" สำหรับ Jimp.read () แต่มันทำงานได้ไม่ดี

คุณสามารถทำได้โดยใช้ jimp (node_module)

การเขียนในท้องถิ่น:

Jimp.read(path) // this can be url or local location
      .then(image=> {
          image
            .resize(size, Jimp.AUTO) // jimp.AUTO automatically sets the width so that the image doesnot looks odd
            .write('path-to-save');
      })
      .catch(err => {
        console.log(err);
      });

เพื่ออัปโหลดไปยัง s3 หรือที่ใดก็ตามที่คุณต้องการ

Jimp.read(urls) // this can be url or local location
          .then(image=> {
              image
                .resize(size, Jimp.AUTO) // jimp.AUTO automatically sets the width so that the image doesnot looks odd
                .getBase64(Jimp.AUTO, (err, res) => {
                  const buf = new Buffer(
                    res.replace(/^data:image\/\w+;base64,/, ""),
                    "base64"
                  );
                  var data = {
                    Key: key,
                    Bucket: bucket,
                    Body: body,
                    ContentEncoding: "base64",
                    ContentType: "image/jpeg"
                  };
                  s3.putObject(data, function(err, data) {
                    if (err) {
                      throw err;
                    } else {
                      console.log("succesfully uploaded the image!");
                    }
                  });
                });
          })
          .catch(err => {
            console.log(err);
          });

ฉันชอบไลบรารีresize-imgสำหรับความเรียบง่าย

const fs = require('fs');
const resizeImg = require('resize-img');

(async () => {
    const image = fs.readFileSync('unicorn.png');

    const newImage = await resizeImg(image, { width: 128, height: 128 });

    fs.writeFileSync('unicorn-128x128.png', newImage);
})();

ปรับขนาดรูปภาพที่ใช้งานโดยใช้Google Drive API v3v3 แนะนำให้ใช้วิธีนี้สำหรับ Google Apps Script เพื่อแทรกรูปภาพลงใน Google ชีต

อัลกอริทึม:

1. ที่อัพโหลดภาพไปยังโฟลเดอร์ Google Drive
2. รับ URL สาธารณะของภาพขนาดย่อ
3. แทนที่พารามิเตอร์ 'resize' ใน URL ด้วยความกว้างและ / หรือความสูงที่จำเป็น (ขนาดภาพย่อเริ่มต้นคือ 220px)
4. ดาวน์โหลดภาพขนาดย่อที่ปรับขนาดจาก Google Drive

ดูตัวอย่างที่นี่: https://github.com/dobromyslov/google-drive-utils/blob/511c44c2c48862b47c60038423b7f71bf1d28f49/src/index.ts#L150

และระวังโควต้า GDrive:

• คำค้นหาต่อวัน: 1000000000
• คำค้นหาต่อ 100 วินาทีต่อผู้ใช้: 1,000
• คำค้นหาต่อ 100 วินาที: 10,000