ಉಚಿತ ಚಿತ್ರ ತಿರುಗಿಸುವ ಮತ್ತು ಫ್ಲಿಪ್ ಮಾಡುವ ಸಾಧನ

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

ಇಲ್ಲಿ ತಿರುಗುವಿಕೆ, ಫ್ಲಿಪ್ಪಿಂಗ್, ಮತ್ತು ಕೋನ ತಿದ್ದುಪಡಿ HTML Canvas API ಬಳಸಿ ಸಂಪೂರ್ಣವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನೊಳಗೆ ನಡೆಯುತ್ತದೆ — ಯಾವುದೇ ಫೈಲ್ ಎಂದಿಗೂ ಸರ್ವರ್‌ಗೆ ಕಳುಹಿಸಲಾಗುವುದಿಲ್ಲ. ಟೂಲ್ ನಿಮ್ಮ ಚಿತ್ರವನ್ನು ಆಯ್ಕೆ ಮಾಡಿದ ಕೋನ ಮತ್ತು ಸ್ಕೇಲ್ ಟ್ರಾನ್ಸ್‌ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ಪರದೆಯ-ಹೊರಗಿನ ಕ್ಯಾನ್ವಾಸ್‌ಗೆ ಎಳೆಯುತ್ತದೆ, ನಂತರ ಬ್ರೌಸರ್‌ನ ಸ್ವಂತ ಕೋಡೆಕ್ ಬಳಸಿ ಫಲಿತಾಂಶವನ್ನು JPEG, PNG, ಅಥವಾ WebP ಗೆ ಎನ್‌ಕೋಡ್ ಮಾಡುತ್ತದೆ.

1. 1
   ಚಿತ್ರವನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಡಿಕೋಡ್ ಮಾಡಲಾಗಿದೆ

   ನಿಮ್ಮ JPEG, PNG, ಅಥವಾ WebP ಫೈಲ್ ಅನ್ನು ಸ್ಥಳೀಯ ಆಬ್ಜೆಕ್ಟ್ URL ಮೂಲಕ HTMLImageElement ಗೆ ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ — ಎಂದಿಗೂ ನಿಮ್ಮ ಸಾಧನ ಬಿಟ್ಟು ಹೋಗದ ಬ್ರೌಸರ್ ಮೆಮೊರಿ ಉಲ್ಲೇಖ. ಸ್ವಾಭಾವಿಕ ಪಿಕ್ಸೆಲ್ ಆಯಾಮಗಳನ್ನು ಡಿಕೋಡ್ ಮಾಡಿದ ಬಿಟ್‌ಮ್ಯಾಪ್‌ನಿಂದ ನೇರವಾಗಿ ಓದಲಾಗುತ್ತದೆ.
2. 2
   Canvas ಟ್ರಾನ್ಸ್‌ಫಾರ್ಮ್ ಅನ್ವಯಿಸಲಾಗಿದೆ

   ಒಂದು ಪರದೆಯ-ಹೊರಗಿನ ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ತಿರುಗಿಸಿದ ಬೌಂಡಿಂಗ್ ಬಾಕ್ಸ್‌ಗೆ ಹೊಂದಿಸಲು ಗಾತ್ರ ಮಾಡಲಾಗುತ್ತದೆ (ಪ್ರತಿ ಅಕ್ಷಕ್ಕೆ width·cos + height·sin). Canvas 2D ಕಾಂಟೆಕ್ಸ್ಟ್ ಅನ್ನು ನಂತರ ಮಧ್ಯಕ್ಕೆ ಅನುವಾದಿಸಲಾಗುತ್ತದೆ, ಆಯ್ಕೆ ಮಾಡಿದ ಕೋನದಲ್ಲಿ (ರೇಡಿಯನ್‌ಗಳಲ್ಲಿ) ತಿರುಗಿಸಲಾಗುತ್ತದೆ, ಮತ್ತು ಫ್ಲಿಪ್‌ಗಳಿಗಾಗಿ ಅಡ್ಡ ಅಥವಾ ಲಂಬ ಅಕ್ಷದಲ್ಲಿ -1 ರಿಂದ ಪ್ರಮಾಣಿಸಲಾಗುತ್ತದೆ — ಇವೆಲ್ಲಾ ಬಾಹ್ಯ ಲೈಬ್ರರಿ ಇಲ್ಲದ ಮಾನಕ ctx.rotate / ctx.scale ಕಾರ್ಯಾಚರಣೆಗಳು.
3. 3
   ಆಟೋ-ಕ್ರಾಪ್ ಮೂಲೆಗಳನ್ನು ಕತ್ತರಿಸುತ್ತದೆ (ಐಚ್ಛಿಕ)

   ನೇರ-ಕೋನವಲ್ಲದ ತಿರುಗುವಿಕೆಗಳಿಗೆ, ಕೈಯಿಂದ ಬರೆದ ಜ್ಯಾಮಿತಿ ಫಂಕ್ಷನ್ — largestInnerRect — ತಿರುಗಿಸಿದ ಬೌಂಡಿಂಗ್ ಬಾಕ್ಸ್‌ನೊಳಗೆ ಹೊಂದುವ ಮೂಲ ಆಸ್ಪೆಕ್ಟ್ ಅನುಪಾತದ ಅತಿ ದೊಡ್ಡ ಅಕ್ಷ-ಜೋಡಿತ ಆಯತವನ್ನು ಲೆಕ್ಕಹಾಕುತ್ತದೆ, ಆದ್ದರಿಂದ ತ್ರಿಕೋನಾಕಾರದ ಖಾಲಿ ಮೂಲೆಗಳನ್ನು ಚಿತ್ರವನ್ನು ವಿರೂಪಗೊಳಿಸದೆ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ.
4. 4
   ಬ್ರೌಸರ್ ಕೋಡೆಕ್ ಫಲಿತಾಂಶವನ್ನು ಎನ್‌ಕೋಡ್ ಮಾಡುತ್ತದೆ

   canvas.toBlob() ಬ್ರೌಸರ್‌ನ ಅಂತರ್ನಿರ್ಮಿತ ಚಿತ್ರ ಎನ್‌ಕೋಡರ್‌ಗೆ ಪಿಕ್ಸೆಲ್ ಡೇಟಾ ನೀಡುತ್ತದೆ, ನೀವು ನೇರವಾಗಿ ಡೌನ್‌ಲೋಡ್ ಮಾಡುವ JPEG (ಆಯ್ಕೆ ಮಾಡಬಹುದಾದ ಗುಣಮಟ್ಟ ಮತ್ತು ಪಾರದರ್ಶಕ ಮೂಲೆಗಳಿಗೆ ಹಿನ್ನೆಲೆ ಫಿಲ್ ಬಣ್ಣ), PNG, ಅಥವಾ WebP Blob ಉತ್ಪಾದಿಸುತ್ತದೆ.

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