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 的功能并將其擴(kuò)展使其支持用戶系統(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)文章
這篇文章主要介紹了Javascript字符串瀏覽器兼容問題,實(shí)例形式對比分析了不兼容字符串與兼容字符串的區(qū)別,是非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12
JavaScript實(shí)現(xiàn)淘寶京東6位數(shù)字支付密碼效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)淘寶京東6位數(shù)字支付密碼效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)自定義難度的掃雷游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)折疊展開效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
微信小程序?qū)W習(xí)筆記之本地?cái)?shù)據(jù)緩存功能詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之本地?cái)?shù)據(jù)緩存功能,結(jié)合實(shí)例形式分析了微信小程序wx.setStorage、wx.getStorage以及wx.removeStorage、wx.clearStorage針對數(shù)據(jù)緩存的存取、刪除等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義鍵盤，內(nèi)部虛擬支付，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)可控制的進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
最近一直在學(xué)習(xí)uni-app開發(fā)，由于uniapp是基于vue.js技術(shù)開發(fā)的,所以下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序自定義導(dǎo)航欄的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
實(shí)現(xiàn)JS拖拽插件主要從六個方面做介紹：一、js拖拽插件的原理，二、根據(jù)原理實(shí)現(xiàn)的最基本效果，三、代碼抽象與優(yōu)化，四、擴(kuò)展：有效的拖拽元素，五、性能優(yōu)化和總結(jié)，六、jquery插件化 ,需要的朋友可以參考下2015-08-08
JS 實(shí)現(xiàn)點(diǎn)擊a標(biāo)簽的時候讓其背景更換
點(diǎn)擊a標(biāo)簽的時候給其換背景的方法有很多，在本文將為大家介紹下js是如何實(shí)現(xiàn)的，感興趣的朋友不要錯過2013-10-10