🛠️

Whiz Tools

Build • Create • Innovate

బేస్64 చిత్రం డీకోడర్ మరియు వీక్షకుడు | బేస్64 ను చిత్రాలలోకి మార్చండి

బేస్64-కోడ్ చేసిన చిత్రం స్ట్రింగ్స్‌ను తక్షణమే డీకోడ్ చేసి ప్రివ్యూ చేయండి. తప్పు హ్యాండ్లింగ్‌తో JPEG, PNG, GIF మరియు ఇతర సాధారణ ఫార్మాట్లను మద్దతు ఇస్తుంది.

బేస్64 చిత్ర డికోడర్ మరియు వీక్షకుడు

బేస్64-కోడ్ చేసిన చిత్రం స్ట్రింగ్‌ను పేస్ట్ చేసి, చిత్రాన్ని వీక్షించడానికి డికోడ్ చేయండి.

చిత్రం ప్రివ్యూ

కనిపించడానికి చిత్రమేమీ లేదు. దయచేసి బేస్64 స్ట్రింగ్‌ను పేస్ట్ చేయండి మరియు దాన్ని ఆటోమేటిక్‌గా డికోడ్ చేయండి.

JPEG, PNG, GIF మరియు ఇతర సాధారణ చిత్రం ఫార్మాట్లను మద్దతు ఇస్తుంది.

సూచనలు

1. పై టెక్స్ట్ ఏరియాలో బేస్64-కోడ్ చేసిన చిత్రం స్ట్రింగ్‌ను పేస్ట్ చేయండి.

2. మీరు టైప్ చేసినప్పుడు చిత్రాన్ని ఆటోమేటిక్‌గా డికోడ్ చేస్తుంది, లేదా 'చిత్రాన్ని డికోడ్ చేయండి' బటన్‌ను క్లిక్ చేయండి.

3. డికోడ్ చేసిన చిత్రం క్రింద ప్రివ్యూ ప్రాంతంలో కనిపిస్తుంది.

గమనిక: ఉత్తమ ఫలితాల కోసం స్ట్రింగ్ 'data:image/' తో ప్రారంభించాలి, కానీ ఈ పీఠిక లేకుండా స్ట్రింగ్‌లను డికోడ్ చేయడానికి ఈ సాధనం ప్రయత్నిస్తుంది.

📚

డాక్యుమెంటేషన్

Base64 ಚಿತ್ರ ಡಿಕೋಡರ್ ಮತ್ತು ವೀಕ್ಷಕ

ಪರಿಚಯ

Base64 ಒಂದು ಬೈನರಿ-ಟು-ಟೆಕ್ಸ್ಟ್ ಎನ್‌ಕೋಡಿಂಗ್ ಯೋಜನೆಯಾಗಿದೆ, ಇದು ಬೈನರಿ ಡೇಟಾವನ್ನು ASCII ಸ್ಟ್ರಿಂಗ್ ಫಾರ್ಮಾಟ್‌ನಲ್ಲಿ ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಇದು ಸಾಮಾನ್ಯವಾಗಿ HTML, CSS, JavaScript, JSON ಮತ್ತು ಇತರ ಪಠ್ಯಾಧಾರಿತ ಫಾರ್ಮಾಟ್‌ಗಳಲ್ಲಿ ಚಿತ್ರ ಡೇಟಾವನ್ನು ನೇರವಾಗಿ ಅಳವಡಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ, ಅಲ್ಲಿ ಬೈನರಿ ಡೇಟಾ ನೇರವಾಗಿ ಒಳಗೊಂಡಿಲ್ಲ. ಈ ಸಾಧನವು ನೀವು base64-ಎನ್‌ಕೋಡ್ ಮಾಡಿದ ಚಿತ್ರ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಡಿಕೋಡ್ ಮಾಡಲು ಮತ್ತು ಫಲಿತಾಂಶವಾಗಿ ಉತ್ಪನ್ನವಾದ ಚಿತ್ರಗಳನ್ನು ನೇರವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ವೀಕ್ಷಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.

