js如何實作一張圖片的壓縮與上傳（附程式碼）

這篇文章帶給大家的內容是關於js如何實現一張圖片的壓縮與上傳（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

*vue webpack環境，這裡的that指到vue實例

<input type="file" name="file" accept="image/*" @change="selectImgs" ref="file" />

一、圖片壓縮

    /*
        file：文件(类型是图片格式)，
        obj：文件压缩后对象width， height， quality(0-1)
        callback：容器或者回调函数
    */
    photoCompress(file,obj,callback){
        let that=this;
        let ready=new FileReader();
        /*开始读取指定File对象中的内容. 读取操作完成时,返回一个URL格式的字符串.*/
        ready.readAsDataURL(file);
        ready.onload=function(){
            let re=this.result;
            that.canvasDataURL(re,obj,callback)  //开始压缩
        }
    },

/*利用canvas数据化图片进行压缩*/
    canvasDataURL(path, obj, callback){
        
        let img = new Image();
        img.src = path;
        img.onload = function(){
            let that = this;   //指到img
            // 默认按比例压缩
            let w = that.width,
                h = that.height,
                scale = w / h;
            w = obj.width || w;
            h = obj.height || (w / scale);
            let quality = 0.7;  // 默认图片质量为0.7
            //生成canvas
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d');
            // 创建属性节点
            let anw = document.createAttribute("width");
            anw.nodeValue = w;
            let 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值越小，所绘制出的图像越模糊
            let base64 = canvas.toDataURL('image/jpeg', quality);
            // 回调函数返回base64的值
            callback(base64);
        }
    },

二、base64轉檔

這裡後台介面不支援base64，依照實際介面狀況使用

    /*这里转为blob*/
    convertBase64UrlToBlob(urlData){
        let arr = urlData.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});
    },

三、上傳圖片

r​​rreee

    selectImgs(e) {    //选择文件后执行
      let that=this
      let fileObj=e.target.files[0]  //获取file
      //console.log(fileObj)
      var form = new FormData();  // 创建FormData 对象
      if(fileObj.size/1024 > 1025) { //文件大于1M，进行压缩上传
          that.photoCompress(fileObj, {   //调用压缩图片方法
              quality: 0.2
          }, function(base64Codes){
              //console.log("压缩后：" + base.length / 1024 + " " + base);
              let bl = that.convertBase64UrlToBlob(base64Codes);
              //console.log(bl)
              form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
              that.imgRequest(form);  //请求图片上传接口
          });
      }else{ //小于等于1M 原图上传
          form.append("file", fileObj); // 文件对象
          that.imgRequest(form);   //请求图片上传接口
      }
    },

相關推薦：

#reac如何t實作更換皮膚顏色的功能

js中data物件的詳細用法介紹（附程式碼）

以上是js如何實作一張圖片的壓縮與上傳（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！