前端生成二维码及把页面转为图片保存到本地

前端生成二维码及把页面转为图片保存到本地

Bayi·

于 2021-12-23 17:08:37 发布

847
 收藏 3
文章标签： 前端 javascript 生成二维码 页面转图片 vue
版权
以vue项目为例，其他类型项目其实也是一样的

所需components：
QRCode

html2canvas

npm install qrcodejs2 -- save

npm install html2canvas --save 

 在需要使用的地方引入

import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
 生成二维码
 creatQrCode() {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.url + 'register?code=' + this.info.code,
        colorDark: '#000000',
        colorLight: '#ffffff',
        width:80,
        height:80,
        correctLevel: QRCode.CorrectLevel.H
      })
    },
 
// this.$refs.qrCodeUrl 用来承载二维码的容器
// text 二维码包含的信息
// 其余配置看文档去
dom转图片
   toImage() {
      html2canvas(this.$refs.imageWrapper).then(canvas => {
        this.imgUrl = canvas.toDataURL('image/png')
        if (this.imgUrl !== '') {
          var a = document.createElement('a') // 创建一个a节点插入的document
          var event = new MouseEvent('click') // 模拟鼠标click点击事件
          a.download = '图片名字' // 设置a节点的download属性值
          a.href = this.imgUrl // 将图片的src赋值给a节点的href
          a.dispatchEvent(event) // 触发鼠标点击事件
        }
      })
    }
 
// this.$refs.imageWrapper 容器，生成的图片就是其中包含的内容
// this.imgUrl 就是生成的图片地址

 小demo，供参考
<template>
  <div class="bgBox" ref="imageWrapper">
    <div class="name">{{ info.name }}</div>
    <img class="bgImg" :src="img" alt="" />
    <div class="qrcode" ref="qrCodeUrl"></div>
  </div>
</template>
 
<script>
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
import img from '@/assets/img/bg.jpg'
export default {
  data() {
    return {
      info: {},
      img,
      // url:process.env.VUE_APP_BASE_API
      url: 'https://baidu.com/'
    }
  },
  mounted() {
    this.info = this.$route.query
    this.creatQrCode()
    this.$nextTick(() => {
      this.toImage()
    })
  },
  methods: {
    // 生成二维码
    creatQrCode() {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.url + 'register?code=' + this.info.code,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    // dom转图片
    toImage() {
      html2canvas(this.$refs.imageWrapper).then(canvas => {
        this.imgUrl = canvas.toDataURL('image/png')
        if (this.imgUrl !== '') {
          var a = document.createElement('a') // 创建一个a节点插入的document
          var event = new MouseEvent('click') // 模拟鼠标click点击事件
          a.download = '图片名字' // 设置a节点的download属性值
          a.href = this.imgUrl // 将图片的src赋值给a节点的href
          a.dispatchEvent(event) // 触发鼠标点击事件
        }
      })
    }
  }
}
</script>
 
<style lang="less" scoped>
.bgBox {
  position: relative;
  width: 750px;
  height: 1334px;
  .bgImg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
  .name {
    position: absolute;
    top: 64px;
    left: 330px;
    z-index: 2;
    font-size: 42px;
  }
  .qrcode {
    position: absolute;
    bottom: 44px;
    left: 40px;
    width: 160px;
    height: 160px;
  }
}
</style>
文章知识点与官方知识档案匹配，可进一步学习相关知识
————————————————
版权声明：本文为CSDN博主「Bayi·」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42044542/article/details/122111798