أستخدم مؤخرًا JS للقيام بأشياء ممتعة وأحتاج إلى معالجة الصور. هناك العديد من البرامج التعليمية على الإنترنت بطرق مختلفة، وقد لا تعمل بعض الطرق بالضرورة. ستشاركك هذه المقالة طريقة تم التحقق منها بواسطة المؤلف لاستخدام NodeJS لمعالجة الصور.
npm i gm
gm هي مكتبة عقدية توفر بعض واجهات برمجة تطبيقات JS حتى يتمكن المطورون من معالجة الصور. ولكنه يعتمد على GraphicsMagick أو ImageMagick الموجود أسفله. في الواقع، gm هو سطر الأوامر لاستدعاء هاتين الأداتين.
بمعنى آخر، بالإضافة إلى تثبيت gm، نحتاج أيضًا إلى تثبيت GraphicsMagick أو ImageMagick.
ImageMagickالمؤلف موجود على نظام MacOS واختار مباشرةً تثبيت ImageMagick.
وفقًا لأمر الموقع الرسمي، هناك حاجة إلى سطر واحد فقط من التعليمات البرمجية (شريطة أن تكون قد قمت بتثبيت Brew على جهاز Mac الخاص بك):
قم بتثبيت imagemagick --with-webp
اسمحوا لي أن أقدم المعلمة --with-webp
. يمكنك حذفها، ولكن إذا كنت تريد معالجة الصور بتنسيق webp، فيجب عليك إضافتها.
إنه أكثر ملاءمة لاستخدام الشراب. لا داعي للقلق بشأن متغيرات البيئة.
GraphicsMagic
بالطبع، إذا كنت لا تستخدم ImageMagick، يمكنك استخدام GraphicsMagick:
الشراب تثبيت graphicsmagick
في البداية اخترت تثبيت ImageMagick، وعندما كتبت هذا، كنت أتلقى خطأً دائمًا:
const gm = require('gm'); gm('مسار ملف الصورة').crop(width, height, 0, 0).resize(width2, height2).quality(quality).write('مسار ملف الإخراج'، الوظيفة (يخطئ) { إذا (يخطئ) { إرجاع console.log(err); } آخر { console.log('النجاح'); } });
إذا كنت تريد استخدام ImageMagick، فإن طريقة الكتابة المذكورة أعلاه خاطئة بالفعل، ويجب عليك كتابتها بهذه الطريقة، مع الإشارة بوضوح إلى أنني أريد استخدام أداة ImageMagick
:
const g = require('gm'); const gm = g.subClass({imageMagick: true}); gm('مسار ملف الصورة').crop(width, height, 0, 0).resize(width2, height2).quality(quality).write('مسار ملف الإخراج'، الوظيفة (يخطئ) { إذا (يخطئ) { إرجاع console.log(err); } آخر { console.log('النجاح'); } });
قم بتسجيل وظائف gm الشائعة الاستخدام للرجوع إليها:
ملاحظة: يمكن استدعاء gm في سلسلة، ومن الممتع جدًا كتابته. فهو يقرأ ملف الصورة من gm(اسم الملف)، ويعالجه طبقة تلو الأخرى، ويكتبه أخيرًا في file.write(اسم الملف، رد الاتصال).
تكبير الصورة
.resize(width, height)
اقتصاص الصورة
.crop(width, height, x, y)
تدوير الصورة
.rotate(color, deg)
اللون هو لون الخلفية (إذا كانت زاوية الدوران ليست من مضاعفات 90، فإن لون الخلفية يكون مفيدًا، فقط استخدم التنسيق "#ededed")