So komprimieren und laden Sie ein Bild in js hoch (Code beigefügt)

Der Inhalt dieses Artikels befasst sich mit dem Komprimieren und Hochladen eines Bildes in js (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

*vue+webpack-Umgebung, wobei sich das auf die Vue-Instanz bezieht

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

1. Bildkomprimierung

    /*
        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);
        }
    },

2 >

Die Backend-Schnittstelle unterstützt Base64 nicht, verwenden Sie sie entsprechend der tatsächlichen Schnittstellensituation

    /*这里转为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});
    },

3. Bilder hochladen

    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);   //请求图片上传接口
      }
    },

rrree

Verwandte Empfehlungen:

So implementieren Sie die Funktion zum Ändern der Hautfarbe in Reac

Detaillierte Einführung in die Verwendung von Datenobjekten in js (mit Code)

Das obige ist der detaillierte Inhalt vonSo komprimieren und laden Sie ein Bild in js hoch (Code beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!