DEMO預(yù)覽

圖片在線轉(zhuǎn)換base64

---

圖片在線轉(zhuǎn)換base64—-實(shí)現(xiàn)方法

采用 FileReader 對(duì)象的 readAsDataURL 方法進(jìn)行圖片的轉(zhuǎn)換！

---

JS實(shí)現(xiàn)

獲取上傳按鈕，文字按鈕，顯示base64的結(jié)果，預(yù)覽按鈕，預(yù)覽圖片顯示；

判斷當(dāng)前瀏覽器是否支持 FileReader 對(duì)象；

給上傳按鈕綁定 onchange 事件，判斷上傳的是圖片文件；

清空預(yù)覽圖片和實(shí)例結(jié)果；

new 一個(gè) FileReader 對(duì)象，在其加載完成時(shí)將該對(duì)的 result 賦值給‘顯示base64的結(jié)果’的 textarea 中；

執(zhí)行 readAsDataURL 方法，傳入files[0]；

綁定預(yù)覽結(jié)果！

---

(function(){// 獲取上傳按鈕，文字按鈕，顯示base64的結(jié)果，預(yù)覽按鈕，預(yù)覽圖片顯示var ruiUploadFile = document.getElementById('rui-upload-file');var uploadBtn = document.getElementById('upload-btn');var ruiBase64Result = document.getElementById('rui-base64-result');var previewImgBtn = document.getElementById('preview-img-btn');var ruiPreviewImg = document.getElementById('rui-preview-img');// 判斷瀏覽器是否支持 FileReaderwindow.onload = function(){if ( typeof(FileReader) === 'undefined' ){uploadBtn.innerHTML = '該瀏覽器不支持 FileReader，請(qǐng)更新您的瀏覽器！'ruiUploadFile.disabled = true;}}// 上傳按鈕綁定 onchange 事件ruiUploadFile.onchange = function(){var file = this.files[0];if(!/image\/\w+/.test(file.type)){ alert("請(qǐng)確保文件為圖像類型"); return false; }ruiBase64Result.value = '';ruiPreviewImg.src = '';var r = new FileReader(); r.onload = function(){ruiBase64Result.value = r.result;}r.readAsDataURL(file);}// 預(yù)覽按鈕綁定 click 事件previewImgBtn.addEventListener('click',function(){ruiPreviewImg.src = ruiBase64Result.value;},false); }())

---

DOM結(jié)構(gòu)

上傳按鈕；

顯示轉(zhuǎn)換結(jié)果；

預(yù)覽按鈕；

預(yù)覽圖片的顯示位置。

---

// 上傳按鈕 <div class="rui-upload-btn"><input type="file" id="rui-upload-file" value="上傳要轉(zhuǎn)換成base64的圖片"><span id="upload-btn">上傳要轉(zhuǎn)換成base64的圖片</span> </div> // 顯示轉(zhuǎn)換結(jié)果 <div class="rui-base64-box"><textarea name="rui-base64-result" id="rui-base64-result">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAC3klEQVRoQ+2YX0hTcRTHv9tqq2hWOlcINhNahJURQf9olBlREBRBBRGRSrSokKKVFVtGhPbk6qFBPUQUgT1UEPjiQ0KCEy0SZSVyM2s2Fdsauc2teePeMARLd+X3az/ufvdtcH6H7+d8zz2/c6d5talIRAY9Gg6scre5wyo3GNxh7rDKKsBbWmWGTsLhDnOHVVYB3tIqM5QPLd7SvKVVVgEqLb2iqhpL9h5IuVRjozEkR0YQbPfCX/8I4a6OlM8qDWQCeKLon+Hv+Ohxo/95vVKWlOKpA4c73k4p3mBejOwNW2AsWgOt3iCLHh0MoLvmGr61vE4JQkkQdeBQWwvena2YVlPevoNYZq/ELGMWIIoYbGyAz+WY9pzSAGaAJeErq2/BXLob0GgQ+STgTflhJCMRpUxTxjMFbDl+EpZjJ6DR6xEfGoDvehVC7a3qBc4/UoaCilPQGuZkBnBGtXTO1u2wXnBCb8pV99DK3myDuWQXTLYS6OYb5fc11v9FntA0FhDqQ0vRxBFFRPt60eOupXIHS1qYABbjccS++jHU1Ii+h/eIX0UTi04d+G+bVtbqtcjdVorZi3Lk9/VHtw+Cx42gt1lRQ8wkmDrwvzateQWFsDpcWFC8Tl40EsFhCHfrEHj5bCYcKZ9JG7CkUIJeVXsHc/Mt1Hfo8YqkFVgSkbf/EArtlX8mdKjNi85LZ6i9x2kHlndoVw3MO/cAWi3ERAKfnzyQPxFpPEwAT2rtgQDe37hMfI/+L9dSqp+HS4+Ww1Jml/doaXIPNzeh03GauMlMODxOVXz7Phau3yj/HItGIXjq4H/6mCg0U8Am2w5YLzp/388AIkIPuq6eQ6RXIAbNFLBEtfz8FUj/fkCnA5JJBBpe4MNNJ9vAxNRRSETFYQo6iaXkwMRKyWgi7jCjxhCTxR0mVkpGE3GHGTWGmCzuMLFSMpqIO8yoMcRkcYeJlZLRRNxhRo0hJivjHP4F3rC+gECIwg0AAAAASUVORK5CYII=</textarea> </div> // 預(yù)覽按鈕 <div class="rui-upload-btn rui-btng" id="preview-img-btn">預(yù)覽圖片</div> // 預(yù)覽圖片的顯示位置 <div class="rui-img-preview"><img id="rui-preview-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAC3klEQVRoQ+2YX0hTcRTHv9tqq2hWOlcINhNahJURQf9olBlREBRBBRGRSrSokKKVFVtGhPbk6qFBPUQUgT1UEPjiQ0KCEy0SZSVyM2s2Fdsauc2teePeMARLd+X3az/ufvdtcH6H7+d8zz2/c6d5talIRAY9Gg6scre5wyo3GNxh7rDKKsBbWmWGTsLhDnOHVVYB3tIqM5QPLd7SvKVVVgEqLb2iqhpL9h5IuVRjozEkR0YQbPfCX/8I4a6OlM8qDWQCeKLon+Hv+Ohxo/95vVKWlOKpA4c73k4p3mBejOwNW2AsWgOt3iCLHh0MoLvmGr61vE4JQkkQdeBQWwvena2YVlPevoNYZq/ELGMWIIoYbGyAz+WY9pzSAGaAJeErq2/BXLob0GgQ+STgTflhJCMRpUxTxjMFbDl+EpZjJ6DR6xEfGoDvehVC7a3qBc4/UoaCilPQGuZkBnBGtXTO1u2wXnBCb8pV99DK3myDuWQXTLYS6OYb5fc11v9FntA0FhDqQ0vRxBFFRPt60eOupXIHS1qYABbjccS++jHU1Ii+h/eIX0UTi04d+G+bVtbqtcjdVorZi3Lk9/VHtw+Cx42gt1lRQ8wkmDrwvzateQWFsDpcWFC8Tl40EsFhCHfrEHj5bCYcKZ9JG7CkUIJeVXsHc/Mt1Hfo8YqkFVgSkbf/EArtlX8mdKjNi85LZ6i9x2kHlndoVw3MO/cAWi3ERAKfnzyQPxFpPEwAT2rtgQDe37hMfI/+L9dSqp+HS4+Ww1Jml/doaXIPNzeh03GauMlMODxOVXz7Phau3yj/HItGIXjq4H/6mCg0U8Am2w5YLzp/388AIkIPuq6eQ6RXIAbNFLBEtfz8FUj/fkCnA5JJBBpe4MNNJ9vAxNRRSETFYQo6iaXkwMRKyWgi7jCjxhCTxR0mVkpGE3GHGTWGmCzuMLFSMpqIO8yoMcRkcYeJlZLRRNxhRo0hJivjHP4F3rC+gECIwg0AAAAASUVORK5CYII=" alt=""> </div>

---

CSS樣式表

.rui-upload-btn{display: inline-block;border: 1px solid #ccc;font-size: 15px;color: #888;background-color: #eee;border-radius: 3px;height: 40px;line-height: 40px;padding: 0 10px;position: relative; } #rui-upload-file{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 2;opacity: 0; } #rui-base64-result{width: 100%;height: 300px;resize: none;border-radius: 3px;outline: medium;box-sizing: border-box;padding: 10px; } .rui-base64-box{margin: 20px auto; } .rui-img-preview{border: 1px solid #ccc;border-radius: 3px;box-sizing: border-box;padding: 10px;margin: 20px auto; } .rui-btng{background-color: lightgreen;border-color: lightgreen;color: #fff; }

---

總結(jié)

通過整個(gè)流程可以看出，FileReader 對(duì)象是先將圖片轉(zhuǎn)化為base64，然后再進(jìn)行的預(yù)覽，由此可以知，該對(duì)象還能制作前端的圖片預(yù)覽功能！

---

DEMO預(yù)覽

圖片在線轉(zhuǎn)換base64

---

DEMO下載

我的博客，歡迎交流！

我的CSDN博客，歡迎交流！

微信小程序?qū)?/p>

前端筆記專欄

微信小程序?qū)崿F(xiàn)部分高德地圖功能的DEMO下載

微信小程序?qū)崿F(xiàn)MUI的部分效果的DEMO下載

微信小程序?qū)崿F(xiàn)MUI的GIT項(xiàng)目地址

微信小程序?qū)嵗斜?/p>

前端筆記列表

游戲列表

轉(zhuǎn)載于:https://www.cnblogs.com/linewman/p/9918447.html

總結(jié)

以上是生活随笔為你收集整理的图片在线转换base64的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。