Base64 ಎನ್‌ಕೋಡಿಂಗ್ ಮೂಲ ಬೈನರಿಯ ಹೋಲಿಸಿದರೆ ಡೇಟಾ ಗಾತ್ರವನ್ನು ಸುಮಾರು 33% ಹೆಚ್ಚಿಸುತ್ತದೆ, ಆದರೆ ಇದು ಚಿತ್ರಗಳನ್ನು ಪಠ್ಯಾಧಾರಿತ ದಾಖಲೆಗಳಲ್ಲಿ ನೇರವಾಗಿ ಒಳಗೊಂಡಂತೆ, ಪ್ರತ್ಯೇಕ ಫೈಲ್ ಡೌನ್‌ಲೋಡ್‌ಗಳನ್ನು ಅಗತ್ಯವಿಲ್ಲ. ಇದು ಐಕಾನ್‌ಗಳು, ಲೋಗೋಗಳು ಅಥವಾ ಸರಳ ಗ್ರಾಫಿಕ್‌ಗಳಂತಹ ಸಣ್ಣ ಚಿತ್ರಗಳಿಗೆ ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿರಬಹುದು, ಅಲ್ಲಿ ಅಳವಡಿಸುವ ಸುಲಭತೆ ಗಾತ್ರದ ಹೆಚ್ಚಳಕ್ಕಿಂತ ಹೆಚ್ಚು ಮಹತ್ವದ್ದಾಗಿದೆ.

ನಮ್ಮ Base64 ಚಿತ್ರ ಡಿಕೋಡರ್ ಸಾಧನವು ನೀವು base64-ಎನ್‌ಕೋಡ್ ಮಾಡಿದ ಚಿತ್ರ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಅಂಟಿಸಲು ಮತ್ತು ತಕ್ಷಣವೇ ಡಿಕೋಡ್ ಮಾಡಿದ ಚಿತ್ರವನ್ನು ನೋಡಲು ಸುಲಭವಾದ ಇಂಟರ್ಫೇಸನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು JPEG, PNG, GIF, WebP ಮತ್ತು SVG ಸೇರಿದಂತೆ ಎಲ್ಲಾ ಸಾಮಾನ್ಯ ಚಿತ್ರ ಫಾರ್ಮಾಟ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ ಮತ್ತು ಡೇಟಾ URL ಫಾರ್ಮಾಟ್ ( data:image/... ಪ್ರೀಫಿಕ್ಸ್‌ೊಂದಿಗೆ) ಮತ್ತು ಕಚ್ಚಾ base64 ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.

ತಾಂತ್ರಿಕ ವಿವರಗಳು

Base64 ಎನ್‌ಕೋಡಿಂಗ್ ಫಾರ್ಮಾಟ್

Base64 ಎನ್‌ಕೋಡಿಂಗ್ ಬೈನರಿ ಡೇಟಾವನ್ನು 64 ASCII ಅಕ್ಷರಗಳ ಸಮೂಹದಲ್ಲಿ (A-Z, a-z, 0-9, +, ಮತ್ತು /) ಪರಿವರ್ತಿಸುತ್ತದೆ, = ಅನ್ನು ಪ್ಯಾಡಿಂಗ್‌ಗಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ. ವೆಬ್‌ನಲ್ಲಿ ಚಿತ್ರಗಳಿಗೆ, base64 ಡೇಟಾ ಸಾಮಾನ್ಯವಾಗಿ ಕೆಳಗಿನ ರಚನೆಯೊಂದಿಗೆ ಡೇಟಾ URL ರೂಪದಲ್ಲಿ ರೂಪುಗೊಳ್ಳುತ್ತದೆ:

1data:[<ಮೀಡಿಯಾ ಪ್ರಕಾರ>][;base64],<ಡೇಟಾ>
2

