Node.js: ImageMagick के बिना आकार बदलने वाली छवि

Question 1

मैं Node.js (+ एक्सप्रेस 4) पर एक वेब ऐप विकसित कर रहा हूं, जहां उपयोगकर्ता सर्वर पर अपलोड करके अपनी प्रोफ़ाइल छवि सेट कर सकते हैं। हम पहले से ही फ़ाइल mimetype और अधिकतम फ़ाइलों को सीमित करते हैं, इसलिए उपयोगकर्ता 200KB पीएनजी या जेपीईजी छवियों को अपलोड नहीं कर सकता है।

समस्या यह है कि हम पृष्ठ पर लोडिंग और बचत स्थान को सुधारने के लिए 200x200 पर अपलोड की गई छवि रिज़ॉल्यूशन (सर्वरसाइड) को आकार बदलना चाहेंगे। कुछ शोधों के बाद, सभी उत्तरों ने ImageMagick या GraphicsMagick के आधार पर किसी भी मॉड्यूल का उपयोग करने के लिए कहा।

हालाँकि, एक साधारण छवि का आकार बदलने के लिए ImageMagick / GraphicsMagick स्थापित करने के लिए मेरे लिए बहुत अधिक लगता है, इसलिए, क्या Node.js के अलावा कोई अन्य समाधान है?

संपादित करें: मैंने स्वीकार किए गए समाधान को तेज करने के लिए बदल दिया है क्योंकि पिछले समाधान (lwip) को अब बनाए नहीं रखा गया है। अपने सभी फ़ीडबैक के लिए शुक्रिया!

Question 2

मैं तेज वोट करूंगा :

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 तेज है , और बहुत कम मेमोरी में चलता है, शायद 10x कम । libvips छवि लाइब्रेरी के लिए सीधे लिंक , कोई बाहरी प्रोग्राम करने के लिए कोई शेलिंग नहीं है, और लाइब्रेरी स्वयं इस कार्य में * magick की तुलना में अधिक तेज़ और अधिक कुशल है। यह धारा, बफर और फाइलसिस्टम इनपुट और आउटपुट, रंग प्रबंधन, पारदर्शिता, वादे, ओवरले, वेबपी, एसवीजी, और अधिक जैसी उपयोगी चीजों का समर्थन करता है।

तेज 0.20 के रूप में, एनपीएम स्वचालित रूप से अधिकांश प्लेटफार्मों पर पूर्ण-संकलित बायनेरिज़ को डाउनलोड करेगा, इसलिए नोड-जिप की कोई आवश्यकता नहीं है। बस दर्ज करें:

npm install sharp

या:

yarn add sharp

और तुम जाओ।

Question 3

मैंने हाल ही में 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 रेपो में अधिक जानकारी ।

Question 4

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.
    });

});

मैंने इसे अपने फ़ाइल अपलोडर में सफलतापूर्वक लागू किया है और यह एक आकर्षण की तरह काम करता है।

Question 5

एक अच्छी छवि हेरफेर लाइब्रेरी है जो पूरी तरह से जावास्क्रिप्ट में लिखी जाती है, बिना किसी अन्य लाइब्रेरी, जिम्प पर निर्भरता के। 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
});

Question 6

तेज ने हाल ही में कुछ लोकप्रियता का आनंद लिया है, लेकिन यह * मैजिक बाइंडिंग * के समान है।

हालाँकि, एक साधारण छवि का आकार बदलने के लिए ImageMagick / GraphicsMagick स्थापित करने के लिए मेरे लिए बहुत अधिक लगता है

इमेज का आकार बदलना सरल लेकिन कुछ भी है। जेपीईजी प्रारूप विशेष रूप से जटिल है, और अलग-अलग गुणवत्ता के परिणामों के साथ ग्राफिक्स को स्केल करने के कई तरीके हैं, उनमें से कुछ आसानी से लागू होते हैं। इमेज प्रोसेसिंग लाइब्रेरी इस काम को करने के लिए मौजूद हैं, इसलिए यदि कोई अन्य कारण नहीं है कि आप उन्हें स्थापित क्यों नहीं कर सकते हैं, तो इसके लिए जाएं।

