ಉಚಿತ ಚಿತ್ರ ಕ್ರಾಪ್ಪರ್

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಕ್ರಾಪಿಂಗ್ HTML5 Canvas API ಬಳಸಿ ಸಂಪೂರ್ಣವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನಡೆಯುತ್ತದೆ — ಅಪ್‌ಲೋಡ್ ಇಲ್ಲ, ಸರ್ವರ್ ಇಲ್ಲ. ನೀವು ಕ್ಯಾನ್ವಾಸ್ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ಆಯ್ಕೆ ಪ್ರದೇಶವನ್ನು ಎಳೆಯುತ್ತೀರಿ, ಮತ್ತು ನೀವು ಕ್ರಾಪ್ ಅನ್ವಯಿಸಿದಾಗ, ಬ್ರೌಸರ್‌ನ ಅಂತರ್ನಿರ್ಮಿತ 2D ರೆಂಡರಿಂಗ್ ಇಂಜಿನ್ ಆಯ್ಕೆ ಮಾಡಿದ ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ಮಾತ್ರ ಓದಿ ಅವುಗಳನ್ನು JPEG, PNG, ಅಥವಾ WebP ಗೆ ಮರುಎನ್‌ಕೋಡ್ ಮಾಡುತ್ತದೆ.

1. 1
   ಚಿತ್ರವನ್ನು ಮೆಮೊರಿಗೆ ಲೋಡ್ ಮಾಡಲಾಗಿದೆ

   ನಿಮ್ಮ ಫೈಲ್ ಅನ್ನು URL.createObjectURL() ನೊಂದಿಗೆ ಓದಲಾಗುತ್ತದೆ, ಇದು ಬ್ರೌಸರ್‌ಗೆ ಸ್ಥಳೀಯ blob URL ಒದಗಿಸುತ್ತದೆ. HTMLImageElement ಫೈಲ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬ್ರೌಸರ್ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ಡಿಕೋಡ್ ಮಾಡುತ್ತದೆ — ಚಿತ್ರ ಬೈಟ್‌ಗಳು ಎಂದಿಗೂ ನಿಮ್ಮ ಸಾಧನ ಬಿಟ್ಟು ಹೋಗುವುದಿಲ್ಲ.
2. 2
   Pointer Events ಕ್ರಾಪ್ ಆಯ್ಕೆಯನ್ನು ನಡೆಸುತ್ತದೆ

   ಬ್ರೌಸರ್‌ನ Pointer Events API (ಮೌಸ್, ಟಚ್, ಮತ್ತು ಪೆನ್ ಇನ್‌ಪುಟ್ ಅನ್ನು ಏಕೀಕರಿಸುತ್ತದೆ) ಕ್ಯಾನ್ವಾಸ್ ಓವರ್‌ಲೇಯ ಮೇಲಿನ ಎಳೆತಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ. ಆಯ್ಕೆಯ ಹೊರಗೆ ಒತ್ತುವುದು ಹೊಸ ಆಯತ ಪ್ರಾರಂಭಿಸುತ್ತದೆ; ಒಳಗೆ ಒತ್ತುವುದು ಅದನ್ನು ಸರಿಸುತ್ತದೆ; ಕೆಳಗಿನ-ಬಲ ಮೂಲೆಯ ಬಳಿ ಒತ್ತುವುದು ಅದನ್ನು ಗಾತ್ರ ಬದಲಾಯಿಸುತ್ತದೆ. ಐಚ್ಛಿಕ ಆಸ್ಪೆಕ್ಟ್-ಅನುಪಾತ ಪ್ರಿಸೆಟ್‌ಗಳು (1:1, 16:9, 4:3, ಇತ್ಯಾದಿ) ಎಳೆಯುವಾಗ ಜ್ಯಾಮಿತಿಯನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತವೆ.
3. 3
   Canvas ಲೈವ್ ಮುನ್ನೋಟ ಎಳೆಯುತ್ತದೆ

   ಪ್ರತಿ ಕ್ರಾಪ್ ಬದಲಾವಣೆಯಲ್ಲಿ, Canvas 2D ಕಾಂಟೆಕ್ಸ್ಟ್ ಚಿತ್ರವನ್ನು ಮರುಎಳೆಯುತ್ತದೆ, ಆಯ್ಕೆಯ ಹೊರಗೆ ಗಾಢ ಓವರ್‌ಲೇ ಅನ್ವಯಿಸುತ್ತದೆ, ಕ್ರಾಪ್ ಪ್ರದೇಶವನ್ನು ತೆರವುಗೊಳಿಸಿ ಮೂಲ ಚಿತ್ರವನ್ನು ಪೂರ್ಣ ನಿಷ್ಠೆಯಲ್ಲಿ ತೋರಿಸುತ್ತದೆ, ಮತ್ತು ಮೂರರ-ನಿಯಮ ಗ್ರಿಡ್ ಮತ್ತು ಟೀಲ್ ಗಾತ್ರ-ಬದಲಾವಣೆ ಹ್ಯಾಂಡಲ್ ಅನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ.
4. 4
   toBlob() ಫಲಿತಾಂಶವನ್ನು ಎನ್‌ಕೋಡ್ ಮಾಡಿ ವಿತರಿಸುತ್ತದೆ

   ನೀವು Crop ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ನಿಖರ ಕ್ರಾಪ್ ಆಯಾಮಗಳಲ್ಲಿ ಹೊಸ ಪರದೆಯ-ಹೊರಗಿನ ಕ್ಯಾನ್ವಾಸ್ ರಚಿಸಲಾಗುತ್ತದೆ. ctx.drawImage() ಆಯ್ಕೆ ಮಾಡಿದ ಆಯತವನ್ನು ಮಾತ್ರ ನಕಲಿಸುತ್ತದೆ, ಮತ್ತು canvas.toBlob() ನಿಮ್ಮ ಆಯ್ಕೆ ಮಾಡಿದ ಗುಣಮಟ್ಟ ಸೆಟ್ಟಿಂಗ್‌ನಲ್ಲಿ ಬ್ರೌಸರ್‌ನ ಸ್ಥಳೀಯ JPEG, PNG, ಅಥವಾ WebP ಎನ್‌ಕೋಡರ್ ಬಳಸಿ ಫಲಿತಾಂಶ ಎನ್‌ಕೋಡ್ ಮಾಡುತ್ತದೆ. ಔಟ್‌ಪುಟ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್‌ಗಾಗಿ ಸ್ಥಳೀಯ blob URL ಆಗಿ ಹಿಂತಿರುಗಿಸಲಾಗುತ್ತದೆ.

ಸಂಬಂಧಿತ ಪರಿಕರಗಳು