ಉದಾಹರಣೆಗೆ, base64-ಎನ್‌ಕೋಡ್ ಮಾಡಿದ PNG ಚಿತ್ರವು ಹೀಗಿರಬಹುದು:

1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2

ಈ ರೂಪದಲ್ಲಿ ಈ ಭಾಗಗಳು ಇವೆ:

  • data: - URL ಯೋಜನೆ
  • image/png - ಡೇಟಾದ MIME ಪ್ರಕಾರ
  • ;base64 - ಎನ್‌ಕೋಡಿಂಗ್ ವಿಧಾನ
  • , - ಶೀರ್ಷಿಕೆ ಮತ್ತು ಡೇಟಾ ನಡುವಿನ ಡೆಲಿಮಿಟರ್
  • ವಾಸ್ತವ base64-ಎನ್‌ಕೋಡ್ ಮಾಡಿದ ಡೇಟಾ

ಡಿಕೋಡಿಂಗ್ ಪ್ರಕ್ರಿಯೆ

Base64 ಚಿತ್ರ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಡಿಕೋಡ್ ಮಾಡುವಾಗ, ಈ ಹಂತಗಳು ಸಂಭವಿಸುತ್ತವೆ:

  1. ಇದು ಡೇಟಾ URL ಪ್ರೀಫಿಕ್ಸ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆಯೇ ಎಂದು ಗುರುತಿಸಲು ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಪಾರ್ಸ್ ಮಾಡಲಾಗುತ್ತದೆ
  2. ಪ್ರೀಫಿಕ್ಸ್ ಇದ್ದರೆ, ಚಿತ್ರ ರೂಪವನ್ನು ನಿರ್ಧರಿಸಲು MIME ಪ್ರಕಾರವನ್ನು ತೆಗೆಯಲಾಗುತ್ತದೆ
  3. base64 ಡೇಟಾ ಭಾಗವನ್ನು ಪ್ರತ್ಯೇಕಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಬೈನರಿ ಡೇಟಾಗೆ ಡಿಕೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ
  4. ಬೈನರಿ ಡೇಟಾವನ್ನು ಚಿತ್ರವಾಗಿ ಪ್ರದರ್ಶಿಸಲು ಬ್ಲಾಬ್ ಅಥವಾ ಆಬ್ಜೆಕ್ಟ್ URL ಗೆ ಪರಿವರ್ತಿಸಲಾಗುತ್ತದೆ

ನೀವು ಡೇಟಾ URL ಪ್ರೀಫಿಕ್ಸ್ ಅನ್ನು ಒಳಗೊಂಡಿಲ್ಲದಂತೆ, ಡಿಕೋಡರ್ ಅದನ್ನು ಕಚ್ಚಾ base64 ಡೇಟಾ ಎಂದು ಪರಿಗಣಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ ಮತ್ತು ಡಿಕೋಡ್ ಮಾಡಿದ ಬೈನರಿ ಶೀರ್ಷಿಕೆಯಿಂದ ಚಿತ್ರ ಪ್ರಕಾರವನ್ನು ಊಹಿಸುತ್ತದೆ ಅಥವಾ PNG ಗೆ ಡೀಫಾಲ್ಟ್ ಆಗಿರುತ್ತದೆ.

ಬೆಂಬಲಿತ ಚಿತ್ರ ರೂಪಗಳು

ಈ ಸಾಧನವು ಎಲ್ಲಾ ಸಾಮಾನ್ಯ ವೆಬ್ ಚಿತ್ರ ರೂಪಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ:

