vue使用html2canvas生成海报过程中遇到的坑，及生成二维码

html2canvas

最终效果图

安装

cnpm install html2canvas

页面引入

import html2canvas from "html2canvas";

1：因需求要点击生成就已经成为的图片，而html2canvas对于display为none的生产不了

解决方法：在需要生成海报的页面，布局好海报的html样式，并设置z-index: -1

2：使用上面那样的方式，当页面滚动一些距离后，生成的图片不完整

解决方法：
data() {
    return {
      dataImg: "",
      scrollVal: 200,
    };
  },
  
// 创建海报
 createPoster() {
    const me = this;
    // 当页面滚动一些距离后，生成的图片不完整,在生成方法里面加下面this.scrollVal 折行代码
    this.scrollVal =
    document.documentElement.scrollTop || document.body.scrollTop;
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
    
    const poster = document.getElementById("canvasPoster");
    html2canvas(poster, {
      // dpi: window.devicePixelRatio * 2,
      // backgroundColor: "#fff",
      // useCORS: true,//允许加载跨域的图片
      allowTaint: true, //允许跨域图片
      taintTest: false //是否在渲染前检测每张图片都已经加载完成
    }).then(canvas => {
      this.dataImg = canvas
        .toDataURL("image/png")
        .replace("image/png", "image/octet-stream");
    });
  },

2.1关于图片跨域（有两种情况）

1.服务端没有对图片做任何处理，就是上面的代码就行

2.如果服务端对图片进行了处理，图片格式如下图：

则需要注意两点：

• img标签不能有crossOrigin=“anonymous”
• useCORS: true,//这个属性需要打开

2.2注意：在关闭模态框需要重置滚动条

//关闭模态框触发
closePicModal() {
  document.body.scrollTop = this.scrollVal;
  document.documentElement.scrollTop = this.scrollVal;
}

3：也可以在进入页面的时候，加载完成后就调用生成图片，并把图片传入模态框，打开的时候直接显示

// 创建海报
createPoster() {
  const me = this;
  this.scrollVal =
    document.documentElement.scrollTop || document.body.scrollTop;
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
  const poster = document.getElementById("canvasPoster");
  html2canvas(poster, {
    // dpi: window.devicePixelRatio * 2,
    // backgroundColor: "#fff",
    // useCORS: true,//允许加载跨域的图片
    allowTaint: true, //允许跨域图片
    taintTest: false //是否在渲染前检测每张图片都已经加载完成
  }).then(canvas => {
    this.dataImg = canvas
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream");
	//pc端扫码过来，直接打开模态框
    if (me.saveUrl == "webGo") {
      let getTimestamp = new Date().getTime();
      me.modalOpenFlag = getTimestamp;
    }
  });
},

4：关于内容省略号问题

我是直接把文章的内容获取到，判断长度，增加的省略号

因为是Markdown的内容，所以是根据P标签的内容拼接的

5：关于边框阴影问题

开始是用的阴影图片，改布局，最后发现在不同手机的适配效果很差，改源码也麻烦，最后改了海报样式

二维码

安装

cnpm install  qrcodejs2 --save

页面引入

import QRCode from "qrcodejs2";

crateQrcode() {
  this.qr = new QRCode(this.$refs.qrcode, {
    width: 46,
    height: 46, // 高度
    text: this.qrcode // 二维码内容
    // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
    // background: '#f0f'
    // foreground: '#ff0'
  });
  // console.log(this.qrcode)
},

//生成二维码
qrCodeFun() {
  // 二维码内容,一般是由后台返回的跳转链接,这里是我根据环境直接拼接的一个连接
  this.qrcode = this.gb.pageLink("/article/" + this.distPublist[0].id);
  // 调用html转化canvas函数
  this.$nextTick(() => {
    this.crateQrcode();
  });
},

注意在每次关闭模态框的时候清空一次二维码

watch: {
	closePicModalNum: function(val) {
	  this.$refs.qrcode.innerHTML = "";
	},
}