前端图片常用功能

前端图片常用功能

图片转base64

// 图片转base64
const imgToBase64=(url)=>{
       let image = new Image();
       //解决跨域
       image.crossOrigin = '*';
       image.src =url;
        image.onload = () => {
        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext('2d');
        context.drawImage(image, 0, 0, image.width, image.height);

        var quality = 0.8;
        //这里的dataurl就是base64类型
        var dataURL = canvas.toDataURL('image/jpeg', quality); //使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
       return dataURL;
      };
      };

图片 base64转file

 const base64ToFile = (dataUrl, name) => {
      var arr = dataUrl.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 File([u8arr], name + '.jpg', { type: 'image/jpg' });
    };