મફત ઈમેજ રીસાઈઝર

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

ફરીથી કદ બદલવાનું Canvas API — Chrome, Firefox અને Safari માં બિલ્ટ-ઇન એ જ રેન્ડરિંગ એન્જિન — વાપરીને સંપૂર્ણપણે તમારા બ્રાઉઝરમાં થાય છે. તમારી ઇમેજ નવા પરિમાણો પર ઑફસ્ક્રીન કેનવાસ પર દોરવામાં આવે છે અને સ્થાનિક રીતે ફરીથી એન્કોડ થાય છે; કંઈ પણ તમારું ડિવાઇસ છોડતું નથી.

1. 1
   ઇમેજ બ્રાઉઝર દ્વારા ડિકોડ થાય છે

   તમે ફાઇલ ડ્રોપ કરો કે પસંદ કરો ત્યારે, બ્રાઉઝર ઇમેજ (JPEG, PNG, WebP, AVIF, કે GIF) ને HTMLImageElement દ્વારા કાચા પિક્સેલ ડેટામાં ડિકોડ કરે છે. મૂળ પિક્સેલ પરિમાણો વાંચીને પહોળાઈ અને ઊંચાઈ ફીલ્ડ પહેલેથી ભરવા વપરાય છે.
2. 2
   કેનવાસ નવા કદમાં ફરીથી દોરે છે

   Resize પર ક્લિક કરવાથી ઑફસ્ક્રીન HTMLCanvasElement તમારી પસંદ કરેલી પહોળાઈ અને ઊંચાઈ પર સેટ થાય છે, પછી ctx.drawImage() બોલાવીને દરેક પિક્સેલને નવા પરિમાણોમાં સ્કેલ અને પેઇન્ટ કરવામાં આવે છે. JPEG આઉટપુટ માટે, પારદર્શક વિસ્તારો કાળા ન બને એ માટે પહેલા સફેદ બેકગ્રાઉન્ડ ભરવામાં આવે છે.
3. 3
   canvas.toBlob() આઉટપુટ એન્કોડ કરે છે

   બ્રાઉઝરની બિલ્ટ-ઇન canvas.toBlob() મેથડ તમે સેટ કરેલા ગુણવત્તા સ્તર પર પિક્સેલ ડેટાને JPEG, PNG, કે WebP માં એન્કોડ કરે છે. જો તમે લક્ષ્ય ફાઇલ કદ સ્પષ્ટ કર્યું હોય, તો 7-પુનરાવર્તનનો બાઇનરી સર્ચ આપોઆપ ગુણવત્તા પેરામીટર ગોઠવે છે જ્યાં સુધી આઉટપુટ એ કદ પર કે નીચે ફિટ ન થાય.
4. 4
   પરિણામ સ્થાનિક રીતે પ્રિવ્યૂ અને ડાઉનલોડ થાય છે

   એન્કોડ કરેલ Blob પ્રિવ્યૂ પેનલ માટે ઑબ્જેક્ટ URL માં ફેરવાય છે — કોઈ સર્વર રાઉન્ડ-ટ્રિપ નહીં. ડાઉનલોડ પર ક્લિક કરવાથી અંતિમ પિક્સેલ પરિમાણો ધરાવતા ફાઇલ નામ સાથે સ્થાનિક સેવ ટ્રિગર થાય છે.

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