ರೂಪMIME ಪ್ರಕಾರಸಾಮಾನ್ಯ ಬಳಕೆ ಪ್ರಕರಣಗಳು
JPEGimage/jpegಫೋಟೋಗಳು, ಹಲವಾರು ಬಣ್ಣಗಳೊಂದಿಗೆ ಸಂಕೀರ್ಣ ಚಿತ್ರಗಳು
PNGimage/pngಪಾರದರ್ಶಕತೆಯನ್ನು ಅಗತ್ಯವಿರುವ ಚಿತ್ರಗಳು, ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳು, ಗ್ರಾಫಿಕ್‌ಗಳು
GIFimage/gifಸರಳ ಆನಿಮೇಶನ್‌ಗಳು, ನಿರ್ದಿಷ್ಟ ಬಣ್ಣದ ಚಿತ್ರಗಳು
WebPimage/webpJPEG/PNG ಗೆ ಹೋಲಿಸಿದ ಉತ್ತಮ ಒತ್ತಣದೊಂದಿಗೆ ಆಧುನಿಕ ರೂಪ
SVGimage/svg+xmlವೆಕ್ಟರ್ ಗ್ರಾಫಿಕ್‌ಗಳು, ವಿಸ್ತಾರಗೊಳ್ಳುವ ಐಕಾನ್‌ಗಳು ಮತ್ತು ಚಿತ್ರಣಗಳು

ಬಳಕೆ ಪ್ರಕರಣಗಳು

Base64-ಎನ್‌ಕೋಡ್ ಮಾಡಿದ ಚಿತ್ರಗಳು ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ಇತರ ಕ್ಷೇತ್ರಗಳಲ್ಲಿ ಹಲವಾರು ವ್ಯವಹಾರಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಹೊಂದಿವೆ:

  1. HTML/CSS/JS ನಲ್ಲಿ ಚಿತ್ರಗಳನ್ನು ಅಳವಡಿಸುವುದು: ಸಣ್ಣ ಚಿತ್ರಗಳನ್ನು ನಿಮ್ಮ ಕೋಡ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ಒಳಗೊಂಡಂತೆ HTTP ವಿನಂತಿಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ಇದು ಪುಟದ ಲೋಡ್ ಸಮಯವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.

  2. ಇಮೇಲ್ ಟೆಂಪ್ಲೇಟುಗಳು: ಹೊರಗಿನ ಚಿತ್ರಗಳನ್ನು ಡೀಫಾಲ್ಟ್‌ನಲ್ಲಿ ತಡೆಹಿಡಿಯುವ ಇಮೇಲ್ ಕ್ಲೈಂಟ್‌ಗಳಲ್ಲಿ ಚಿತ್ರಗಳು ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

  3. ಒಂದು ಫೈಲ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು: ಎಲ್ಲ ಸಂಪತ್ತುಗಳನ್ನು ಒಂದೇ ಫೈಲ್‌ನಲ್ಲಿ ಅಳವಡಿಸುವ ಸ್ವಾಯತ್ತ HTML ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸುತ್ತದೆ.

  4. API ಪ್ರತಿಸ್ಪಂದನೆಗಳು: ಪ್ರತ್ಯೇಕ ಚಿತ್ರ ಎಂಡ್ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಅಗತ್ಯವಿಲ್ಲದೆ JSON ಪ್ರತಿಸ್ಪಂದನೆಗಳಲ್ಲಿ ನೇರವಾಗಿ ಚಿತ್ರ ಡೇಟಾವನ್ನು ಒಳಗೊಂಡಿದೆ.

  5. CSS ನಲ್ಲಿ ಡೇಟಾ URIs: ಸಣ್ಣ ಐಕಾನ್‌ಗಳು ಮತ್ತು ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು CSS ಫೈಲ್‌ಗಳಲ್ಲಿ ನೇರವಾಗಿ ಅಳವಡಿಸುತ್ತದೆ.

  6. ಕ್ಯಾನ್ವಾಸ್ ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್‌ಗಳು: ಕ್ಯಾನ್ವಾಸ್ ಚಿತ್ರ ಡೇಟಾವನ್ನು ಉಳಿಸಲು ಮತ್ತು ವರ್ಗಾಯಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.

  7. ಆಫ್‌ಲೈನ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು: localStorage ಅಥವಾ IndexedDB ನಲ್ಲಿ ಚಿತ್ರಗಳನ್ನು ಪಠ್ಯ ಸ್ಟ್ರಿಂಗ್‌ಗಳಂತೆ ಸಂಗ್ರಹಿಸುತ್ತದೆ.

