أداة اقتصاص الصور مجانًا

كيف يعمل

يتم القص بالكامل في متصفحك باستخدام HTML5 Canvas API — دون رفع ولا خادم. تسحب منطقة تحديد مباشرة على عنصر canvas، وعند تطبيق القص، يقرأ محرك العرض ثنائي الأبعاد المدمج في المتصفح البكسلات المحددة فقط ويعيد ترميزها إلى JPEG أو PNG أو WebP.

1. 1
   تُحمَّل الصورة في الذاكرة

   يُقرأ ملفك بـ URL.createObjectURL()، الذي يعطي المتصفح رابط كائن محليًا. ويفك HTMLImageElement الملف بالكامل داخل تبويب المتصفح — ولا تغادر بايتات الصورة جهازك أبدًا.
2. 2
   Pointer Events تتحكم في تحديد القص

   تتتبع Pointer Events API في المتصفح (التي توحّد إدخال الفأرة واللمس والقلم) عمليات السحب على طبقة فوق اللوحة. الضغط خارج التحديد يبدأ مستطيلًا جديدًا؛ والضغط داخله يحرّكه؛ والضغط قرب الزاوية السفلية اليمنى يغيّر حجمه. وتقيّد إعدادات نسب العرض إلى الارتفاع الاختيارية (1:1 و16:9 و4:3 وغيرها) الشكل أثناء السحب.
3. 3
   Canvas يرسم المعاينة المباشرة

   عند كل تغيير في القص، يعيد سياق Canvas 2D رسم الصورة، ويطبق طبقة داكنة خارج التحديد، ويمسح منطقة القص لإظهار الصورة الأصلية بدقة كاملة، ويضيف شبكة قاعدة الأثلاث ومقبض تغيير حجم أخضر مزرق.
4. 4
   toBlob() يرمّز النتيجة ويسلّمها

   عند النقر على «قص»، تُنشأ لوحة جديدة خارج الشاشة بأبعاد القص الدقيقة. ينسخ ctx.drawImage() المستطيل المحدد فقط، ويرمّز canvas.toBlob() النتيجة باستخدام مرمّز JPEG أو PNG أو WebP الأصلي في المتصفح بإعداد الجودة الذي اخترته. ويُعاد الإخراج كرابط كائن محلي للتنزيل.

أدوات ذات صلة