AUBREY

SOMETIMES LOVE JUST AIN'T ENOUGH

文件格式转换方法归纳

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})
}

 

 

 

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注