js实现image转base64

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

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.onload = function() {
      resolve(img)
    }
    img.onerror = 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

image.png

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

补充：
经过大家的共同探讨，问题得到了解决，需要在url中加入“!”

const shareLogo = require('!url-loader!../assets/logo.jpeg');

具体原因可以阅读url-loader is encoding path instead of image#43
总结下就是：
由于我们webpack中的配置,用于提高性能

{
  test: /\.(png|svg)$/,
  loader: 'url-loader',
  query: {
    limit: 10000,
  },
}

如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。

所以debug时我们发现图片被转码了2次：
第一个loader（url）对图像进行编码并返回编码图像的路径
第二个loader（文件）是对编码图像进行编码的路径

在上发布相关文章是对自己不断学习的鼓励；如有什么写得不对的地方，欢迎批评指正；给我点赞的都是小可爱^ _ ^