Code chuyển đổi hình ảnh sang chuỗi data base64
📅 — 👀 1270 — 👦Khi thiết kế website, chúng ta có thể tối ưu hóa website bằng nhiều cách, một trong cách đó theo mình thấy là chuyển đổi dữ liệu hình ảnh như logo, icon,... (nói chung là các hình ảnh thường dùng trong website) thành chuỗi data base64. Mời các bạn xem và tìm hiểu về tính năng này bên dưới.
Đây là data base64 của hình ảnh bên trên:
data:image/jpeg;base64,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
Hình ảnh dạng base64 là hình ảnh đã được mã hóa thành dạng chuỗi data. Với hình ảnh dạng này thì bạn không cần có đường truyền mạng thì vẫn load được hình ảnh.
Ưu điểm :
- Load nhanh vì hình ảnh là dạng chuỗi dữ liệu.
- Vẫn hiển thị hình ảnh khi không kết nối Internet (Bạn hãy ngắt mạng và click vào đây để xem demo)
- Không phụ thuộc vào link hình ảnh (có 1 số plugin dùng cái này, ví dụ JWPlayer....)
Khuyết điểm :
- Do base64 là dạng chuỗi data nên hình ảnh càng lớn thì chuỗi dữ liệu sẽ càng dài -> dẫn tới khó xem trong thiết kế code.
- HTML + JS
- Code by ThichCode.NET
<input id="inputFileToLoad" onchange="encodeImageFileAsURL();" type="file" /> <div id="imgTest"></div> <h3> String data from Image</h3> <textarea id="ket_qua" style="height: 300px; width: 100%;"></textarea> <script type="text/javascript"> function encodeImageFileAsURL() { var filesSelected = document.getElementById("inputFileToLoad").files; if (filesSelected.length > 0) { var fileToLoad = filesSelected[0]; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent) { var srcData = fileLoadedEvent.target.result; // <--- data: base64 var newImage = document.createElement('img'); newImage.src = srcData; document.getElementById("imgTest").innerHTML = newImage.outerHTML; $("#ket_qua").val(newImage.src); } fileReader.readAsDataURL(fileToLoad); } } </script>
//Code JAVASCRIPT
📁 Code Demo
🔖