H5公众号-canvas海报分享图+生成二维码

先npm install 安装这俩个插件，然后导入需要的页面中

二维码：

//第一步：引入：
import Qrcode from "@xkeshi/vue-qrcode";
// 第二步：注册：
components: {
    qrcode: Qrcode //二维码的插件需要注册组件
  },
// 第三步：使用：
<template>
	 <qrcode :value="qrcodeUrl"  style="width: 72px;height: 72px"></qrcode>
<template>Ï
// 第四步：
qrcodeUrl： 'https://baidu.com' // 自己定义地址

生成海报：

现在页面上写好海报的样式，然后通过this.$refs.xxx获取到节点传入html2canvas方法方法中，再赋值给img标签显示，浏览器默认图片自带保存功能

mage.crossOrigin支持跨域图片 这个一定要放在src赋值之前，否则再ios手机上图片显示不出来

import html2canvas from "html2canvas";
// 调用：
html2canvas(this.$refs.xxxx, { backgroundColor: null }).then(
        canvas => {
          // 转成图片，生成图片地址
          this.imgUrl = canvas.toDataURL("image/png");
          this.canvasShow = true;
        }
    );

海报一般都有接口返回的网络图，因为canvas无法绘制网络图，所以要下载到本地再调用html2canvas方法

handelCanvas() {
    const datas = {
      AlbumId: this.albumIdId
    };
    this.$axios.post(this.api.xxxxx, datas).then(res => {
      // console.log("分享快照==>", res);
      this.albumsShare = res.data;
      var that = this;
      this.main(res.data.HeadImg, function(base64) {
        that.HeadImg = base64;
      });
      res.data.AlbumImage = res.data.AlbumImage.substring(
        0,
        res.data.AlbumImage.indexOf("?")
      );
      console.log(res.data.AlbumImage);
      this.main(res.data.AlbumImage, function(base64) {
        that.AlbumImage = base64;
      });
    });
  },
 // 将图片转base64
  getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var dataURL = canvas.toDataURL("image/png"); // 可选其他值 image/jpeg
    return dataURL;
  },
  // 下载网络图片
  main(src, cb) {
    var image = new Image();
    image.crossOrigin = "*"; // 支持跨域图片 这个一定要放在src赋值之前，否则再ios手机上图片显示不出来
    image.src = src + "?v=" + Math.random(); // 处理缓存
    var that = this;
    image.onload = function() {
      var base64 = that.getBase64Image(image);
      cb && cb(base64);
    };
  },