html2canvas使用之填坑记

今天碰到一个小坑…

在原来的功能基础上调整一下下，产品的需求非常简单，就是将原来的静态图片改为动态取图，其他不用变…

我看了下原来的代码，简单描述一下：

1. 给容器设置背景图片
2. 设置一些拖拽事件，可以对该容器进行操作
3. 对容器使用 html2canvas 的操作，将该容器保存为新的图片
   主要逻辑就这些

原代码中，在第一步，设置的背景图片是引用工程内的图片文件，现在要改为使用fileId去获取，这里就出现了一个问题，我司使用的是对象存储服务器，在本地运行时，好好的，没有遇到问题，可是发布到服务器上，就发现了问题，报错： “Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.”

简单查阅了一下资料，说是因为图片资源导致的跨域问题使用 canavs.toDataURL() 时，会报错。

还有一些解决方案：

1. 设置html2canvas方法的options

new html2canvas(container, {
  // 有的说设置成false，有的说设置成true，我都设置了，没啥用...
  // （关键是本地无法复现，我都是改完之后，打包发布到开发环境，然后再看效果...）
  // （相当耽误时间）
  allowTaint: true, 
  useCORS: true,
  foreignObjectRendering: true, // 不知道啥意思，死马当活马医了...
}).then(canvas => {
  console.log(canvas.toDataURL())
})

2. 设置image的属性crossOrigin为anonymous，好像不适用我的场景（也不知道是否生效）
3. 不要使用跨域的图片资源…（基于这个方案，我还去找产品商量了一下，要不这个图片就不要使用动态的了吧…产品让我再看看，再想想，实在不行再说…）

反正也没其他着急的事，继续弄呗

后来找到一个思路，通过fileId获取到图片之后，我把这个图片转成base64之后，在第一步使用base64作为容器的背景图片的url，不就不会有跨域的问题了么…

于是，我开始寻找方案…

/**
 * 根据图片url，获取base64
 * 我司图片路径：https://xxx/api/xxx/download?fileId=dzpnjIdg8QspfQe8lgO
 * 这个地址输入到浏览器地址栏中会直接显示一张图片
 **/
 export function getBase64(fileUrl) {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest()
    xhr.open('get', fileUrl, true)
    xhr.responseType = 'blob'
    xhr.onload = function () {
     const fileReader = new FileReader()
     fileReader.onloadend = function(e) {
       resolve(e.target.result)
     }
     fileReader.readAsDataURL(xhr.response)
    }
    xhr.send()
  })
 }

好了，根据这个方法，传入fileUrl就可以获得这个图片的base64

在第一步使用这个方法之后，不报错了，又遇到一个问题…

new html2canvas(container, {
  allowTaint: true, 
  useCORS: true,
  foreignObjectRendering: true,
}).then(canvas => {
  console.log(canvas.toDataURL()) // 这里生成的base64是一个空白的图片...
})

又蒙圈了。。。

不知道怎么办才好，又瞅了好一会儿代码，发现那个配置没啥用了，于是…

new html2canvas(container).then(canvas => {
  console.log(canvas.toDataURL())
})

这样试验一下之后，发现图片可以展示了～

大功告成了！