ಕಾರ್ಯಕ್ಷಮತೆ ಪರಿಗಣನೆಗಳು

Base64 ಎನ್‌ಕೋಡಿಂಗ್ ಸುಲಭತೆಯನ್ನು ಒದಗಿಸುತ್ತಿರುವಾಗ, ಇದು ವ್ಯಾಪಾರದೊಂದಿಗೆ ಬರುತ್ತದೆ:

  • ಗಾತ್ರದ ಹೆಚ್ಚಳ: Base64 ಎನ್‌ಕೋಡಿಂಗ್ ಡೇಟಾ ಗಾತ್ರವನ್ನು ಸುಮಾರು 33% ಹೆಚ್ಚಿಸುತ್ತದೆ.
  • ಬ್ರೌಸರ್ ಕ್ಯಾಶಿಂಗ್ ಇಲ್ಲ: ಅಳವಡಿಸಿದ ಚಿತ್ರಗಳನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಕ್ಯಾಶ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ, ಹೊರಗಿನ ಚಿತ್ರ ಫೈಲ್‌ಗಳಂತೆ.
  • ಪಾರ್ಸಿಂಗ್ ಓವರ್ಹೆಡ್: ಬ್ರೌಸರ್‌ಗಳು ಡಿಕೋಡ್ ಮಾಡುವ ಮೊದಲು base64 ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಡಿಕೋಡ್ ಮಾಡಬೇಕು.
  • ನಿರ್ವಹಣಾ ಸವಾಲುಗಳು: ಅಳವಡಿಸಿದ ಚಿತ್ರಗಳನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡುವುದು ಪ್ರತ್ಯೇಕ ಫೈಲ್‌ಗಳಿಗಿಂತ ಕಷ್ಟವಾಗಿದೆ.

ಆಪ್ಟಿಮಲ್ ಕಾರ್ಯಕ್ಷಮತೆಯಿಗಾಗಿ, base64 ಎನ್‌ಕೋಡಿಂಗ್ ಸಾಮಾನ್ಯವಾಗಿ ಸಣ್ಣ ಚಿತ್ರಗಳಿಗೆ (10KB ಕ್ಕಿಂತ ಕಡಿಮೆ) ಮಾತ್ರ ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ದೊಡ್ಡ ಚಿತ್ರಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರತ್ಯೇಕ ಫೈಲ್‌ಗಳಂತೆ ಉತ್ತಮವಾಗಿ ಸೇವೆ ನೀಡುತ್ತವೆ, ಅವುಗಳನ್ನು ಸರಿಯಾಗಿ ಕ್ಯಾಶ್ ಮತ್ತು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಬಹುದು.

ಪರ್ಯಾಯಗಳು

