前端压缩图片

前端压缩图片的原理

原因:上传的图片过大,在前端精选压缩后在上传
原理:利用html5的canvas将要上传的图片压缩,绘制,得到一个图片文件,上传这个压缩后的图片

ts代码:

    let max = 1400;//定义压缩后文件的大小
    let img = new Image();//新建图片对象
    img.onload = () => {//在图片的初始化时处理图片压缩
      let w = img.width;//获取图片大小
      let h = img.height;
      if (w > max) {
        let nw = max;
        let nh = h / (w/nw);
        w = nw;
        h = nh;
      }
      if (h > max) {
        let nh = max;
        let nw = w / (h/nh);
        w = nw;
        h = nh;
      }//计算图片压缩后的大小
      img.width = w;
      img.height = h;
      const canvas = document.createElement('canvas');//新建一个画布,用来处理图像
      let ctx:any = canvas.getContext('2d') || canvas.getContext('2D');//画布为2d
      ctx.clearRect(0,0,canvas.width,canvas.height);//清空画布
      canvas.width=w;
      canvas.height=h;//初始化画布的大小为之前的计算结果
      ctx.drawImage(img,0,0,w,h);//绘制画布
      imgUrl=canvas.toDataURL();//得到压缩后的图片文件
      // document.body.appendChild(canvas);//可用来展示压缩好的图片
      canvas.toBlob(blob => {
        let formdata = new FormData();//创建表单对象
        formdata.append("files", blob, file.name);//将压缩后的图片二进制文件传入表单对象
        this.http.post('/ykly-toc-web/FastDFS/uploadFile', formdata).map(res=>res.json()).subscribe(res => {
        })
      }, file.type);//form表单提交
      //提交压缩后的图片文件
    };
    img.src = URL.createObjectURL(file);//绑定图片文件,将其放在最后,否则会报错

优点:在前端直接对图片进行压缩
缺点:图片过大时画布绘制的过长会很慢,导致网页反应慢.