js如何獲取圖片url的Blob值并預(yù)覽示例代碼
更新時間：2019年03月07日 08:40:36 作者：Tiac
這篇文章主要給大家介紹了關(guān)于js如何獲取圖片url的Blob值并預(yù)覽的相關(guān)資料，文中通過示例代碼以及圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
前言
Blob 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)。File 接口基于Blob，繼承了 blob 的功能并將其擴展使其支持用戶系統(tǒng)上的文件。
本文主要給大家介紹了關(guān)于js獲取圖片url的Blob值并預(yù)覽的相關(guān)內(nèi)容，下面話不多說了，來一起看看詳細(xì)的介紹吧
方法如下
1）使用 XMLHttpRequest 對象獲取圖片url的Blob值
//獲取圖片的Blob值
function getImageBlob(url, cb) {
var xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.responseType = "blob";
xhr.onload = function() {
if (this.status == 200) {
if(cb) cb(this.response);
}
};
xhr.send();
}
注意這里的XMLHttpRequest必須使用異步模式，同步模式不能設(shè)置 responseType = "blob"
2）使用 FileReader 對象獲取圖片 Blob 對象的 data 數(shù)據(jù)
function preView(url){
let reader = new FileReader();
getImageBlob( url , function(blob){
reader.readAsDataURL(blob);
});
reader.onload = function(e) {
var img = document.createElement("img");
img.src = e.target.result;
document.body.appendChild(img);
}
}
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
JS實現(xiàn)在文本指定位置插入內(nèi)容的簡單示例
下面小編就為大家分享一篇JS實現(xiàn)在文本指定位置插入內(nèi)容的簡單示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
本文詳細(xì)向大家介紹了javascript變量聲明，并通過示例進(jìn)行了具體分析，是篇非常不錯的文章，這里推薦給剛?cè)腴T的jser。2014-11-11
如何用JavaScript檢測當(dāng)前瀏覽器是無頭瀏覽器
這篇文章主要介紹了如何用JavaScript檢測當(dāng)前瀏覽器是無頭瀏覽器，對無頭瀏覽器感興趣的同學(xué)，可以參考一下2021-04-04
javascript設(shè)計模式 – 組合模式原理與應(yīng)用實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 組合模式,結(jié)合實例形式分析了javascript組合模式相關(guān)概念、原理、應(yīng)用場景及相關(guān)使用注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要給大家介紹了關(guān)于js中parseInt()詭異行為的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
動態(tài)加載JS文件的三種方法2013-11-11
如何用js 實現(xiàn)依賴注入的思想，后端框架思想搬到前端來
這篇文章主要介紹了js 實現(xiàn)依賴注入的思想，后端框架思想搬到前端來,需要的朋友可以參考下2015-08-08
javascript ie6兼容position:fixed實現(xiàn)思路
positon:fixed 讓HTML元素脫離文檔流固定在瀏覽器的某個位置，由于網(wǎng)頁中類似這樣的元素很多，所以本文的出現(xiàn)是很有必要的了，接下為大家介紹下javascript如何實現(xiàn)ie6下的position:fixed2013-04-04
這篇文章主要介紹了JavaScript中的this原理及6種常見使用場景詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
javascript實現(xiàn)阻止iOS APP中的鏈接打開Safari瀏覽器
這篇文章主要介紹了javascript實現(xiàn)阻止iOS APP中的鏈接打開Safari瀏覽器,這個IOS APP一般是Web APP,否則沒法使用本文的代碼,需要的朋友可以參考下2014-06-06