js实现上传并压缩图片效果

2019-11-19 14:33:07

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js实现上传并图片压缩的具体代码，供大家参考，具体内容如下

代码：

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title></title>  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body>  <input type="file" id="picFile" onchange="readFile(this)"/>   <img style="" id="img" src="" alt="" />  <script>  function readFile(obj){    var file = obj.files[0];     //判断类型是不是图片     if(!/image///w+/.test(file.type)){       alert("请确保文件为图像类型");       return false;     }     var reader = new FileReader();     reader.readAsDataURL(file);     reader.onload = function(e){     dealImage(this.result,{width:200},function(base){     　　　　document.getElementById('img').setAttribute('src',base)     });    }   }    /**   * 图片压缩，默认同比例压缩   * @param {Object} path   * pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径   * @param {Object} obj   * obj 对象 有 width， height， quality(0-1)   * @param {Object} callback   * 回调函数有一个参数，base64的字符串数据   */  function dealImage(path, obj, callback){   var img = new Image();   img.src = path;   img.onload = function(){   var that = this;   // 默认按比例压缩   var w = that.width,   h = that.height,   scale = w / h;   w = obj.width || w;   h = obj.height || (w / scale);   var quality = 0.7; // 默认图片质量为0.7   //生成canvas   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(that, 0, 0, w, h);   // 图像质量   if(obj.quality && obj.quality <= 1 && obj.quality > 0){   quality = obj.quality;   }   // quality值越小，所绘制出的图像越模糊   var base64 = canvas.toDataURL('image/jpeg', quality );   // 回调函数返回base64的值   callback(base64);   }  }  </script> </body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Vuex 入门教程

下一篇：web前端vue之CSS过渡效果示例