vue二维码生成且带文字图片下载

（一）web页面效果：

（二）执行结果：

（三）vue代码实例：

1）安装qrcode-vue库：npm install --save qrcode-vue

2）安装html2canvas库：npm install --save html2canvas

3）vue代码

<template>
<div><div class="div-box"><div ref="content" style="width:fit-content;height:fit-content;text-align: center;"><qrcode-vue:size="qrcodeVue.size":value="qrcodeVue.value":bgColor="qrcodeVue.bgColor":fgColor="qrcodeVue.fgColor"></qrcode-vue><p>描述文字...</p></div></div> <el-button type="primary" icon="el-icon-document" size="small" @click="downloadCode">下载二维码文字图片</el-button>
</div>
</template><script>import qrcodeVue from 'qrcode-vue'import html2canvas from 'html2canvas'export default {name: 'Test',components: { qrcodeVue },data () {return {qrcodeVue: {size: 150,bgColor: '#67C23A', //背景色fgColor: '#FFFFFF', //前景色value: 'qrCode value', //二维码值logo: require('@/assets/logo.png') //logo图片}}},created () {},mounted () {},methods: {downloadCode(){let content = this.$refs.contentlet scrollHeight = content.scrollHeightlet scrollWidth = content.scrollWidthhtml2canvas(content,{scale: window.devicePixelRatio*2,useCORS: true , //开启跨域配置，但和allowTaint不能共存width:scrollWidth,height:scrollHeight,windowWidth:scrollWidth,windowHeight:scrollHeight,x:0,y:window.pageYOffset}).then((canvas) => {this.operType = 'edit'let dataURL = canvas.toDataURL("image/jpg");let link = document.createElement("a");    link.href = dataURL;let filename = `二维码文件名.jpg`;  //文件名称link.setAttribute("download", filename);link.style.display = "none"; //a标签隐藏document.body.appendChild(link);link.click();})}}}
</script><style>
.div-box {width:fit-content;height:fit-content;padding: 2px;border: 1px dashed #f69c55;position: relative;text-align: center;margin-bottom: 5px;
}
</style>

vue二维码生成且带文字图片下载相关推荐

Tp5生成带头像二维码海报（带文字描述，居中调整）
Tp5生成带头像二维码海报(带文字描述,居中调整) 三张海报中随机生成一张展现 /*** 获取随机海报* Author: yanjie <823986855@qq.com>* Date: ...
vue二维码生成插件 - npm安装篇
vue二维码生成插件 - npm安装篇具体使用: 1. 安装: npm install vue-qr --save 2. 引入和声明 //在需要生成二维码的文件中引入比如qrCode.vue imp ...
二维码生成、扫描、图片识别（Zxing）
这样的例子虽然已经很多了,不过我在网上浏览了一圈,也没找到几个图库二维码图片识别例子,好的算法识别率才高.这里有一个好点的算法,算法不是我写的,只是作为整理记录,给众多安卓开发者一个方便.demo的U ...
vue二维码生成可自定义logo
代码已上传至github github代码地址:https://github.com/Miofly/mio.git <template xlang="wxml">< ...
vue二维码生成和打印
二维码生成存放二维码 <div id="qrCode" class="qrCode"><div id='code' class=" ...
vue二维码生成、打印及识别
生成二维码引入QRCode模块 npm install --save qrcode import QRCode from 'qrcode'; 页面代码批量创建二维码及打印,所以加了个v-for & ...
C# 二维码生成支持汉字中间带图片
前言此篇文章适合一些一脸懵逼开发二维码的人群,相信通过这篇文章能让你对二维码的认知从一无所知到牛逼到死,感谢我吧!骚年..!! 在写代码之前我觉得应该先讲一下二维码原理以及规则,每个区域的小黑快都有 ...
微信小程序参数二维码生成朋友圈分享图片
前言小程序目前无法分享到微信朋友圈,可朋友圈是一个非常重要的传播途径,所以得想办法把这个资源利用起来微信小程序支持通过扫描/长按识别二维码或小程序码图片的方式进入一个小程序首页或小程序中某个特定页 ...
uniapp H5 二维码生成
vue 二维码生成步骤: 1. 引入二维码 import QRCode from 'qrcodejs2' 2. html 3. 二维码生成事件 creatQrCode() { var qrcode = ...

vue二维码生成且带文字图片下载

vue二维码生成且带文字图片下载相关推荐

最新文章

热门文章