blob html 预览_本地图片预览+blob使用
說明:做要用到file標(biāo)簽和 html5 Blob對(duì)象
方法1:使用file標(biāo)簽
請(qǐng)選擇一個(gè)文件:
// 將文件以Data URL形式進(jìn)行讀入頁(yè)面
function readAsDataURL(){
// 檢查是否為圖像類型
var simpleFile = document.getElementById("file").files[0];
if(!/image\/\w+/.test(simpleFile.type)) {
alert("請(qǐng)確保文件類型為圖像類型");
return false;
}
var reader = new FileReader();
// 將文件以Data URL形式進(jìn)行讀入頁(yè)面
reader.readAsDataURL(simpleFile);
reader.onload = function(e){
console.log(this.result);
result.innerHTML = '';
}
}
方法2 :使用Blob對(duì)象,把一張圖片arrayBuffer緩存保存到Blob對(duì)象,然后給對(duì)象一個(gè)url.? 圖片arrayBuffer可通過websocket獲取。
function mes(){
var imgs = document.getElementById("file");
var img = document.getElementById("img");
var reader = new FileReader();
reader.readAsArrayBuffer(imgs.files[0]);
reader.οnlοad=function(e){
//console.log(JSON.stringify(this.result) );
var bf = this.result;
var blob = new Blob([bf],{type:"text/plain"});
console.log(blob);
var str = URL.createObjectURL(blob);
img.src = str;
};
// var reader3 = new FileReader();
// reader3.readAsBinaryString(imgs.files[0]);
//reader3.οnlοad=function(e){
//console.log(JSON.stringify(this.result) );
//console.log(this.result );
//};
//console.log(JSON.stringify(imgs.files[0])+" "+imgs.files[0]);
//var str = URL.createObjectURL(imgs.files[0]);
//console.log("imgs:"+JSON.stringify(str));
// img.src = str;
}
附加內(nèi)容:針對(duì)ArrayBuffer內(nèi)容進(jìn)行操作顯示
function mes(){
var imgs = document.getElementById("file");
var img = document.getElementById("img");
var reader = new FileReader();
reader.readAsArrayBuffer(imgs.files[0]);
reader.οnlοad=function(e){
//console.log(JSON.stringify(this.result) );
var bf = this.result;
var bytes = new Uint8Array(bf);//把a(bǔ)rrayBuffer轉(zhuǎn)換為byte處理
console.log("bytes:"+JSON.stringify(bytes));
for(var i = 6400 ; i < 7600; i ++){//隨意修改數(shù)據(jù)
bytes[i]=0xff;
}
console.log("========================");
console.log("========================");
console.log("========================");
console.log("========================");
//console.log("bytes:"+JSON.stringify(bytes));
var blob = new Blob([bytes],{type:"text/plain"});
console.log(blob);
var str = URL.createObjectURL(blob);
img.src = str;
};
// var reader3 = new FileReader();
// reader3.readAsBinaryString(imgs.files[0]);
//reader3.οnlοad=function(e){
//console.log(JSON.stringify(this.result) );
//console.log(this.result );
//};
//console.log(JSON.stringify(imgs.files[0])+" "+imgs.files[0]);
//var str = URL.createObjectURL(imgs.files[0]);
//console.log("imgs:"+JSON.stringify(str));
// img.src = str;
}
總結(jié)
以上是生活随笔為你收集整理的blob html 预览_本地图片预览+blob使用的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: xy坐标转换为极坐标_CAD制图软件新手
- 下一篇: kafka配置文件 中文乱码_Kafka