本地预览图片和前端图片压缩

最新推荐文章于 2024-07-19 19:44:32 发布

myt

最新推荐文章于 2024-07-19 19:44:32 发布

阅读量581

点赞数

分类专栏： web前端文章标签：图片压缩预览

本文链接：https://blog.csdn.net/mytdyhm123456/article/details/62044058

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本地预览图片

很多场景需要上传图片之前，预览图片。以下是前端的两种方式

根据本地图片数据去预览

 var file = document.getElementById("file").files[0];  
 var reader = new FileReader();  
 //将文件以Data URL形式读入页面  
 reader.readAsDataURL(file);  
 reader.onload=function(e){  
        //本地预览要上传的图片   this.result是本地文件实际数据
        document.getElementById("result").innerHTML='<img src="' + this.result +'" alt="" />';  
});

根据本地图片生成一个路径去预览

var file = document.getElementById("file").files[0];  
var url = null ; 
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
document.getElementById("result").innerHTML='<img src="' + url +'" alt="" />';

图片压缩

图片压缩，能极大的减小图片的大小。尤其是手机端，压缩图片能提高用户上传图片到服务器的速度也能节省流量。
图片压缩的思路：将本地选中的图片数据base64Data生成临时图片对象image，将图片画到画布上。核心代码如下：

   var image=new Image();  
   image.src=base64Data;
   image.onload=function(){
     //image.onload 图片加载成功
     //创建画布
     var canvas=document.createElement("canvas");  
     var ctx=canvas.getContext("2d");  
     var anw = document.createAttribute("width");
     anw.nodeValue = w;
     var anh = document.createAttribute("height");
     anh.nodeValue = h;
     canvas.setAttributeNode(anw);
     canvas.setAttributeNode(anh); 
     ctx.drawImage(image, 0, 0, w, h);
     //压缩后的数据 data
     var data=canvas.toDataURL("image/jpeg", 0.8);
   }

打开相册

//电脑端弹出文件选择框
<input type="file" id="file" /> 
//手机端访问会弹出 “相册”与"相机" 两个选项，电脑端弹出文件选择框
<input type="file" id="file" accept="image/*" capture="camera" />

完整可执行示例代码

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><title>无标题文档</title>

<script type="text/javascript">  
var result=document.getElementById("result");  
var file=document.getElementById("file");  

//判断浏览器是否支持FileReader接口  
if(typeof FileReader == 'undefined'){  
    result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";  
    //使选择控件不可操作  
    file.setAttribute("disabled","disabled");  
}  

function readAsDataURL(){  
    //检验是否为图像文件  
    var file = document.getElementById("file").files[0];  
    if(!/image\/\w+/.test(file.type)){  
        alert("看清楚，这个需要图片！");  
        return false;  
    }  
    var reader = new FileReader();  
    //将文件以Data URL形式读入页面  
    reader.readAsDataURL(file);  
    //reader.onload 是加载本地文件成功
    reader.onload=function(e){  
        var result=document.getElementById("result");  
        //本地预览要上传的图片   this.result是本地文件实际数据
        result.innerHTML='<img src="' + this.result +'" alt="" />';  
        //压缩要上传的图片
        compressImg(this.result, function(data){
          //data截取后用java_img_data保存,这样才能在后台直接将java_img_data字符串转为一个图片，不然会乱码
          var  java_img_data = data.substring(data.indexOf(",") + 1);
           //将java_img_data 数据作为要上传的图片
        });
    }  
}  


//压缩要上传的图片 能极大的压缩要上传文件的大小
function compressImg(base64Data, callback){
        //在内存中创建一个临时图片对象
        var image=new Image();  
        image.src=base64Data;
        image.onload=function(){
            //根据图片的尺寸 计算画布canvas合适的宽和高  这一步根据项目实际情况计算
            var w=image.width;  
            var h=image.height;
            var sw=480; 
            var sh=272;
            if(w<h){
                var t=sw;
                sw=sh;
                sh=t;
            }
            var r=w>sw?sw/w:1;
            var r1=h>sh?sh/h:1;
            if(r>r1){
                r=r1
            }
            w=parseInt(w*r);
            h=parseInt(h*r);
            //创建画布
            var canvas=document.createElement("canvas");  
            var ctx=canvas.getContext("2d");  
            // 创建属性节点
            var anw = document.createAttribute("width");
            anw.nodeValue = w;
            var anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh); 
            //将图片画到画布上
            ctx.drawImage(image, 0, 0, w, h);
            //以国际标准压缩格式image/jpeg格式压缩 ,0.8代表图片质量,0.8的压缩能较大的压缩图片内容而又不影响图片质量
            var data=canvas.toDataURL("image/jpeg", 0.8);
            //回调
            callback(data);
        }
    }


</script>  

</head>
<body>

  <p>  
    <label>请选择一个图片：</label>  
    <input type="file" id="file" accept="image/*" capture="camera" />  
    <input type="button" value="上传图像" onclick="readAsDataURL()"/>
</p>  
<div id="result" name="result"></div>  

</body>

</html>

base64在css和html中的使用

Base64目前主要用于HTML5、移动开发等不考虑IE6的场景中。
Base64格式
data:[][;charset=][;base64],
Base64 在CSS中的使用

.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }

Base64 在HTML中的使用

<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />

java base64与图片转换

http://blog.csdn.net/mytdyhm123456/article/details/62226192

myt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录