基于JS实现前端压缩上传图片的实例代码

2019-11-19 11:34:46

字体：大中小

来源：转载

供稿：网友

具体代码如下所示：

<!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 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, { quality: 0.5 }, function(base) {          //调用          var blob = dataURLtoBlob(base);          var newFile = new File([blob], file.name, { type: file.type });          console.log(newFile)          let r = new FileReader(); //本地预览          r.onload = function() {            $('#img').attr("src", r.result);;          }          r.readAsDataURL(newFile); //Base64          // upload(newFile);        });      }    }    //将base64转换为blob    function dataURLtoBlob(dataurl) {      var arr = dataurl.split(','),        mime = arr[0].match(/:(.*?);/)[1],        bstr = atob(arr[1]),        n = bstr.length,        u8arr = new Uint8Array(n);      while (n--) {        u8arr[n] = bstr.charCodeAt(n);      }      return new Blob([u8arr], { type: mime });    }    function upload(file) {      var that = this;      // 创建form对象      let param = new FormData();      // 通过append向form对象添加数据      param.append('img', file);      // 文件大小      param.append('size', file.size);      for (var n in that.params) {        param.append(n, that.params[n]);      }      // 创建ajax      var xhr = new XMLHttpRequest();      xhr.onload = function() {        console.log(xhr.responseText)      }      xhr.open("POST", "yourapi", true);      // 发送表单数据      xhr.send(param);    }    /**     * 图片压缩，默认同比例压缩     * @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 = obj.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>

总结

以上所述是小编给大家介绍的基于JS实现前端压缩上传图片的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

上一篇：详解jenkins自动化部署vue

下一篇：JavaScript如何实现元素全排列实例代码