ವಿವಿಧ ಬಳಕೆ ಪ್ರಕರಣಗಳಿಗಾಗಿ base64 ಎನ್‌ಕೋಡಿಂಗ್‌ಗೆ ಹಲವಾರು ಪರ್ಯಾಯಗಳು ಇವೆ:

  1. SVG ಅಳವಡಿಸುವಿಕೆ: ವೆಕ್ಟರ್ ಗ್ರಾಫಿಕ್‌ಗಳಿಗೆ, inline SVG ಸಾಮಾನ್ಯವಾಗಿ base64-ಎನ್‌ಕೋಡ್ ಮಾಡಿದ SVG ಗೆ ಹೋಲಿಸಿದರೆ ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಲವಚಿಕತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.

  2. WebP ಮತ್ತು ಆಧುನಿಕ ಚಿತ್ರ ರೂಪಗಳು: ಇವು base64-ಎನ್‌ಕೋಡ್ ಮಾಡಿದ JPEG/PNG ಗೆ ಹೋಲಿಸಿದ ಉತ್ತಮ ಒತ್ತಣವನ್ನು ಒದಗಿಸುತ್ತವೆ.

  3. ಚಿತ್ರ ಸ್ಪ್ರೈಟ್ಸ್: CSS ಸ್ಥಾನವನ್ನು ಬಳಸಿಕೊಂಡು ಒಂದೇ ಫೈಲ್‌ನಲ್ಲಿ ಹಲವಾರು ಸಣ್ಣ ಚಿತ್ರಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು.

  4. CDNs (ಕಂಟೆಂಟ್ ಡೆಲಿವರಿ ನೆಟ್ವರ್ಕ್‌ಗಳು): ಉತ್ಪಾದನಾ ಸ್ಥಳಗಳಿಗೆ, ಉತ್ತಮವಾಗಿ ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿದ ಚಿತ್ರಗಳನ್ನು CDN ನಿಂದ ಸೇವಿಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ.

  5. ಡೇಟಾ ಒತ್ತಣೆ: ದೊಡ್ಡ ಪ್ರಮಾಣದ ಬೈನರಿ ಡೇಟಾವನ್ನು ವರ್ಗಾಯಿಸಲು, gzip ಅಥವಾ Brotliಂತಹ ವಿಶೇಷ ಒತ್ತಣ ಅಲ್ಗಾರಿದಮ್‌ಗಳು base64 ಗೆ ಹೋಲಿಸಿದರೆ ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ.

ಕೋಡ್ ಉದಾಹರಣೆಗಳು

ಇಲ್ಲಿ ವಿವಿಧ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳಲ್ಲಿ base64-ಎನ್‌ಕೋಡ್ ಮಾಡಿದ ಚಿತ್ರಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ ಉದಾಹರಣೆಗಳು ಇವೆ:

1// JavaScript (ಬ್ರೌಸರ್) ನಲ್ಲಿ ಚಿತ್ರವನ್ನು base64 ಗೆ ಪರಿವರ್ತಿಸಲು
2function imageToBase64(imgElement) {
3  const canvas = document.createElement('canvas');
4  canvas.width = imgElement.width;
5  canvas.height = imgElement.height;
6  
7  const ctx = canvas.getContext('2d');
8  ctx.drawImage(imgElement, 0, 0);
9  
10  // ಡೇಟಾ URL (base64 ಸ್ಟ್ರಿಂಗ್) ಆಗಿ ಪಡೆಯಿರಿ
11  return canvas.toDataURL('image/png');
12}
13
14// base64 ಚಿತ್ರವನ್ನು ಪ್ರದರ್ಶಿಸಲು
15function displayBase64Image(base64String) {
16  const img = new Image();
17  
18  // ಡೇಟಾ URL ಪ್ರೀಫಿಕ್ಸ್ ಇಲ್ಲದ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಿ
19  if (!base64String.startsWith('data:')) {
20    base64String = `data:image/png;base64,${base64String}`;
21  }
22  
23  img.src = base64String;
24  document.body.appendChild(img);
25}
26

HTML ಕಾರ್ಯಗತಗೊಳಣೆ

ಇಲ್ಲಿ base64 ಚಿತ್ರವನ್ನು ನೇರವಾಗಿ HTML ನಲ್ಲಿ ಅಳವಡಿಸುವ ವಿಧಾನವಿದೆ:

1<!-- HTML ನಲ್ಲಿ base64 ಚಿತ್ರವನ್ನು ನೇರವಾಗಿ ಅಳವಡಿಸುವುದು -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 ಎನ್‌ಕೋಡ್ ಮಾಡಿದ ಚಿತ್ರ">
3
4<!-- base64 ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ಬಳಸಿಕೊಂಡು CSS -->
5<style>
6.base64-bg {
7  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
8  width: 100px;
9  height: 100px;
10}
11</style>
12<div class="base64-bg"></div>
13

