Komentar: Bahkan jika gambar sebaris dikodekan menjadi base64, keuntungannya adalah dapat mengurangi permintaan HTTP, tetapi kerugiannya adalah bahwa ia tidak dapat di -cache di seluruh domain. Gunakan fungsi ReadAsDataurl di HTML5 File API. Ini adalah kode yang mengubah file menjadi base64.
Baru saja bersentuhan dengan konsep gambar inline. Bahkan jika gambar yang dilapisi dikodekan ke dalam base64, melihat kode berikut, itu adalah masalah inline.Ini dapat mengurangi permintaan HTTP, tetapi kerugiannya adalah tidak dapat di -cache di seluruh domain!
<img src = "data: gambar/jpeg; base64,/9j/4qqsrx ...">
Lalu bagaimana cara mengubah gambar menjadi base64 online
Jika Anda hanya mengandalkan JavaScript sederhana, Anda memiliki masalah izin, dan Anda tidak mengizinkan file file atau folder lokal untuk beroperasi untuk masalah keamanan
Sekarang HTML5 akan datang ke Baidu, ada banyak informasi tentang Cina dan banyak dokumen lainnya untuk W3C
Sekarang kami menggunakan fungsi ReadAsDataurl di file API HTML5, yang merupakan file konversi ke pengkodean Base64.
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<iteme> Tes file HTML5 sederhana untuk PIC2Base64 </iteme>
<tyle>
</tyle>
<script>
window.onload = function () {
var input = document.geteLementById ("demo_input");
var result = document.geteLementById ("result");
var img_area = document.getElementById ("img_area");
if (typeof (filereader) === 'tidak terdefinisi') {
result.innerhtml = "Maaf, browser Anda tidak mendukung filereader, silakan gunakan browser modern untuk beroperasi!";
input.setAttribute ('dinonaktifkan', 'dinonaktifkan');
} kalau tidak {
input.addeventListener ('ubah', readfile, false);}
}
fungsi readfile () {
var file = this.files [0];
// Di sini kami menilai jenisnya jika itu bukan gambar, lalu kembalikan dan hapus dan unggah file apa pun
if (!/image /// w+/. test (file.type)) {
peringatan ("Pastikan file adalah tipe gambar");
mengembalikan false;
}
var reader = new filereader ();
reader.readasdataurl (file);
reader.onload = function (e) {
result.innerHtml = '<img src = "'+this.result+'" />';
img_area.innerHtml = '<div> gambar tag IMG TAG: </div> <img src = "'+this.result+'" />';
}
}
</script>
</head>
<body>
<input type = "file" value = "sdgsdg" />
<Baris TextArea = 30 cols = 300> </pextarea>
<p> </p>
</body>
</html>