vue根据dom生成图片现在最新的版本应该是1.0.0，另外还有一个比较经典的版本是0.5.0，网上有许多关于这个版本的

安装

npm install html2canvas --save

现在最新的版本应该是1.0.0，另外还有一个比较经典的版本是0.5.0，网上有许多关于这个版本的bug说明。

页面引入

import html2canvas from 'html2canvas';

<template>
  <div>
    <div id="dom">test</div>
    <button @click="getImg">生成图片</button>
    <div id="get"></div>
  </div>
</template>

<script>
  import html2canvas from 'html2canvas';
export default {
  name: 'HelloWorld',
  data () {
    return {

    }
  },
  methods: {
    getImg() {
      html2canvas(document.querySelector("#dom"),{
        async: true
      }).then(canvas => {
        document.querySelector("#get").appendChild(canvas)
      });
    }
  }
}
</script>

亲自测试有效

vue生成二维码

安装

npm install qrcodejs2 --save

页面引用

import QRCode from 'qrcodejs2'

html部分

<button @click="getQRcode">生成二维码</button>
<div id="canvas"></div>

js部分

getQRcode(){
  let qrCode = new QRCode(document.querySelector("#canvas"), {
    width: 255,//二维码宽度，单位像素
    height: 255,//二维码高度，单位像素
    text: 'http://www.baidu.com', //二维码中的内容
    colorDark : '#000000',//前景色
    colorLight : '#ffffff',//背景色
  })
  console.log(qrCode)
}