મફત ઇમેજ ક્રોપર

આ કેવી રીતે કાર્ય કરે છે

Cropping સંપૂર્ણપણે તમારા બ્રાઉઝરમાં HTML5 Canvas API વાપરીને થાય છે — કોઈ અપલોડ નહીં, કોઈ સર્વર નહીં. તમે canvas એલિમેન્ટ પર સીધું selection region ડ્રેગ કરો છો, અને જ્યારે તમે crop લાગુ કરો છો, ત્યારે બ્રાઉઝરનું બિલ્ટ-ઇન 2D rendering engine ફક્ત પસંદ કરેલા pixels વાંચે છે અને તેમને JPEG, PNG, કે WebP માં ફરીથી એન્કોડ કરે છે.

1. 1
   ઇમેજ મેમરીમાં લોડ થાય છે

   તમારી ફાઇલ URL.createObjectURL() વડે વાંચવામાં આવે છે, જે બ્રાઉઝરને સ્થાનિક blob URL આપે છે. HTMLImageElement ફાઇલને સંપૂર્ણપણે બ્રાઉઝર ટૅબમાં decode કરે છે — ઇમેજ bytes ક્યારેય તમારો ડિવાઇસ છોડતાં નથી.
2. 2
   Pointer Events crop selection ચલાવે છે

   બ્રાઉઝરનું Pointer Events API (જે mouse, touch, અને pen input ને એકીકૃત કરે છે) canvas overlay પર drags ટ્રેક કરે છે. Selection ની બહાર press કરવાથી નવો rectangle શરૂ થાય છે; અંદર press કરવાથી તે ખસે છે; bottom-right corner પાસે press કરવાથી તે resize થાય છે. ઓપ્શનલ aspect-ratio presets (1:1, 16:9, 4:3, વગેરે) ડ્રેગિંગ દરમિયાન geometry ને constrain કરે છે.
3. 3
   Canvas live preview દોરે છે

   દરેક crop ફેરફાર પર, Canvas 2D context ઇમેજ ફરીથી દોરે છે, selection ની બહાર dark overlay લાગુ કરે છે, મૂળ ઇમેજ full fidelity માં બતાવવા crop region ને clear કરે છે, અને rule-of-thirds grid અને ટીલ resize handle overlay કરે છે.
4. 4
   toBlob() પરિણામ એન્કોડ કરે છે અને પહોંચાડે છે

   તમે Crop પર ક્લિક કરો ત્યારે, ચોક્કસ crop dimensions પર નવો off-screen canvas બને છે. ctx.drawImage() ફક્ત પસંદ કરેલ rectangle કૉપી કરે છે, અને canvas.toBlob() તમારા પસંદ કરેલા quality setting પર બ્રાઉઝરના નેટિવ JPEG, PNG, કે WebP encoder વાપરીને પરિણામ એન્કોડ કરે છે. Download માટે આઉટપુટ સ્થાનિક blob URL તરીકે પરત આપવામાં આવે છે.

સંબંધિત સાધનો