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

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

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

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue2/vue3全家桶专栏收录该内容

42 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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" alt="">
        <img src="../bg5.png" alt="">
        <img src="../bg6.png" alt="">
    </div>
</template>

html2canva可配置属性：

属性名	    默认值	     	描述
allowTaint	false	是否允许不同源的图片污染画布
backgroudColor	#ffffff	画布背景颜色，如果 DOM 中没有指定，则默认为白色。设置 null 则为透明
canvas	null	现有的 canvas 元素，用作绘图的基础
foreignObjectRendering	false	如果浏览器支持 ForeignObject rendering，是否使用它
imageTimeout	15000	加载图片超时（毫秒）。设置 0 关闭超时
ignoreElements	(element) => false	布尔函数，用于从渲染中删除匹配元素。
logging	true	启用日志记录以进行调试
onclone	null	在克隆文档流进行渲染时调用的回调函数，可用于修改将在不影响原始源文档流的情况下呈现的内容
proxy	null	Url 到代理，用于加载跨域图片资源。如果留空，则不会加载跨域图片。
removeContainer	true	是否清理克隆的 DOM 元素，html2canvas 暂时创建。
scale	window.devicePixelRatio	用于渲染的比例，默认为浏览器设备像素比率。
useCORS	false	是否尝试使用 CORS 从服务器加载图片
width	Element width	canvas 画布宽度
height	Element height	canvas 画布高度
x	Element x-offset	裁剪画布 x 坐标
y	Element y-offset	裁剪画布 y 坐标
scrollX	Element scrollX	渲染元素时使用的 X 滚动位置（比如元素使用 position: fixed）
scrollY	Element scrollY	渲染元素时使用的 Y 滚动位置（比如元素使用 position: fixed）
windowWidth	Window.innerWidth	渲染 Element 时要使用的窗口宽度，这可能会影响媒体查询等内容
windowHeight	Window.innerHeight	渲染 Element 时要使用的窗口高度，这可能会影响媒体查询等内容

vue2.x实现二维码跳转指定的url推荐使用vue-qr
安装vue-qr

npm install vue-qr --save

组件引入和生成二维码并绑定url使用

<template>
  <div>
    <vue-qr
      class="qr-code"
      :correctLevel="3"
      :autoColor="false"
      colorDark="#000001"
      colorLight="#FFFFFF"
      :text="qrUrl"
      :margin="10"
    />
  </div>
</template>


<script>
import VueQr from "vue-qr";
export default {
  data() {
    return {
      qrUrl: "",
    };
  },

  components: {
    VueQr,
  },

  created() {
    const a = document.createElement("a");
    a.href = "/test";
    this.codeUrl = `https://www.baidu.com?returnUrl=${encodeURIComponent(
      a.href
    )}`;
  },
};
</script>