ಇತಿಹಾಸ

Base64 ಎನ್‌ಕೋಡಿಂಗ್ 1970ರ ದಶಕದಲ್ಲಿ ಇಲೆಕ್ಟ್ರಾನಿಕ್ ಮೇಲ್ ವ್ಯವಸ್ಥೆಗಳ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿನ ಮೂಲಗಳನ್ನು ಹೊಂದಿದೆ. ಇದು ASCII ಪಠ್ಯ ಮಾತ್ರ ಹ್ಯಾಂಡಲ್ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ವ್ಯವಸ್ಥೆಗಳ ಮೂಲಕ ಬೈನರಿ ಡೇಟಾವನ್ನು ಪ್ರಸಾರ ಮಾಡುವ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.

ಎನ್‌ಕೋಡಿಂಗ್ ಯೋಜನೆಯು 1987ರಲ್ಲಿ RFC 989 ಅನ್ನು ಪ್ರಕಟಿಸುವ ಮೂಲಕ ಅಧಿಕೃತಗೊಳಿಸಲಾಯಿತು, ಇದು ಪ್ರೈವೆಸಿ ಎನ್‌ಹಾನ್ಸ್‌ಡ್ ಮೇಲ್ (PEM) ಪ್ರಮಾಣವನ್ನು ನಿರ್ಧರಿಸಿತು. ಇದನ್ನು ನಂತರ RFC 1421 ಮತ್ತು ಇತರ ಸಂಬಂಧಿತ ಪ್ರಮಾಣಗಳಲ್ಲಿ ನವೀಕರಿಸಲಾಯಿತು. "base64" ಎಂಬ ಶಬ್ದವು 64 ವಿಭಿನ್ನ ASCII ಅಕ್ಷರಗಳನ್ನು ಬೈನರಿ ಡೇಟಾವನ್ನು ಪ್ರತಿನಿಧಿಸಲು ಬಳಸುವ ಕಾರಣದಿಂದ ಬಂದಿದೆ.

ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ದೃಷ್ಟಿಕೋನದಲ್ಲಿ, base64-ಎನ್‌ಕೋಡ್ ಮಾಡಿದ ಚಿತ್ರಗಳು 1998ರಲ್ಲಿ RFC 2397 ನಲ್ಲಿ ಡೇಟಾ URIs ಅನ್ನು ಪ್ರಸ್ತಾಪಿಸುವ ಮೂಲಕ ಜನಪ್ರಿಯತೆಯನ್ನು ಗಳಿಸಿದರು. ಇದು ಬೈನರಿ ಡೇಟಾವನ್ನು HTML, CSS ಮತ್ತು ಇತರ ವೆಬ್ ದಾಖಲೆಗಳಲ್ಲಿ ನೇರವಾಗಿ ಒಳಗೊಂಡಂತೆ ಅನುಮತಿಸಿತು.

ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ base64-ಎನ್‌ಕೋಡ್ ಮಾಡಿದ ಚಿತ್ರಗಳ ಬಳಕೆ 2000ರ ಮಧ್ಯದಲ್ಲಿ ಹೆಚ್ಚು ವ್ಯಾಪಕವಾಗಿ ಬಳಸುವಂತೆ ಆಯಿತು, ಏಕೆಂದರೆ ಅಭಿವೃದ್ಧಿಪ್ರದಾತರು HTTP ವಿನಂತಿಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಮತ್ತು ಪುಟದ ಲೋಡ್ ಸಮಯವನ್ನು ಸುಧಾರಿಸಲು ಮಾರ್ಗಗಳನ್ನು ಹುಡುಕಿದರು. ಈ ತಂತ್ರವನ್ನು ಮೊಬೈಲ್ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಉದ್ದೇಶಕ್ಕಾಗಿ ಹೆಚ್ಚು ಸ್ವೀಕರಿಸಲಾಯಿತು, ಅಲ್ಲಿ ನಿಧಾನಗತಿಯ ಮೊಬೈಲ್ ಸಂಪರ್ಕದಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.

