இலவச படம் கிராப்பர்

இது எவ்வாறு செயல்படுகிறது

வெட்டுதல் HTML5 Canvas API மூலம் முழுவதும் உங்கள் உலாவியில் நடக்கிறது — பதிவேற்றம் இல்லை, சர்வர் இல்லை. canvas உறுப்பில் நேரடியாகத் தேர்வுப் பகுதியை இழுக்கிறீர்கள்; வெட்டைப் பயன்படுத்தும்போது, உலாவியின் உள்ளமைந்த 2D rendering இயந்திரம் தேர்ந்தெடுத்த pixels ஐ மட்டும் படித்து JPEG, PNG அல்லது WebP ஆக மீண்டும் குறியாக்குகிறது.

1. 1
   படம் நினைவகத்தில் ஏற்றப்படுகிறது

   உங்கள் கோப்பு URL.createObjectURL() மூலம் படிக்கப்படுகிறது; இது உலாவிக்கு உள்ளூர் blob URL ஐ வழங்குகிறது. HTMLImageElement கோப்பை முழுவதும் உலாவி டேபிலேயே decode செய்கிறது — பட bytes உங்கள் சாதனத்தை விட்டு வெளியேறுவதில்லை.
2. 2
   Pointer Events வெட்டுத் தேர்வை இயக்குகின்றன

   உலாவியின் Pointer Events API (மவுஸ், தொடுதல், பேனா உள்ளீட்டை ஒருங்கிணைக்கிறது) canvas overlay இல் இழுப்புகளைக் கண்காணிக்கிறது. தேர்வுக்கு வெளியே அழுத்தினால் புதிய செவ்வகம் தொடங்கும்; உள்ளே அழுத்தினால் நகரும்; கீழ்-வலது மூலைக்கு அருகில் அழுத்தினால் மறுஅளவாகும். விருப்ப விகித முன்னமைவுகள் (1:1, 16:9, 4:3 முதலியன) இழுக்கும்போது வடிவவியலைக் கட்டுப்படுத்துகின்றன.
3. 3
   Canvas நேரலை முன்னோட்டத்தை வரைகிறது

   ஒவ்வொரு வெட்டு மாற்றத்திலும், Canvas 2D context படத்தை மீண்டும் வரைந்து, தேர்வுக்கு வெளியே அடர் overlay ஐப் பயன்படுத்தி, அசல் படத்தை முழுத் தரத்தில் காட்ட வெட்டுப் பகுதியைத் துடைத்து, rule-of-thirds கட்டம் மற்றும் teal மறுஅளவு handle ஐ மேலடுக்குகிறது.
4. 4
   toBlob() முடிவைக் குறியாக்கி வழங்குகிறது

   வெட்டு என்பதைக் கிளிக் செய்தால், சரியான வெட்டுப் பரிமாணங்களில் புதிய திரைக்கு வெளியே உள்ள canvas உருவாக்கப்படுகிறது. ctx.drawImage() தேர்ந்தெடுத்த செவ்வகத்தை மட்டும் நகலெடுக்கிறது; canvas.toBlob() உலாவியின் native JPEG, PNG அல்லது WebP encoder மூலம் நீங்கள் தேர்ந்தெடுத்த தர அமைப்பில் முடிவைக் குறியாக்குகிறது. வெளியீடு பதிவிறக்கத்துக்காக உள்ளூர் blob URL ஆகத் திருப்பித் தரப்படுகிறது.

தொடர்புடைய கருவிகள்