How to compress and upload an image using js (code attached)

The content of this article is about how to compress and upload an image in js (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

*vue webpack environment, that here refers to the vue instance

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

1. Image compression

    /*
        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. Base64 file conversion

The backend interface here does not support base64, use it according to the actual interface situation

    /*这里转为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. Upload pictures

    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

Related recommendations:

reacHow to implement the function of changing skin color

Detailed introduction to the usage of data objects in js (with code)

The above is the detailed content of How to compress and upload an image using js (code attached). For more information, please follow other related articles on the PHP Chinese website!