用vue实现H5之canvas海报分享

之前有分享过用uni-app实现canvans的文章：https://www.jianshu.com/p/7c57ee8d1a31

实现大致相同，以下列出关键代码：

xml

<template>
  <div class="page-share-poster">
    <div class="share-canvas">
      <!-- canvas大小用2x尺寸 -->
      <canvas id="share-poster" width="510" height="868" />
    </div>
  </div>
</template>

js

获取canvas和context

// 获取canvas
getCanvas() {
  let canvas = document.getElementById('share-poster')
  canvas.width = 510
  canvas.height = 868
  return canvas
},
// 获取图形上下文context
getCxt(canvas) {
   return canvas.getContext('2d')
},
    

加载网络图片

// 加载图片
loadImg(url) {
  return new Promise((resolve, reject) => {
     let img = new Image()
     // 允许跨域
     img.setAttribute('crossOrigin', 'Anonymous')
     img.onload = () => {
       resolve(img)
     }
     img.onerror = () => {
        this.$showToast('图片下载失败')
     }
     img.src = url
  })
},

其它绘制代码与uni-app中使用一样