canvas 踩坑记

前言

原来以为还不想这么快接触canvas的，可是最近因为业务需要，不得不提前开始接触canvas了。

需求是根据后台传回来的图片和文字进行合成图片，然后保存到本地

虽然可以根据现有的插件html2canvas，但是毕竟第一次接触，也想了解下canvas的 api，所以还是自己动手写写咯

要实现的最后的样子如下，就大概画了个草图：

实现草图

实现这样的内容，其实也还算简单，使用到的 api 也不多，主要就两个，一个是绘制文本的fillText，一个是绘制图片的drawImage。

踩坑过程

图片位置计算

因为需要依次获取图片，好计算下一张图片的显示位置，所以这里简单使用promise去加载图片，并且将当前的图片对象返回，之后好记录些数据：

function loadImageSync(src) {
  return new Promise(resolve => {
    let img = new Image()
    img.onload = () => {
      resolve(img)
    }
    img.src = src
  })
}

然后就可以这样使用了：

// 假设img_src1和img_src2是后台获取到的
let { img_src1, img_src2 } = this.data
let img1 = null
loadImageSync(img_src1)
  .then(img => {
    img1 = img
    ctx.drawImage(img1, 0, 0)
    return loadImageSync(img_src2)
  })
  .then(img => {
    ctx.drawImage(img, 0, img1.height)
  })

这样每张图片的绘制高度就容易计算了。

文本换行

因为bgImage部分还要显示一段文本内容，而文本内容也是从后台获取后来的，具体有多少字都是不清楚的，然后也不能全部放在一行，毕竟canvas没有提供文字换行的 api。。不过好在有measureText这个方法，这个方法可以返回文字的宽度，可以利用这点做个计算：

function textAutoLine(text, canvas, initX, initY, lineHeight) {
  let ctx = canvas.getContext('2d')
  // 等同于css的font
  ctx.font = 'bold 18px Microsoft Yahei'
  // 初始化一行字体的宽度为0
  let lineWidth = 0
  let canvasWidth = canvas.width
  // 初始化截取位置为0
  let lastSubStrIndex = 0
  for (let i = 0; i < text.length; i++) {
    // 循环计算每个字的宽度 并累加到行宽上
    lineWidth += ctx.measureText(text[i]).width
    // 判断行宽是否到达一个临界值 也就是： 容器宽 - 文字第一个字的位置 - 临界值（可自定义调整）
    if (lineWidth > canvasWidth - (initX + 40)) {
      // 一行达到临界，开始绘制，并且重置行宽，另起一行，开始绘制下一行
      ctx.fillText(text.substring(lastSubStrIndex, i), initX, initY)
      initY += lineHeight
      lineWidth = 0
      lastSubStrIndex = i
    }
    if (i === text.length - 1) {
      // 第二行字 再做偏移
      ctx.fillText(text.substring(lastSubStrIndex, i + 1), initX + 40, initY)
    }
  }
}

绘制 dom

底部内容是后台返回的一段html代码，因为是个dom片段，所以使用canvas绘制起来就相当麻烦了，经资料查找后发现可以通过特殊的方式，将dom绘制成图片：

function drawDomToImg(dom) {
  let domData = `<svg xmlns="http://www.w3.org/2000/svg" width="500" height="200">
                      <foreignObject width="100%" height="100%">
                        <div xmlns="http://www.w3.org/1999/xhtml">${dom}</div>
                      </foreignObject></svg>`
  let DOMURL = window.URL || window.webkitURL || window
  let svg = new Blob([domData], { type: 'image/svg+xml;charset=utf-8' })
  let src = DOMURL.createObjectURL(svg)
  return loadImageSync(src)
}

这样就能将一段dom也绘制成图片了，最后我们将绘制后的路径传到loadImageSync中，也能得到这个图片的信息了，比如宽和高。

图片跨域

整个内容都绘制完成之后，要将其生成图片，使用canvas的toDataURL就可以完成，不过这个操作出现了个问题，就是出现了图片跨域的问题。

经查找资料后发现，在使用canvas绘制的时候，图片的资源是本地或者外链都是可以的，但是生成图片的时候，使用外链的图片无法绘制进canvas中，可能是因为canvas的同源策略的保护机制吧。

解决方式需要两点，一个是改造我们之前的loadImageSync的方法，加入一句代码：

function loadImageSync(src) {
  return new Promise(resolve => {
    let img = new Image()
    // 加入这句
    img.setAttribute('crossOrigin', 'Anonymous')
    img.onload = () => {
      resolve(img)
    }
    img.src = src
  })
}

还有一个就是需要后台设置CORS了，就是设置Access-Control-Allow-Origin: *，允许跨域。这样就可以使用canvas生成图片了。

canvas踩坑