ಇಂದು, base64 ಎನ್‌ಕೋಡಿಂಗ್ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಮಹತ್ವದ ಸಾಧನವಾಗಿರುತ್ತದೆ, ಆದರೆ ಅದರ ಬಳಕೆ ಹೆಚ್ಚು ಗುರಿ-ನಿರ್ದಿಷ್ಟವಾಗಿದೆ ಏಕೆಂದರೆ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಅಭಿವೃದ್ಧಿಯಾಗಿ ಬಂದಿವೆ. ಆಧುನಿಕ ವಿಧಾನಗಳು ಸಾಮಾನ್ಯವಾಗಿ base64 ಎನ್‌ಕೋಡಿಂಗ್ ಅನ್ನು ಸಣ್ಣ, ಪ್ರಮುಖ ಚಿತ್ರಗಳಿಗೆ ಮಾತ್ರ ಬಳಸುವುದು, ಆದರೆ ದೊಡ್ಡ ಸಂಪತ್ತುಗಳನ್ನು ಉತ್ತಮವಾಗಿ ವಿತರಣಾ ವಿಧಾನಗಳಂತೆ HTTP/2 ಬಳಸುವುದು.

ಉಲ್ಲೇಖಗಳು

  1. RFC 4648: The Base16, Base32, and Base64 Data Encodings
  2. RFC 2397: The "data" URL scheme
  3. MDN ವೆಬ್ ಡಾಕ್‌ಗಳು: ಡೇಟಾ URIs
  4. CSS-Tricks: ಡೇಟಾ URIs
  5. Base64 ಚಿತ್ರ ಎನ್‌ಕೋಡರ್
  6. ನಾನು ಬಳಸಬಹುದೇ: ಡೇಟಾ URIs
  7. ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆ: ಚಿತ್ರಗಳನ್ನು Base64 ಎನ್‌ಕೋಡ್ ಮಾಡಲು ಯಾವಾಗ (ಮತ್ತು ಯಾವಾಗ ಇಲ್ಲ)
🔗

సంబంధిత సాధనాలు

మీ పని ప్రవాహానికి ఉపయోగకరమైన మరిన్ని సాధనాలను కనుగొనండి

బేస్64 ఎన్‌కోడర్ మరియు డీకోడర్: టెక్స్ట్‌ను బేస్64కి/బేస్64 నుండి మార్చండి

ఈ సాధనాన్ని ప్రయత్నించండి

బైనరీ-డెసిమల్ కన్వర్టర్: సంఖ్యా వ్యవస్థల మధ్య మార్పిడి చేయండి

ఈ సాధనాన్ని ప్రయత్నించండి

పరీక్ష మరియు ధృవీకరణ కోసం IBAN ఉత్పత్తి మరియు ధృవీకరించే సాధనం

ఈ సాధనాన్ని ప్రయత్నించండి

CSS మినిఫైయర్ టూల్: ఆన్‌లైన్‌లో CSS కోడ్‌ను ఆప్టిమైజ్ & కంప్రెస్ చేయండి

ఈ సాధనాన్ని ప్రయత్నించండి

సంఖ్య బేస్ మార్పిడి: బైనరీ, డెసిమల్, హెక్స్ & కస్టమ్ బేస్‌లు

ఈ సాధనాన్ని ప్రయత్నించండి

పరీక్షల కోసం చట్టపరమైన CPF సంఖ్యలను ఉత్పత్తి చేయండి

ఈ సాధనాన్ని ప్రయత్నించండి

జావాస్క్రిప్ట్ మినిఫైయర్: ఫంక్షనాలిటీని కోల్పోకుండా కోడ్ పరిమాణాన్ని తగ్గించండి

ఈ సాధనాన్ని ప్రయత్నించండి