本地图片预览+blob使用

来源：互联网发布：ajax json java前端编辑：程序博客网时间：2024/05/21 17:51

说明：做要用到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>

阅读全文

0 0