溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
Blob 對象表示一個不可變、原始數據的類文件對象。Blob 表示的不一定是JavaScript原生格式的數據。File 接口基于Blob，繼承了 blob 的功能并將其擴展使其支持用戶系統上的文件。
本文主要給大家介紹了關于js獲取圖片url的Blob值并預覽的相關內容，下面話不多說了，來一起看看詳細的介紹吧
方法如下
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必須使用異步模式，同步模式不能設置 responseType = "blob"
2）使用 FileReader 對象獲取圖片 Blob 對象的 data 數據
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);
}
}
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