Question 7

कैनवस 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

Question 8

यदि आपको एक बड़ी छवि की आवश्यकता नहीं है, तो आप इसे अपलोड करने से पहले ग्राहक की ओर से इसका आकार बदल सकते हैं:

फ़ाइल एपीआई का उपयोग करके जावास्क्रिप्ट में फाइल पढ़ना

सर्वर पर अपलोड करने से पहले जावास्क्रिप्ट के साथ क्लाइंट-आकार का चित्र

कई उपयोगकर्ताओं के पास स्मार्टफोन से खुद की एक अच्छी तस्वीर हो सकती है, और उनमें से कई 200kB से अधिक हैं। ध्यान दें कि क्लाइंट-प्रदत्त डेटा पर भरोसा नहीं करना है, इसलिए सर्वर-साइड चेक अभी भी लागू होते हैं।

Question 9

मैं lwip का उपयोग कर रहा था (जैसा कि पहले arvind द्वारा सुझाया गया था) लेकिन png- फसल पर स्विच किया गया । यह मेरे लिए थोड़ा तेज़ काम करता है (विन 8.1 x64, नोड v0.12.7)। रेपो में कोड अविश्वसनीय रूप से हल्का दिखता है, और संचालन के लिए यह सरल है।

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

बेशक, यह केवल png फाइलें ही करेगा ...

Question 10

तीव्र काम बहुत अच्छी तरह से और धाराओं के साथ उपयोग करना आसान है, एक आकर्षण की तरह काम करते हैं, लेकिन आपको इसे नोड संस्करण के साथ संकलित करने की आवश्यकता है, यह इसके लिए एक नकारात्मक पहलू है। मैं छवि प्रसंस्करण के लिए तीव्र का उपयोग कर रहा था, एडब्ल्यूएस एस 3 बाल्टी से एक छवि के साथ और पूरी तरह से काम किया, लेकिन मुझे दूसरे मॉड्यूल का उपयोग करना पड़ा। जीएम ने मेरे लिए काम नहीं किया, लेकिन जिम्प ने बहुत अच्छा काम किया!

आपको लिखित चित्र के पथ पर ध्यान देना होगा, यदि आप पथ को "/" से शुरू करते हैं तो यह आपको कुछ त्रुटियां दे सकता है।

इस तरह से मैंने नोडज में जिम्प का उपयोग किया:

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() } }

            });

निष्पादन के आदेश के लिए भी देखें, कॉलबैक रखें ताकि जब आप नहीं चाहते हैं तो अन्य चीजें न हों। Jimp.read () के लिए "प्रतीक्षा" का उपयोग करने की कोशिश की, लेकिन यह अच्छी तरह से काम नहीं किया।

Question 11

आप इसे जिम्प (नोड_मॉड्यूल) का उपयोग करके कर सकते हैं

स्थानीय लिखें:

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);
          });

Question 12

मैं अपनी सादगी के लिए आकार बदलने के लिए पुस्तकालय की तरह है ।

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);
})();

Question 13

Google डिस्क API v3 का उपयोग करके कार्यान्वित छवि का आकार बदल जाता है । Google Apps स्क्रिप्ट में Google पत्रक में चित्र सम्मिलित करने के लिए इस विधि की अनुशंसा की जाती है।

algorythm:

Google ड्राइव फ़ोल्डर में छवि अपलोड करें ।
छवि थंबनेल सार्वजनिक URL प्राप्त करें।
आवश्यक चौड़ाई और / या ऊंचाई वाले URL में 'आकार बदलें' पैरामीटर बदलें। (डिफ़ॉल्ट थंबनेल आकार 220px है)।
Google ड्राइव से डाउनलोड किए गए थंबनेल डाउनलोड करें।

यहां देखें उदाहरण: https://github.com/dobromyslov/google-drive-utils/blob/511c44c2c48862b47c60038423b7f71bf1d28f49/rc/index.ts#L150

और GDrive कोटा से सावधान रहें:

प्रति दिन प्रश्न: 1000000000
उपयोगकर्ता प्रति 100 सेकंड में प्रश्न: 1000
प्रति सेकंड 100 प्रश्न: 10000