vue 页面生成图片功能

墨蓝 2022-11-14 13:17 215阅读 0赞

首先感谢作者：[巨人][Link 1]

1首先安装依赖包

cnpm install html2canvas --save

sudo cnpm i qrcanvas --save

2

<template>
      <div>
        
        <img class="kahuf" v-if="!test" :src="imgSrc" alt />
        <div v-else>
          <div class="baijing">
            <img src="../../img/dc7a43e32fdbfbe605edf8347cbbde4.png" alt />
            
            <div id="qrcode"></div>
          </div>
           <button @click="btn" v-if="shuuju">点我生成</button>
        </div>
       
      </div>
    </template>

<script>
    import { qrcanvas } from "qrcanvas";
    //将整个页面转换成canvas
    import html2canvas from "html2canvas";
    
    export default {
      data() {
        return {
          test: true,
          imgSrc: "",
    
        };
      },
    
      methods: {
        btn() {
          this.shuuju=false
          //生成一个二维码 data是二维码跳转的地址（写自己需要跳转的地址即可）
          const canvas = qrcanvas({
            data:
              "https://www.baidu.com/s?ie=UTF-8&wd=%E8%8A%B1%E7%93%A3&tn=78000241_30_hao_pg",
            // console.log( data)
          });
          document.getElementById("qrcode").appendChild(canvas);
          //点击生成canvas转换成base64的图片
          this.$nextTick(() => {
            const that = this;
            html2canvas(document.body).then(function (canvas) {
              // console.log(canvas.toDataURL());
    
              that.imgSrc = canvas.toDataURL();
            });
            //隐藏元素
            this.test = false;
          });
        },
      },
    
      mounted() {},
    };
    </script>

[Link 1]: https://blog.csdn.net/weixin_45389051/article/details/105493364?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-1&spm=1001.2101.3001.4242

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue实现页面截图、保存图片功能

vue实现页面截图、保存图片功能一. html2canvas简介二. 如何使用 1.安装 2.引入 3.用法

淩亂°似流年/ 2023年10月11日 16:35/ 0 赞/ 67 阅读

相关使用vue实现HTML页面生成图片

这篇文章写得是实现HTML页面生成图片（附带二维码）并保存，之前做过这个需求，不过当时不太会使用VUE，采用的方法是后端来生成，前端也是使用了html2canvas辅助生成，比

朴灿烈づ我的快乐病毒、/ 2023年05月28日 12:58/ 0 赞/ 27 阅读

相关 vue 页面生成图片功能

首先感谢作者：[巨人][Link 1] 1首先安装依赖包 cnpm install html2canvas --save sudo cnpm i qrca

墨蓝/ 2022年11月14日 13:17/ 0 赞/ 216 阅读

相关 vue表格页面通用功能模块

例1： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

旧城等待，/ 2022年10月04日 13:57/ 0 赞/ 257 阅读

相关 vue实现图片滑动验证功能——功能实现

图片滑动验证，是目前比较常见的验证方式，主要目的是防止用户利用机器人自动注册、登录、灌水。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

今天药忘吃喽~/ 2022年08月31日 15:12/ 0 赞/ 492 阅读

相关 html页面生成图片并下载

<body> <div id="shareBody"> <div id="code"></div> <p>一些文

梦里梦外;/ 2022年05月12日 01:26/ 0 赞/ 307 阅读

相关页面生成图片-html2canvas

页面生成图片-html2canvas 引入js 示例编写html，指定根标签id：table 生成图片base64

客官°小女子只卖身不卖艺/ 2021年10月06日 03:08/ 0 赞/ 482 阅读

相关 vue项目中将页面生成图片或者PDF文档

vue中页面快速导出成图片或者PDF文档实现效果图image 实现代码将页面html转换成图片或者PDF文档

朴灿烈づ我的快乐病毒、/ 2021年09月09日 07:08/ 0 赞/ 359 阅读

相关 vue - 使用 html2canvas 将页面转为图片，实现分享功能

最近写的需求设计到了分享图片给好友的功能，所以我在这里总结一下实现方法，以及遇到问题的解决方法。一、效果图： 1、原页面： ![在这里插入图片描述][wat

素颜马尾好姑娘i/ 2021年09月02日 06:04/ 0 赞/ 895 阅读

相关 vue文件快速生成页面模板

一 Vscode新建模板 1 菜单选择 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

超、凢脫俗/ 2021年07月24日 20:35/ 0 赞/ 878 阅读