二维码内嵌图片，下载二维码

功能

二维码可内嵌图片
可下载二维码
功能集合成Vue组件

使用技术

Vue、qrcodejs2、html2canvas

直接上代码

<template><div class="qr" ref="pic"><img v-if="imgUrl" class="my-image" :src="imgUrl" alt=""><div ref="qrcode"></div></div>
</template>

<script>
import QRCode from "qrcodejs2";
import html2canvas from 'html2canvas';
export default {name: 'my-qrcode',props: {imgUrl: {type: String,default: ''},height: {type: Number,default: 100},width: {type: Number,default: 100},text: {type: String,default: '测试文字'}},mounted () {},watch: {text: {handler () {this.$nextTick(() => {this.load()})},immediate: true}},methods: {load () {// const text = params + "动态解析内容";// console.log(text, 'text');if (this.qrCode) {//单例 如果需要重复点击生成携带不同text内容的二维码，则需要通过这种方式//先清除 然后在使用makeCode重新更换 text内容//不然重复点击后下载的内容是最后一次点击的text，this.qrCode.clear();this.qrCode.makeCode(this.text);} else {this.qrCode = new QRCode(this.$refs.qrcode, {width: this.width,height: this.height,text: this.text,colorDark: "#000",colorLight: "#fff",});}},convertToImage (container) {// 2. 传入节点原始宽高const _width = container.offsetWidth;const _height = container.offsetHeight;// 3. html2canvas配置项const ops = {_width,_height,useCORS: true,allowTaint: false,};return html2canvas(container, ops).then(canvas => {// 4. 返回图片的二进制数据return canvas.toDataURL("image/png");});},// 下载二维码 给父组件调用download (name) {// 调用函数获取图片路径let picDom = this.$refs.picthis.convertToImage(picDom).then(res => {// 将图片下载到本地var x = new XMLHttpRequest();x.open("GET", res, true);x.responseType = 'blob';x.onload = function () {var url = window.URL.createObjectURL(x.response)var a = document.createElement('a');a.href = urla.download = name || '自定义图片名'a.click()}x.send();})}}
}
</script>

<style  scoped>
.qr {position: relative;display: inline-block;
}
.my-image {position: absolute;left: 0;top: 0;right: 0;bottom: 0;width: 25px;height: 25px;background: #FFF;padding: 5px;margin: auto;
}
</style>

二维码内嵌图片，下载二维码相关推荐

网页生成二维码把二维码变成图片下载二维码
目录网页生成二维码 1 将二维码变成图片 2 1效果:二维码变成了图片 2 下载二维码 2 1全部代码 3 网页生成二维码导入生成二维码需要的js文件(https://github.com/lrs ...
SpringBoot Zxing _ Java 生成二维码（可内嵌图片）
前提 jdk 要求:1.8:会 SpringBoot.Maven: 以下代码可以直接复制粘贴到项目中,可以直接使用~ 一.pom 准备 <?xml version="1.0" ...
内嵌式js微信扫码登录及自定义样式
关于微信扫码登录网站的功能介绍,请阅读官方文档[网站应用微信登录开发指南] 根据官方文档我们知道微信扫码登录有两种方式一种是跳转到一个大黑屏二维码界面进行扫码登录: (参见博客:PHP实现跳转式微信 ...
Markdown内嵌图片的解决方法
Markdown内嵌图片的解决方法文章目录 Markdown内嵌图片的解决方法问题与解决方案一.实现功能二.脚本制作 1.利用文件选择框选择文件或者从剪贴板读取图像 2.将图片转为Base64 ...
JavaMail（四）——发送HTML格式、内嵌图片、带附件的邮件
代码如下: package com.company;import javax.activation.DataHandler; import javax.activation.FileDataSourc ...
java发送内嵌图片邮件
前言: 博客系统中需要邮件服务的功能,以前写过类似的功能,不过功能太简单了,仅仅是发送文本内容,现在尝试一下发送内嵌图片邮件! 准备工作: 请参考:http://www.cnblogs.com/huj ...
WPS内嵌图片怎样使用Java获取图片？
wps表格中,将图片如图设置为内嵌图片格式时,Java后端的POI无法读取图片,有其他的解决办法吗?(图片设置为浮动图片时可正常读取)
Java发送内嵌图片的邮件
使用Java发送邮件时,既需要发送html文档又需要在邮件中内嵌图片(非附件形式),这里封装了一个类使用JavaMail组织的邮件发送,支持多张图片发送,并指定图片位置.注意img标签src要如下写& ...
响应式高端网站模板源码图库素材资源下载平台源码
首发好看的响应式高端网站模板源码图库素材资源下载平台源码(可运营)可用于做娱乐网资源网,功能非常的齐全无任何加密也无任何后门!响应式高端网站模板源码图库素材资源下载平台源码页面很美观,堪比大型网 ...

二维码内嵌图片，下载二维码

二维码内嵌图片，下载二维码相关推荐

最新文章

热门文章

二维码 内嵌图片，下载二维码

二维码 内嵌图片，下载二维码相关推荐

最新文章

热门文章

二维码内嵌图片，下载二维码

二维码内嵌图片，下载二维码相关推荐