1、url 转 base64

原理： 利用canvas.toDataURL的API转化成base64

  1. /**
  2.  * url 图片的 url 路径
  3.  */
  4. function urlToBase64(url) {
  5.     return new Promise((resolve, reject) => {
  6.         let image = new Image();
  7.         image.onload = function () {
  8.             let canvas = document.createElement('canvas');
  9.             canvas.width = this.naturalWidth;
  10.             canvas.height = this.naturalHeight;
  11.             // 将图片插入画布并开始绘制
  12.             canvas.getContext('2d').drawImage(image, 0, 0);
  13.             // result
  14.             let result = canvas.toDataURL('image/png')
  15.             resolve(result);
  16.         };
  17.         // CORS 策略，会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
  18.         image.setAttribute("crossOrigin", 'Anonymous');
  19.         image.src = url;
  20.         // 图片加载失败的错误处理
  21.         image.onerror = () => {
  22.             reject(new Error('urlToBase64 error'));
  23.         };
  24.     })
  25. }
  27. // 调用
  28. let imgUrL = `http://XXX.jpg`
  29. urlToBase64(imgUrL).then(res => {
  30.     // 转化后的base64图片地址
  31.     console.log('base64', res)
  32. })

2、base64 转 blob

原理：利用URL.createObjectURL为blob对象创建临时的URL

  1. /**
  2.  * b64data base64的数据
  3.  * contentType 图片的类型
  4.  * sliceSize 切割的间距长度
  5.  * name 图片的名称
  6.  */
  7. function base64ToBlob({
  8.     b64data = '',
  9.     contentType = '',
  10.     sliceSize = 512,
  11.     name:'demo.png'
  12. } = {}) {
  13.     return new Promise((resolve, reject) => {
  14.         // 使用 atob() 方法将数据解码
  15.         let byteCharacters = atob(b64data);
  16.         let byteArrays = [];
  17.         for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
  18.             let slice = byteCharacters.slice(offset, offset + sliceSize);
  19.             let byteNumbers = [];
  20.             for (let i = 0; i < slice.length; i++) {
  21.                 byteNumbers.push(slice.charCodeAt(i));
  22.             }
  23.             // 8 位无符号整数值的类型化数组。内容将初始化为 0。
  24.             // 如果无法分配请求数目的字节，则将引发异常。
  25.             byteArrays.push(new Uint8Array(byteNumbers));
  26.         }
  27.         let result = new Blob(byteArrays, {
  28.             type: contentType
  29.         })
  30.         result = Object.assign(result, {
  31.             // 这里一定要处理一下 URL.createObjectURL
  32.             preview: URL.createObjectURL(result),
  33.             name,
  34.         });
  35.         resolve(result)
  36.     })
  37. }
  38. // 调用
  39. var base64 = base64.split(',')[1]
  40. base64ToBlob({
  41.     b64data: base64,
  42.     contentType: 'image/png'
  43. }).then(res => {
  44.     // 转后后的blob对象
  45.     console.log('blob', res)
  46. })

3、blob 转 base64

原理：利用fileReader的readAsDataURL，将blob转为base64

  1. function blobToBase64(blob) {
  2.     return new Promise((resolve, reject) => {
  3.         const fileReader = new FileReader();
  4.         fileReader.onload = (e) => {
  5.             resolve(e.target.result);
  6.         };
  7.         // readAsDataURL
  8.         fileReader.readAsDataURL(blob);
  9.         fileReader.onerror = () => {
  10.             reject(new Error('blobToBase64 error'));
  11.         };
  12.     });
  13. }
  14. // 调用
  15. blobToBase64(blob).then(res => {
  16.     // 转化后的base64
  17.     console.log('base64', res)
  18. })