એક ચિત્ર ક્રોપ કરો _

બ્રાઉઝર-આધારિત ઇમેજ ક્રોપિંગ કેવી રીતે કામ કરે છે

ક્રોપિંગ પ્રક્રિયા સંપૂર્ણપણે તમારા બ્રાઉઝર ટૅબની અંદર Canvas API નો ઉપયોગ કરીને ચાલે છે. કોઈ સર્વર-સાઇડ પ્રોસેસિંગ નથી, કોઈ અપલોડ નથી, કોઈ તૃતીય-પક્ષ સેવાઓ નથી. દરેક પગલું તમારા ઉપકરણ પર થાય છે.

1. ચિત્રને <img> એલિમેન્ટમાં લોડ કરો જેથી બ્રાઉઝર તેને સ્થાનિક રીતે ડીકોડ કરે. એક કેનવાસ ઓવરલે ચિત્રને વ્યુપોર્ટમાં ફિટ થાય તેમ સ્કેલ કરીને રેન્ડર કરે છે, જ્યારે એક ખેંચી શકાય તેવો પસંદગી લંબચોરસ વર્તમાન ક્રોપ ક્ષેત્ર દર્શાવે છે.
2. ક્રોપ વિસ્તાર ગોઠવવા માટે લંબચોરસની કિનારીઓ અથવા ખૂણાઓ ખેંચો. લંબચોરસ ચિત્રની સીમાઓમાં જ રાખવામાં આવે છે, જેથી તમે ચિત્રની બહારનો વિસ્તાર પસંદ કરી શકતા નથી. જ્યારે નિશ્ચિત પાસા ગુણોત્તર (1:1, 16:9, 4:3) સક્રિય હોય, ત્યારે માપ બદલવું તે ગુણોત્તર આપમેળે જાળવી રાખે છે.
3. તમે ખેંચો તેમ પિક્સલ રીડઆઉટ લાઇવ અપડેટ થાય છે, જે ઇમેજ-પિક્સલ કોઓર્ડિનેટ્સમાં વર્તમાન ક્રોપ પહોળાઈ, ઊંચાઈ, X અને Y સ્થિતિઓ દર્શાવે છે. આ તમને અટકળ વગર ચોક્કસ પરિમાણો લક્ષ્ય બનાવવા દે છે.
4. જ્યારે તમે Crop & Download ક્લિક કરો છો, ત્યારે પૃષ્ઠ સ્રોત ઇમેજનો માત્ર પસંદ કરેલ વિસ્તાર મૂળ પિક્સલ રિઝોલ્યુશન પર ઑફસ્ક્રીન કેનવાસ પર દોરે છે, પછી canvas.toBlob() દ્વારા સ્રોત ફાઇલના સમાન ફોર્મેટમાં પરિણામ એક્સપોર્ટ કરે છે. ડાઉનલોડ માટે Blob URL જનરેટ થાય છે.

શા માટે ઑનલાઇન ચિત્રો ક્રોપ કરવા?

• ક્રોપિંગ બિનજરૂરી કિનારીઓ, ખાલી જગ્યા અથવા દ્રશ્ય અવ્યવસ્થા દૂર કરે છે. એક જ ક્રોપ પાસ ઘણીવાર કોઈપણ ફિલ્ટર અથવા રંગ ગોઠવણ કરતાં ફોટો રચનામાં વધુ સુધારો કરે છે.
• પ્રકાશન પ્લેટફોર્મ માટે પાસા ગુણોત્તર નિયંત્રણ આવશ્યક છે. સોશિયલ-મીડિયા ફીડ પ્રોફાઇલ માટે 1:1, વિડિયો થંબનેઇલ માટે 16:9 અને સ્ટાન્ડર્ડ ફોટોગ્રાફી માટે 4:3 ની અપેક્ષા રાખે છે. યોગ્ય ગુણોત્તરમાં ક્રોપ કરવાથી અપલોડ વખતે બેડોળ લેટરબોક્સિંગ અથવા ક્રોપ-કટ-ઓફ ટાળી શકાય છે.
• ફોટો એડિટર વગરના લૉક ડાઉન કોર્પોરેટ ઉપકરણો પર ક્લાયન્ટ-સાઇડ ક્રોપિંગ એ એકમાત્ર વિકલ્પ છે. કંઈપણ અપલોડ ન થતું હોવાથી, ડેટા લીકનું જોખમ નથી અને સંવેદનશીલ ઇમેજ માટે કોઈ અનુપાલન સમીક્ષાની જરૂર નથી.
• લાઇવ પરિમાણ રીડઆઉટ અટકળ દૂર કરે છે. તમે ખેંચો તેમ પિક્સલ કોઓર્ડિનેટ્સ અને પસંદગીનું કદ જુઓ છો, જેથી તમે પિક્સલ-માપન ટૂલ પર સ્વિચ કર્યા વગર ચોક્કસ પહોળાઈ અને ઊંચાઈમાં ક્રોપ કરી શકો છો.

સામાન્ય ક્રોપિંગ એપ્લિકેશનો

વેબ પ્રકાશન, સોશિયલ મીડિયા અને સૉફ્ટવેર ડેવલપમેન્ટમાં ક્રોપિંગ એ સૌથી સામાન્ય ઇમેજ ફેરફારોમાંનું એક છે. અહીં ત્રણ પેટર્ન છે જ્યાં બ્રાઉઝર-આધારિત ક્રોપર સમય બચાવે છે.

