url ,blob, base64图片格式的转换

1.url 转 Blob

    //url 转blob
    convertBase64UrlToBlob(urlData, filename) {
      const bytes = window.atob(urlData.split(",")[1]) // 去掉url的头，并转换为byte
      // 处理异常,将ascii码小于0的转换为大于0
      const ab = new ArrayBuffer(bytes.length)
      const ia = new Uint8Array(ab)
      for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i)
      }
      return new File([ab], filename, { type: "image/png" })
    }

1.url 转 Blob 方法2

/**
 * @description: 转换格式
 * @param  {String} urlData 图片地址
 * @return: {*} void
 */
const pngBase64ToBlob = urlData => {
	try {
		var arr = urlData.split(',');
		var mime = arr[0].match(/:(.*?);/)[1] || 'image/png';
		// 去掉url的头，并转化为byte
		var bytes = window.atob(arr[1]);
		// 处理异常,将ascii码小于0的转换为大于0
		var ab = new ArrayBuffer(bytes.length);
		// 生成视图（直接针对内存）：8位无符号整数，长度1个字节
		var ia = new Uint8Array(ab);

		for (var i = 0; i < bytes.length; i++) {
			ia[i] = bytes.charCodeAt(i);
		}

		return new Blob([ab], {
			type: mime
		});
	} catch (e) {
		var ab = new ArrayBuffer(0);
		return new Blob([ab], {
			type: 'image/png'
		});
	}
};

2.url 转base64

跨域图片能转化成base64，应该满足三个条件：

• img元素中设置crossorigin属性

需要后端配合

• 图片允许跨域，设置响应头Access-Control-Allow-Origin
• 使用js方式请求图片资源, 需要避免使用缓存，设置url后加上时间戳， 或者http头设置Cache-Control为no-cache

// url转base64
    convertImgToBase64(url) {
      var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
        img = new Image;
      img.crossOrigin = 'Anonymous'; //图片跨域
      img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL('image/base64');
        console.log(dataURL, 'dataURL-dataURL')
        canvas = null;
      };
      img.src = url;
    },

3.Blob文件流 转base64

1.request需要设置- 响应的数据类型为一个包含二进制数据的 Blob 对象

responseType: "arraybuffer" 

    transformArrayBufferToBase64(buffer) {
      var binary = ""
      var bytes = new Uint8Array(buffer)
      for (var len = bytes.byteLength, i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i])
      }
      return window.btoa(binary)
    },
    
    
    //img使用时加上base64头
   let dataStr = this.transformArrayBufferToBase64(res)
   let img = "data:image/png;base64," + dataStr

4.base64 转 file文件流

/**
 * @description: 转换格式
 * @param  {String,String} data,fileName base64格式的图片,文件名
 * @return: {*} url 文件流
 */
const base64ToFile = (data, fileName) => {
	const dataArr = data.split(',');
	const byteString = atob(dataArr[1]);
	const options = {
		type: 'image/jpeg',
		endings: 'native'
	};
	const u8Arr = new Uint8Array(byteString.length);
	for (let i = 0; i < byteString.length; i++) {
		u8Arr[i] = byteString.charCodeAt(i);
	}
	let fileOfBlob = new File([u8Arr], fileName + '.jpg', options); //返回文件流
	const url = URL.createObjectURL(fileOfBlob);
	return url;
};

// 上传素材
const uploadImgFile =(imgUrl) => {
	return new Promise((resolve, reject) => {
		const filePath = base64ToFile(imgUrl, 'myjpg');
                 //上传api的地址
		const path = `/upload/file/xxxxxx`;
		const params = {
			filePath,
			path,
			name: 'file',
			header: {
				'x-auth-token': storage.getStorage('x-auth-token')
			}
		};
                //回调
		upload.uploadFile(params).then(res => {
			resolve(res);
			
		});
	});
};