本地图片预览+blob使用
说明:做要用到file标签和 html5 Blob对象
方法1:使用file标签
<label>请选择一个文件:</label>
<input type="file" id="file" />
<input type="button" value="读取图像" onclick = "readAsDataURL()"/>
// 将文件以Data URL形式进行读入页面
function readAsDataURL(){
// 检查是否为图像类型
var simpleFile = document.getElementById("file").files[0];
if(!/image\/\w+/.test(simpleFile.type)) {
alert("请确保文件类型为图像类型");
return false;
}
var reader = new FileReader();
// 将文件以Data URL形式进行读入页面
reader.readAsDataURL(simpleFile);
reader.onload = function(e){
console.log(this.result);
result.innerHTML = '<img src="'+this.result+'" alt=""/>';
}
}
方法2 :使用Blob对象,把一张图片arrayBuffer缓存保存到Blob对象,然后给对象一个url. 图片arrayBuffer可通过websocket获取。
<img id="img" />
<input type="file" id = "file">
<input id="but" value="aa" type="button" onclick="mes()">
<script type="text/javascript">
function mes(){
var imgs = document.getElementById("file");
var img = document.getElementById("img");
var reader = new FileReader();
reader.readAsArrayBuffer(imgs.files[0]);
reader.onload=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.onload=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;
}
</script>
附加内容:针对ArrayBuffer内容进行操作显示
<script type="text/javascript">
function mes(){
var imgs = document.getElementById("file");
var img = document.getElementById("img");
var reader = new FileReader();
reader.readAsArrayBuffer(imgs.files[0]);
reader.onload=function(e){
// console.log(JSON.stringify(this.result) );
var bf = this.result;
var bytes = new Uint8Array(bf);//把arrayBuffer转换为byte处理
console.log("bytes:"+JSON.stringify(bytes));
for(var i = 6400 ; i < 7600; i ++){//随意修改数据
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.onload=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;
}
</script>
posted on 2018-12-27 20:34 zhangzongshan 阅读(898) 评论(0) 编辑 收藏 举报