নোড.জেএস: ইমেজম্যাগিক ছাড়াই চিত্রের আকার পরিবর্তন করা

Question 1

আমি নোড.জেএস (+ এক্সপ্রেস 4) এ একটি ওয়েব অ্যাপ বিকাশ করছি যেখানে ব্যবহারকারীরা তাদের প্রোফাইল চিত্রটি সার্ভারে আপলোড করে সেট করতে পারবেন। আমরা ইতিমধ্যে ফাইল মাইমটাইপ এবং সর্বাধিক ফাইলাইজিকে সীমাবদ্ধ করেছি, যাতে ব্যবহারকারী 200 কেবি পিএনজি বা জেপিগ চিত্রের বেশি আপলোড করতে পারে না।

সমস্যাটি হ'ল আমরা পৃষ্ঠাটি লোডিং এবং ডিস্কে স্থান সংরক্ষণের উন্নতি করতে আপলোড করা চিত্রের রেজোলিউশনটি 200x200 এ পুনরায় আকার দিতে (সার্ভারসাইড) করতে চাই। কিছু গবেষণার পরে, সমস্ত উত্তর ইমেজম্যাগিক বা গ্রাফিক্সম্যাগিকের উপর ভিত্তি করে কোনও মডিউল ব্যবহারের দিকে ইঙ্গিত করেছে।

তবে, একটি সাধারণ চিত্র পুনরায় আকার দেওয়ার জন্য ইমেজম্যাগিক / গ্রাফিকস ম্যাগিক ইনস্টল করা আমার পক্ষে খুব বেশি চাপের মতো বলে মনে হচ্ছে, সুতরাং, নোড.জেএস ছাড়া এটি ছাড়া আর কোনও সমাধান আছে কি?

সম্পাদনা: পূর্ববর্তী সমাধান (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 চিত্র লাইব্রেরির সরাসরি তাত্পর্যপূর্ণ লিঙ্কগুলি , কোনও বাহ্যিক প্রোগ্রামে কোনও শেলিং নেই, এবং লাইব্রেরি নিজেই এই কার্যটিতে * ম্যাজিকের চেয়ে দ্রুত এবং আরও দক্ষ। এটি স্ট্রিম, বাফার এবং ফাইল সিস্টেম ইনপুট এবং আউটপুট, রঙ পরিচালনা, স্বচ্ছতা, প্রতিশ্রুতি, ওভারলেস, ওয়েবপি, এসভিজি এবং আরও অনেকের মতো দরকারী জিনিসগুলিকে সমর্থন করে।

তীক্ষ্ণ 0.20 হিসাবে, এনপিএম বেশিরভাগ প্ল্যাটফর্মগুলিতে স্বয়ংক্রিয়ভাবে সম্পূর্ণ প্রাক-সংকলিত বাইনারিগুলি ডাউনলোড করবে, সুতরাং নোড-জিপের কোনও প্রয়োজন নেই। কেবল প্রবেশ করুন:

npm install sharp

বা:

yarn add sharp

এবং বন্ধ আপনি যান।

Question 3

আমি সম্প্রতি কোনও রানটাইম নির্ভরতা ছাড়াই নোডজেএস-এর জন্য একটি চিত্র প্রক্রিয়াকরণ মডিউল বিকাশ শুরু করেছি ( কেন পড়ুন )। এটি এখনও প্রাথমিক পর্যায়ে, তবে ইতিমধ্যে ব্যবহারযোগ্য।

আপনি যা জিজ্ঞাসা করছেন তা নিম্নলিখিত হিসাবে করা হবে:

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

মডিউলটির গিথুব রেপোতে আরও তথ্য ।

Question 4

লুইপটি দেখুন: 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

ধারালো সম্প্রতি কিছু জনপ্রিয়তা উপভোগ করেছে, তবে এটি * ম্যাগিক বাইন্ডিংয়ের মতো একই ধারণা।

তবে, একটি সাধারণ চিত্র পুনরায় আকার দেওয়ার জন্য ইমেজম্যাগিক / গ্রাফিক্স ম্যাজিক ইনস্টল করা আমার পক্ষে খুব বেশি ওভারকিল বলে মনে হচ্ছে

চিত্রের আকার পরিবর্তন করা সহজ তবে কিছু নয়। জেপিজি ফর্ম্যাটটি বিশেষত জটিল, এবং বিভিন্ন মানের ফলাফল সহ গ্রাফিক্স স্কেল করার বিভিন্ন উপায় রয়েছে, যার কয়েকটি খুব সহজেই প্রয়োগ করা হয়েছিল। এই কাজটি করার জন্য চিত্র প্রক্রিয়াকরণ গ্রন্থাগারগুলির অস্তিত্ব রয়েছে, সুতরাং আপনি এগুলি ইনস্টল করতে না পারার অন্য কোনও কারণ না থাকলে এর জন্য যান।

Question 7

ইমেজম্যাগিকের চেয়ে ক্যানভাসটি ২.৩ গুণ বেশি দ্রুত ।

আপনি ইমেজ ম্যানিপুলেশনের জন্য নোড.জেএস মডিউলগুলি তুলনা করার চেষ্টা করতে পারেন - 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

আপনার যদি কোনও বড় চিত্রের প্রয়োজন না হয় তবে আপনি এটি আপলোড করার আগে ক্লায়েন্টের পক্ষেই এটি আকার পরিবর্তন করতে পারেন:

ফাইল এপিআই ব্যবহার করে জাভাস্ক্রিপ্টে ফাইল পড়া

সার্ভারে আপলোড করার আগে জাভাস্ক্রিপ্ট সহ চিত্রের পুনরায় আকার দেওয়া ক্লায়েন্ট-সাইড

অনেক ব্যবহারকারীর কাছে স্মার্টফোন থেকে নিজের একটি ভাল ছবি থাকতে পারে এবং তাদের বেশিরভাগই 200 কেবি ছাড়িয়ে যায়। নোট করুন যে ক্লায়েন্ট-সরবরাহিত ডেটা বিশ্বাসযোগ্য নয়, তাই সার্ভার-সাইড চেকগুলি এখনও প্রয়োগ হয়।

Question 9

আমি লুইপ ব্যবহার করছিলাম (যেমনটি আগে আর্কাইন্ডের পরামর্শ দিয়েছিল) তবে পিএনজি -ফসলে স্যুইচ করা হয়েছে । মনে হচ্ছে এটি আমার জন্য কিছুটা দ্রুত কাজ করবে (উইন 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);

অবশ্যই, এটি কেবল পিএনজি ফাইল করবে ...

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

            });

