Image Cropper - قص الصور
يتيح لك Image Cropper قص الصور بدقة عالية داخل المتصفح دون الحاجة لرفع الملفات. تعتمد الأداة على OffscreenCanvas لمعالجة الصور بأمان وخصوصية كاملة.
Image Cropper هي أداة متخصصة في قص الصور بدقة تصل إلى مستوى البكسل باستخدام تقنية OffscreenCanvas في المتصفح. تقوم الأداة بمعالجة الصور محلياً دون رفعها إلى خوادم خارجية، مما يضمن حماية بياناتك وخصوصيتك. تعتمد العملية على دالة ctx.drawImage(bitmap, sx, sy, sw, sh, 0, 0, sw, sh) التي تسمح بالتحكم الكامل في أبعاد وأصل القص ضمن حدود الصورة الأصلية. تدعم الأداة الحفاظ على صيغة الصورة الأصلية مثل JPEG بنسبة ضغط 92% أو PNG دون فقدان الجودة. يمكن دمجها مع أدوات أخرى مثل تغيير حجم الصورة وتدوير الصورة لتحسين تجربة تحرير الصور.
كيفية استخدام Image Cropper
- قم بتحميل الصورة التي تريد قصها في الأداة مباشرة من جهازك.
- اضبط إحداثيات القص X و Y لتحديد نقطة البداية للقص ضمن حدود الصورة.
- حدد عرض (Width) وارتفاع (Height) منطقة القص بدقة بكسلية باستخدام عناصر التحكم.
- اضغط على زر القص ليتم إنشاء صورة جديدة بالحجم المحدد.
- قم بتنزيل الصورة الناتجة بصيغة JPEG أو PNG مع الحفاظ على جودة الأصل.
كيف تعمل الأداة
تعتمد الأداة على OffscreenCanvas لمعالجة الصور في بيئة العميل (المتصفح) دون إرسال بيانات إلى الخادم. يتم استخدام دالة ctx.drawImage(bitmap, sx, sy, sw, sh, 0, 0, sw, sh) حيث sx و sy تمثلان إحداثيات نقطة بداية القص، وsw وsh تمثلان عرض وارتفاع منطقة القص. يتم ضبط القيم لضمان عدم تجاوز حدود الصورة الأصلية، أي أن 0 ≤ sx ≤ width و 0 ≤ sy ≤ height، وكذلك 1 ≤ sw ≤ width - sx و 1 ≤ sh ≤ height - sy. يتم إنشاء كانفاس جديد بالحجم المطلوب للقص، وتتم عملية الرسم بدقة بكسلية متناهية.
مثال عملي على قص صورة
Input Image: 800x600 JPEG
Crop Parameters: sx=100, sy=50, sw=400, sh=300
Output Image: 400x300 JPEG بنسبة ضغط 92%تكون الصورة الناتجة مقصوصة من الإحداثيات (100, 50) بحجم 400 بكسل عرض و300 بكسل ارتفاع مع الحفاظ على صيغة JPEG وجودة 92%.
متى تستخدم Image Cropper؟
- عندما تحتاج إلى قص صور بدقة بكسلية لمشاريع التصميم أو تطوير الويب.
- للمطورين الذين يريدون معالجة الصور على جانب العميل للحفاظ على السرية والخصوصية.
- للمصممين الذين يرغبون في تحضير الصور لمواقع الويب أو الإعلانات الرقمية مع الحفاظ على صيغتها الأصلية.
- للمهتمين بتحسين سرعة تحميل الصفحات عبر تقليل حجم الصور المقصوصة بدقة.
- لطلاب البرمجة أو التصميم الذين يتعلمون التعامل مع
CanvasوOffscreenCanvas.
يمكنك أيضاً استخدام الأدوات المرتبطة مثل resize-image لتغيير أبعاد الصورة بعد القص، أو rotate-image لتدوير الصورة حسب الحاجة، بالإضافة إلى flip-image وwatermark-image لإضافة تأثيرات إضافية.
الأسئلة الشائعة
كيف تضمن الأداة أن إحداثيات القص لا تتجاوز حدود الصورة؟
الأداة تستخدم قيوداً برمجية لضبط قيم sx و sy بحيث تكون ضمن 0 إلى عرض وارتفاع الصورة الأصلية، وكذلك sw و sh بحيث لا تتجاوز المساحة المتبقية من الصورة. هذا يمنع أي تجاوز أو قص غير صحيح.
هل يتم رفع الصور إلى خادم خارجي أثناء القص؟
لا، كل المعالجة تتم داخل المتصفح باستخدام OffscreenCanvas، مما يعني أن الصور تبقى على جهازك ولا يتم رفعها أو تخزينها على أي خوادم خارجية، مما يحافظ على خصوصيتك.
هل يمكنني قص صورة بصيغ مختلفة مثل PNG وJPEG مع الحفاظ على الجودة؟
نعم، الأداة تدعم الحفاظ على صيغة الصورة الأصلية. بالنسبة لصور JPEG يتم حفظها بجودة 92%، أما صور PNG فتبقى دون فقدان جودة، مما يضمن نتائج عالية الدقة.
كيف يمكنني تحديد أبعاد القص بدقة بكسلية؟
توفر الأداة واجهة تحكم تتيح لك إدخال قيم إحداثيات القص X و Y بالإضافة إلى عرض (Width) وارتفاع (Height) بالبيكسل مباشرة، مما يوفر تحكماً دقيقاً في القص.
هل يمكنني استخدام Image Cropper بالتزامن مع أدوات تعديل صور أخرى؟
نعم، يمكنك دمج Image Cropper مع أدوات مثل resize-image لتغيير حجم الصور بعد القص، أو rotate-image لتدوير الصور، مما يسهل تدفق عمل تحرير الصور.