• ઑનલાઇન સ્ટોર માટે ઉત્પાદન ફોટા તૈયાર કરવા. દરેક લિસ્ટિંગ થંબનેઇલ ગ્રીડમાં ગોઠવાય તે માટે સતત 1:1 અથવા 4:5 પાસા ગુણોત્તરમાં ક્રોપ કરો. એક્સપોર્ટ મૂળ ફોર્મેટ જાળવી રાખે છે, તેથી JPEG ઉત્પાદન શોટ JPEG તરીકે જ રહે છે.
• દસ્તાવેજીકરણ અથવા બગ રિપોર્ટ માટે સ્ક્રીનશોટ ટ્રિમ કરવા. ટિકિટ અથવા પુલ રિક્વેસ્ટ સાથે ઇમેજ જોડતા પહેલાં બ્રાઉઝર ટૂલબાર, વિન્ડોઝ ટાસ્કબાર અથવા સંવેદનશીલ સૂચનાઓ ક્રોપ કરી નાખો.
• લેન્ડિંગ પેજ માટે હીરો ઇમેજ અથવા બેનર ફ્રેમ કરવા. 16:9 પ્રીસેટ લૉક કરો, ફોટાનો સૌથી મહત્વપૂર્ણ ભાગ ક્રોપ લંબચોરસની મધ્યમાં મૂકો અને રેટિના ડિસ્પ્લે પર શ્રેષ્ઠ ગુણવત્તા માટે મૂળ રિઝોલ્યુશનમાં એક્સપોર્ટ કરો.

એક વ્યવહારુ ઉદાહરણ: 4000×3000 ફોટોને હીરો બેનર માટે 1200×675 માં ક્રોપ કરવો

ડિજિટલ કૅમેરામાંથી 4000×3000 પિક્સલનો ફોટો સામાન્ય વેબ હીરો બેનર માટે ઘણો મોટો છે. બેનર સ્પેસ 1200×675 (16:9 ફ્રેમ) હોઈ શકે છે.

ફોટો અપલોડ ઝોનમાં નાખો. ઇમેજ પૂર્ણ રિઝોલ્યુશન પર લોડ થાય છે પરંતુ આરામદાયક ખેંચવાની ક્રિયા માટે વ્યુપોર્ટમાં ફિટ થાય તેમ સ્કેલ થાય છે. 16:9 પાસા ગુણોત્તર પ્રીસેટ પસંદ કરો. ક્રોપ લંબચોરસ તરત જ ઇમેજમાં ફિટ થતા સૌથી મોટા 16:9 ક્ષેત્ર પર સ્નેપ થાય છે. ફોકલ પોઇન્ટ — એક પર્વત શિખર, એક ઉત્પાદન, એક વ્યક્તિનો ચહેરો — ફ્રેમમાં સ્થાન આપવા લંબચોરસ ખેંચો. લાઇવ રીડઆઉટ 4000×2250 (પૂર્ણ-ઇમેજ 16:9 વિન્ડો) પર વર્તમાન પસંદગી દર્શાવે છે. પહોળાઈ રીડઆઉટ 1200 px સુધી પહોંચે ત્યાં સુધી એક ખૂણાના હેન્ડલને પકડીને અંદર ખેંચો. ગુણોત્તર લૉક હોવાથી ઊંચાઈ આપમેળે અનુસરે છે. Crop & Download ક્લિક કરો. પૃષ્ઠ મૂળ પિક્સલમાંથી પસંદ કરેલ 1200×675 ક્ષેત્ર કાઢે છે અને સ્રોત ફોર્મેટમાં ક્રોપ કરેલ ફાઇલ આપે છે. સંપૂર્ણ રાઉન્ડ-ટ્રિપ એક કે બે સેકંડ લે છે અને પ્રારંભિક પૃષ્ઠ લોડ ઉપરાંત કોઈ નેટવર્ક બેન્ડવિડ્થનો ઉપયોગ કરતું નથી.

ક્રોપિંગ માટે કયા ઇમેજ ફોર્મેટ સપોર્ટેડ છે?

આ ટૂલ બ્રાઉઝર ડીકોડ કરી શકે તે કોઈપણ ફોર્મેટ સ્વીકારે છે: PNG, JPEG અને WebP લગભગ દરેક વાસ્તવિક ઉપયોગના કેસને આવરી લે છે. ક્રોપ કરેલ આઉટપુટ સ્રોત ફાઇલના સમાન ફોર્મેટમાં સાચવવામાં આવે છે. PNG લોસલેસ રહે છે, JPEG તેનો મૂળ ગુણવત્તા સ્તર જાળવી રાખે છે અને WebP 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 થી મોટી હોય, તો તમે તેને અહીં લોડ કરતા પહેલા સમર્પિત ઇમેજ રીસાઇઝર ટૂલનો ઉપયોગ કરીને તેનું કદ ઘટાડી શકો છો.

શું ક્રોપિંગ મોબાઇલ ફોન અને ટેબ્લેટ પર કામ કરે છે?

હા. ક્રોપ હેન્ડલ્સ ટચ ટાર્ગેટને ધ્યાનમાં રાખીને માપવામાં આવ્યા છે, અને ક્રિયાપ્રતિક્રિયા પોઇન્ટર ઇવેન્ટ્સનો ઉપયોગ કરે છે જે માઉસ ક્લિક અને આંગળીના ટેપ બંને સાથે કામ કરે છે. ફોન સ્ક્રીન પર ઇમેજ પ્રીવ્યુ ઉપલબ્ધ પહોળાઈ સાથે અનુકૂલન કરે છે, અને નિયંત્રણો સરળ એક-હાથ ઉપયોગ માટે ઊભી રીતે ગોઠવાય છે.