মৃত্যুদন্ডের আদেশের জন্যও নজর রাখুন, কলব্যাক দিন যাতে আপনি যখন চান না তখন অন্যান্য জিনিস না ঘটে। জিম্প্রেড () এর জন্য "অপেক্ষা" ব্যবহার করার চেষ্টা করা হয়েছে তবে এটি কাজটি ভাল করে না।

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

এস 3 এ আপলোড করতে বা যেখানে আপনার পছন্দ হয়।

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

আমি এর সরলতার জন্য পুনরায় আকার-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);
})();

Question 13

গুগল ড্রাইভ এপিআই v3 ব্যবহার করে বাস্তবায়িত চিত্রের আকার পরিবর্তন করুন । এই পদ্ধতিটি গুগল অ্যাপস স্ক্রিপ্টের জন্য গুগল শিটগুলিতে চিত্রগুলি toোকানোর জন্য প্রস্তাবিত।

অ্যালগরিদম:

আপলোড করুনগুগল ড্রাইভ ফোল্ডারে চিত্র ।
পাওয়াচিত্রের থাম্বনেইল সর্বজনীন URL ।
প্রয়োজনীয় প্রস্থ এবং / অথবা উচ্চতা দিয়ে URL এ 'আকার পরিবর্তন' পরামিতি প্রতিস্থাপন করুন। (ডিফল্ট থাম্বনেইলের আকার 220px)।
গুগল ড্রাইভ থেকে পুনরায় আকার দেওয়া থাম্বনেল ডাউনলোড করুন।

এখানে উদাহরণ দেখুন: https://github.com/dobromyslov/google-drive-utils/blob/511c44c2c48862b47c60038423b7f71bf1d28f49/src/index.ts#L150

এবং জিড্রাইভ কোটা থেকে সাবধান থাকুন:

প্রতিদিন ক্যোয়ারী: 1000000000
প্রতি ব্যবহারকারী প্রতি 100 সেকেন্ডের জন্য ক্যোয়ারী: 1000
100 সেকেন্ড প্রতি 10000: ক্যোয়ারী