js使用canvas压缩图片

 
    //压缩图片
    Compresspicture(file){
      return new Promise((resolve,reject)=>{
         let r = new FileReader();  //本地预览
         r.readAsDataURL(file)
          r.onload = function(){
            let src=r.result
            const img = new Image();
            img.src = src;
            img.onload = e => {
            const W = img .width;
            const h = img. height;
            const quality = 0.8; 
            const canvas = document. createElement('canvas');
            const ctx = canvas . getContext( '2d');
            //创建属性节点
            const anw = document . createAttribute("width");anw. nodeValue = W;
            const anh = document . createAttribute("height");anh. nodeValue = h;
            canvas . setAttributeNode(anw);
            canvas. setAttributeNode(anh);
            //底色PNG转JPEG时透明区域会变黑色
            ctx. fillStyle="#fff";
            ctx. fillRect(0, 0, W, h);
            ctx. drawImage(img, 0, 0, W, h);
            //quality値越小, 所绘制出的图像越横楜
            const base64 = canvas. toDataURL( 'image/jpeg', quality);
            }
          }
       })
     }