html2canvas组件截图以及vue-qr动态生成二维码

最新推荐文章于 2025-06-25 19:45:00 发布

原创

最新推荐文章于 2025-06-25 19:45:00 发布 · 567 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了在Vue2.x项目中如何利用html2canvas库实现组件截图，并结合vue-qr生成二维码，实现分享功能。首先通过npm或yarn安装html2canvas和vue-qr，然后在组件中调用html2canvas生成截图，配置相关参数如allowTaint和scale。接着介绍vue-qr的使用，生成二维码并绑定url，创建链接跳转。示例代码详细展示了具体实现过程。

vue2.x实现组件截图分享推荐使用html2canvas组件库
工程化项目中可直接使用npm安装：

npm install html2canvas --save  
或者使用yarn安装
yarn add html2canvas

组件中使用：

<div>
     <--生成testCavans组件截图展示--!>
     < img :src="base64Url"/>
     
   <-- 测试组件--!>
    <testCavans />
</div>

import html2canvas from 'html2canvas'
import testCavans from './testCavans.vue'

 html2canvas(document.querySelector('#cavansImgs'), {
        useCORS: true,
        allowTaint: true,
        scale: Math.min(3, window.devicePixelRatio || 2)
      }).then(canvas => {
        const imageUrl = canvas.toDataURL('image/jpeg', 0.92)
        this.base64Url = imageUrl
        })
      })
    }

将testCavans.vue作为生成截图目标组件

<template>
    <div id="cavansImgs">
        <img src="../bg1.png" alt="">
        <img src="../bg2.png" alt="">
        <img src="../bg3.png" alt="">
        <img src="../bg4.png" al