文件格式转换方法归纳
2020年6月30日
1、base64转blob二进制对象
/* * 将base64的图片转换为file文件 * @param {String} urlData base64数据 * */ function convertBase64UrlToBlob (urlData) { let bytes = window.atob(urlData.split(',')[1]) // 去掉url的头,并转换为byte // 处理异常,将ascii码小于0的转换为大于0 let ab = new ArrayBuffer(bytes.length) let ia = new Uint8Array(ab) for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i) } return new Blob([ab], { type: 'image/jpeg' }) }
备注:
window.atob():解码一个base-64编码的字符串
window.btoa():创建一个base-64编码的字符串
2、图片url转base64
/** * 图片url转base64 * @param {String} url 图片的url * @param {String} ext 图片的格式(扩展名) * @param {Object} callback 回调函数 * @param {Number} quality 图片的压缩比例 */ export const getUrlBase64 = (url, ext, callback, quality) => { let canvas = document.createElement('canvas') // 创建canvas DOM元素 let ctx = canvas.getContext('2d') let img = new Image() img.crossOrigin = 'Anonymous' img.src = url img.onload = function () { canvas.height = img.height // 指定画板的高度,自定义 canvas.width = img.width // 指定画板的宽度,自定义 ctx.drawImage(img, 0, 0, img.width, img.height) // 参数可自定义 var dataURL = quality ? canvas.toDataURL('image/' + ext, quality) : canvas.toDataURL('image/' + ext) callback.call(this, dataURL) // 回掉函数获取Base64编码 canvas = null } }
3、base64转file文件
/* * base64图片转file文件 * @param {String} dataurl base64数据 * */ dataURLtoFile (dataurl) { let arr = dataurl.split(',') let mime = arr[0].match(/:(.*?);/)[1] let bstr = atob(arr[1]) let n = bstr.length let u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], 'img.jpeg', {type: mime}) }