图片格式转换

前言

项目开发过程中经常遇到图片格式转化的场景，比如blob与base64互转，svg转为png base64等，这里整理一些工具函数提供转换。

Code

1.blob to base64

/**
 * @param {File} blob 
 * @param {Function} callback 
 */
function blobToDataURL(blob, callback) {
  let a = new FileReader();
  a.onload = function (e) { callback(e.target.result); }
  a.readAsDataURL(blob);
}

2.base64 to blob

/**
 * @param {String} urlData 
 */
function convertBase64UrlToBlob(urlData) {
  var arr = urlData.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 Blob([u8arr], { type: mime })
}

3.svg to base64

/**
 * @param {String} svg <svg src="http://xxxx"></svg>
 */
function svgToBase64(svg) {
  return 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg)))
}

4.svg to png base64

/**
 * @param {String} svg <svg src="http://xxxx"></svg>
 * @param {Function} done
 */
function svgToPngBase64Url(svg, done) {
  let img = new Image(), dataUrl = ''
  img.setAttribute('src', svg)
  document.body.appendChild(img)
  img.onload = function () {
     let canvas = document.createElement('canvas')
     canvas.width = img.offsetWidth
     canvas.height = img.offsetHeight
     let context = canvas.getContext('2d')
     context.drawImage(img, 0, 0)
     dataUrl = canvas.toDataURL('image/png')
     document.body.removeChild(img)
     done(dataUrl)
  }
}