html转canvas的实现方法，并将canvas的base64字符串上传到七牛云上

最近做了一个生成海报功能，用户上传图片之后自动生成一张海报，由于海报样式很复杂，使用canvas绘制效率太低了，因此我想用html+css排版，然后将dom转成canvas，所以我找到了一个插件html2canvas，这个插件帮助我们将html转成canvas，不需要我们花时间去绘制了，这样生成的canvas可以转成base64并上传到七牛上面。

html2canvas安装

// Install NPM

npm install --save html2canvas

// Install Yarn

yarn add html2canvas

html2canvas使用

我们先将html写出来，并给要转换的dom父元素一个id=htmlContent

接着写一个html2canvas方法并添加配置,.then里面返回的就是生成的canvas，注意这里html2canvas使用的是Promise语法，更多配置项可以自行查找。

拿到canvas之后需要转换成base64上传到七牛上面，所以这里使用到了canvas的toDataURL方法去获取base64字符串，注意这里拿到的是';base64,'+字符串，所以需要分割split只要字符串

canvas.toDataURL(_type_, _encoderOptions_)


* `type`可选

图片格式，默认为 `image/png`

* `encoderOptions`可选

在指定图片格式为 `image/jpeg 或` `image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量`。如果超出取值范围，将会使用默认值 `0.92`。其他参数会被忽略。

ios13.4.1中失效的问题

在测试中遇到html2canvas的坑，在ios13.4.1版本中部分手机失效，去github上查询发现是html2canvas@1.0.0-rc.5版本包有问题，将html2canvas回退版本到1.0.0-rc.4就好了
github issue

注意html2canvas不支持css的伪类

上传七牛云

拿到base64了需要上传到七牛云上，七牛文档提供了这个接口
下面是七牛提供的demo，注意Authorization的值 UpToken 获取的token，UpToken 和token之间有一个空格

function putb64(){
  var pic = "填写你的base64后的字符串";
  var url = "http://upload.qiniup.com/putb64/20264"; //非华东空间需要根据注意事项 1 修改上传域名
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange=function(){
    if (xhr.readyState==4){
      document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
  }
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/octet-stream");
  xhr.setRequestHeader("Authorization", "UpToken 填写你从服务端获取的上传token");
  xhr.send(pic);
}

我项目里使用的axios，所以也将axios用法po出来
在上传之前先请求后台接口拿到token，所以这里用到了async/await，然后设置headers，七牛的域名拼接上res.key'https://xxx.com/' + res.key就是图片的地址啦。

async putb64 () {
  await this.getToken()
  let that = this
  let pic = this.dataURL
  let url = this.up_host + '/putb64/-1'
  http.post(url, pic, {
    headers: {
      'Content-Type': 'application/octet-stream',
      'Authorization': 'UpToken ' + this.token
    }
  })
    .then(res => {
      that.screenImgUrl = 'https://xxx.com/' + res.key + '?imageView2/0/w/1280/h/720'
      that.$emit('handleGetUrl', this.screenImgUrl)
    })
},
getToken () {
  let params = {
    bucket: 'bucket',
    file_name: 'test/' + new Date().getTime() + '.png'
  }
  return new Promise((resolve, reject) => {
    http.get('/qn/sign/v3', { params: params })
      .then(res => {
        this.token = res.token
        this.up_host = res.up_host
        resolve()
      })
  })
}

wx.chooseImage

由于是微信h5，所以上传图片用到了微信的jssdk --- wx.chooseImage

wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    }
});

注意:res.localIds是一个数组，数组长度等于你指定的count的值，也就是当count为1时，你想拿到src需要通过res.localIds[0]
localId可以作为img标签的src属性显示图片，所以上传后的图片只用localId显示就可以了，
但是这里就有坑了，因为部分安卓手机生成canvas时出现 Error loading image weixin://resourceid/xxx的报错，这个兼容问题需要用到getLocalImgData找到localID的图片转换成base64就可以解决了

wx.getLocalImgData({
      localId: localId,
      success: function (res) {
        var localData = res.localData
        if (localData.indexOf('data:image') !== 0) {
          // 判断是否有这样的头部
          localData = 'data:image/jpeg;base64,' + localData
        }
        // 第一个替换的是换行符，第二个替换的是图片类型，因为在IOS机上测试时看到它的图片类型时jgp，
        // 这不知道是什么格式的图片，为了兼容其他设备就把它转为jpeg
        localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
        callback && callback(localData)
      },
      fail: function (res) {
        console.log(res)
      }
    })
})