كيف تعمل أداة قص الصور داخل المتصفح
عملية القص تعمل بالكامل داخل علامة تبويب المتصفح باستخدام Canvas API. لا معالجة على الخادم، ولا رفع، ولا خدمات طرف ثالث. كل خطوة تتم على جهازك.
- تحميل الصورة في عنصر
<img>ليفكّها المتصفح محليًا. تعرض طبقة Canvas الصورة بمقياس يناسب نافذة العرض بينما يُظهر مستطيل تحديد قابل للسحب منطقة القص الحالية. - اسحب المستطيل من حوافه أو زواياه لتعديل منطقة القص. يبقى المستطيل محصورًا داخل حدود الصورة فلا يمكنك تحديد منطقة خارجها. عند تفعيل نسبة أبعاد ثابتة (1:1، 16:9، 4:3)، يحافظ تغيير الحجم تلقائيًا على تلك النسبة.
- تتحدّث قراءة البكسل مباشرة أثناء السحب، مُظهرة عرض القص الحالي وارتفاعه وموضعيه X وY بإحداثيات بكسلات الصورة. يتيح لك ذلك استهداف أبعاد دقيقة دون تخمين.
- عند النقر على «قص وتنزيل»، ترسم الصفحة المنطقة المحددة فقط من الصورة المصدر على لوحة Canvas خلفية بالدقة الأصلية، ثم تصدّر النتيجة عبر
canvas.toBlob()بنفس صيغة الملف الأصلي. يتم إنشاء رابط Blob للتنزيل.
لماذا قص الصور أونلاين؟
- يزيل القص الحواف غير المرغوب فيها والمساحات الفارغة والفوضى البصرية. غالبًا ما تُحسِّن عملية قص واحدة تكوين الصورة أكثر من أي فلتر أو تعديل لوني.
- التحكم في نسبة الأبعاد ضروري لمنصات النشر. تتوقع خلاصات التواصل الاجتماعي 1:1 للصور الشخصية و16:9 للصور المصغرة للفيديو و4:3 للتصوير الفوتوغرافي القياسي. القص بالنسبة الصحيحة يمنع الأشرطة السوداء أو الاقتطاع غير المرغوب فيه عند الرفع.
- القص من جانب العميل هو الخيار الوحيد على أجهزة الشركات المقيدة التي تفتقر إلى محرر صور. ولأن شيئًا لا يُرفع، فلا خطر لتسرب البيانات ولا حاجة لمراجعة الامتثال للصور الحساسة.
- قراءة الأبعاد الحية تزيل التخمين. ترى إحداثيات البكسل وحجم التحديد أثناء السحب، فتتمكن من القص بعرض وارتفاع محددين دون التبديل إلى أداة قياس بكسل.
تطبيقات شائعة للقص
القص من أكثر تعديلات الصور شيوعًا عبر نشر الويب ووسائل التواصل الاجتماعي وتطوير البرمجيات. إليك ثلاثة أنماط توفر فيها أداة القص في المتصفح وقتًا.
- تجهيز صور المنتجات لمتجر إلكتروني. قص بنسبة 1:1 أو 4:5 متناسقة لتتوافق كل الصور المصغرة في الشبكة. يحافظ التصدير على الصيغة الأصلية، فتبقى صور المنتج بصيغة JPEG.
- قص لقطات الشاشة للتوثيق أو تقارير الأخطاء. أزل شريط أدوات المتصفح وشريط مهام Windows أو الإشعارات الحساسة قبل إرفاق الصورة بتذكرة أو طلب سحب.
- تأطير صورة رئيسية أو لافتة لصفحة هبوط. اختر النسبة المسبقة 16:9، وضَع أهم جزء من الصورة في مركز مستطيل القص، ثم صدِّر بالدقة الأصلية لأفضل جودة على شاشات Retina.
مثال تطبيقي: قص صورة 4000×3000 إلى 1200×675 للافتة رئيسية
صورة بدقة 4000×3000 بكسل من كاميرا رقمية أكبر بكثير من اللافتة الرئيسية النموذجية للويب. قد تكون مساحة اللافتة 1200×675 بكسل (إطار 16:9).
أسقط الصورة في منطقة الرفع. تُحمَّل الصورة بالدقة الكاملة لكنها تتكيف مع نافذة العرض لتسهيل التفاعل بالسحب. اختر نسبة الأبعاد المسبقة 16:9. يلتقط مستطيل القص فورًا أوسع منطقة 16:9 تناسب الصورة. اسحب المستطيل لوضع نقطة التركيز — قمة جبل أو منتج أو وجه شخص — في الإطار. تعرض القراءة الحية التحديد الحالي بحجم 4000×2250 (نافذة 16:9 للصورة كاملة). أمسك مقبض الزاوية واسحب للداخل حتى يصل عرض التحديد إلى 1200 بكسل. يتبع الارتفاع تلقائيًا لأن النسبة مقفلة. انقر قص وتنزيل. تستخرج الصفحة المنطقة المحددة 1200×675 من البكسلات الأصلية وتُسلِّم الملف المقتصّ بالصيغة المصدرية. تستغرق الرحلة بأكملها ثانية أو اثنتين ولا تستهلك أي نطاق ترددي غير تحميل الصفحة الأولي.
ما صيغ الصور المدعومة للقص؟
تقبل الأداة أي صيغة يمكن للمتصفح فكّها: PNG وJPEG وWebP تغطي تقريبًا جميع حالات الاستخدام العملية. يُحفظ الإخراج المقتصّ بنفس صيغة الملف الأصلي. تبقى PNG بدون فقدان، ويحافظ JPEG على مستوى جودته الأصلي، ويبقى WebP كما هو. تُكتشف الصيغة من نوع MIME للملف المصدر.
هل يقلل القص من حجم ملف الصورة؟
يزيل القص البكسلات، لذا يكون حجم الملف الناتج أصغر عادةً من المصدر، خاصة عند قص حاشية كبيرة أو منطقة فارغة. يستخدم التصدير صيغة الملف الأصلي ومعاملات ترميزه — تبقى PNG بدون فقدان، ويحتفظ JPEG بإعداد الجودة الأصلي — لذا يكون التوفير فقط من انخفاض عدد البكسلات وليس من إعادة الضغط.
ماذا تفعل نسب الأبعاد المسبقة؟
النسب المسبقة (1:1، 16:9، 4:3، 3:2، 9:16) تُقفل نسبة عرض مستطيل القص إلى ارتفاعه. عند تفعيل نسبة مسبقة، يؤدي سحب أي مقبض زاوية أو حافة إلى تعديل حجم التحديد مع الحفاظ على النسبة ثابتة. التبديل إلى الوضع الحر يزيل القيد لتتمكن من تغيير حجم المستطيل بحرية. تُطبَّق النسبة على إحداثيات بكسلات الصورة، فيكون للإخراج المُصدَّر نفس نسبة الأبعاد التي اخترتها بالضبط.
هل تُرفع الصورة إلى خادم؟
لا. الصورة لا تغادر جهازك أبدًا. تستخدم الصفحة File API للمتصفح لقراءة الصورة في الذاكرة وCanvas API لقصها وتصدير النتيجة. يمكنك التحقق من ذلك بفتح لوحة DevTools Network في المتصفح — الطلبات الخارجية الوحيدة أثناء القص هي تحميل الصفحة الأولي وطلبات الإعلانات. لا تُنقل أي بيانات صورة.
هل يمكنني قص منطقة محددة بإدخال إحداثيات بكسل دقيقة؟
النسخة الحالية تضبط مستطيل القص عبر السحب على معاينة الصورة. يمكنك قراءة إحداثيات البكسل الحية لـ X وY والعرض والارتفاع للتحديد. الإدخال العددي المباشر لمستطيل القص غير متاح في الإصدار v1 لكنه تحسين مخطط له في تحديث مستقبلي.
ماذا يحدث للصورة الأصلية؟
الملف الأصلي يبقى على جهازك. تقرؤه الصفحة في ذاكرة المتصفح للعرض والقص، لكنها لا تعدّل الملف المصدر على القرص أبدًا. الناتج المقتصّ هو ملف جديد تُنزّله بشكل منفصل. يبقى الأصل دون تغيير في موقعه الأصلي على حاسوبك أو هاتفك.
هل هناك حد لحجم الملف للقص؟
تطبّق الأداة حدًا أقصى 30 MB لكل ملف في منطقة الرفع للحفاظ على ذاكرة المتصفح تحت السيطرة على الأجهزة الأقل قدرة. إذا كانت صورتك أكبر من 30 MB، يمكنك تصغيرها أولاً باستخدام أداة تغيير حجم صور مخصصة قبل تحميلها هنا للقص.
هل يعمل القص على الهواتف المحمولة والأجهزة اللوحية؟
نعم. مقابض القص مصممة بحجم مناسب للمس، والتفاعل يستخدم أحداث المؤشر التي تعمل مع النقرات بالماوس والنقرات بالإصبع. على شاشة الهاتف، تتكيف معاينة الصورة مع العرض المتاح، وتتراص عناصر التحكم عموديًا لسهولة الاستخدام بيد واحدة.