js实现image转base64-原创手记-慕课网

中秋刚过去几天，首先在这里祝与亲人团聚的朋友们阖家欢乐，告诉和我一样独在异乡的青年们不要孤单，你不是一个人，在外也要好好生活，每逢佳节和朋友们一起吃点好吃的^ _ ^

webp

image.png

最近工作中遇到一个将图片转为base64的格式发给native的需求，代码起先是我旁边的大佬写的，他是使用url-loader实现的，由于大佬休假了，接下来的工作交接给我，根据墨菲定律，emm。。。出bug了，url-loader转出来的码不太正确，我仔细阅读了文档，又关键词搜索了一圈，未果，（emm。。。我现在还没找到原因，有知道的小伙伴欢迎留言），时间紧张，只好另谋出路。
于是，我打算采取html5的canvas,将图片绘制到画布上，然后用canvas的 toDataURL 方法。
在网上看了示例，还结合大佬的异步加载代码好好优化了下。

let canvas;function initCanvas() {  if (!canvas) {
    canvas = document.createElement('canvas')
  }  return canvas
}async function loadImg(src) {  let img = new Image()
  img.src = src  return new Promise((resolve, reject) => {
    img. = function() {
      resolve(img)
    }
    img. = function(error) {
      reject(error)
    }
  })
}function toBase64(img, outputFormat) {  let ctx = canvas.getContext('2d')
  canvas.width = img.width
  canvas.height = img.height
  ctx.drawImage(img, 0, 0)  return canvas.toDataURL(outputFormat || 'image/jpg')
}async function convertImgToBase64(url, outputFormat) {
  initCanvas()  if (!canvas.toDataURL || typeof canvas.toDataURL !== 'function') {    throw new Error('method not supported')
  }  const img = await loadImg(url, 'Anonymous')  return toBase64(img, outputFormat)
}

自我感觉良好，但是运行之后报错了

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

谷歌翻译：canvas无法执行toDataURL方法：污染的画布无法输出

看不懂是吧？不要着急，一般当我们遇到这种一长串且有明显关键词的报错，你应该松一口气，这类错误一般直接贴上google下就可以找到答案。比如：https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported

webp

image.png

高票答案让加上crossOrigin，一个针对img、video等的跨域属性，这篇文章讲得还不错，就是说只要加上crossOrigin: ''属性，不管值是anonymous、‘’或者abc都可以，相对于告诉对方服务器，你不需要带任何非匿名信息过来。例如cookie，因此，当前浏览器肯定是安全的。
好了，问题圆满解决，oh，不，不圆满，我还不知道url-loader为啥没实现:(，我回头请教下我们大佬再来补充吧。

作者：Wendy曹
链接：https://www.jianshu.com/p/ef7224ea4c04