前端vue生成二维码，再合成海报图片

需求

工作中有一个将地址生成二维码，再将二维码与一张背景图合成一张海报的需求

实现

1.生成二维码

//下载插件实现
import QRCode from 'qrcode'
//生成二维码的方法 url-地址；picUrl-背景图片地址；
getQRpic(url, picUrl) {let that = thisQRCode.toDataURL(url).then((qrUrl) => {that.getPosterPic(qrUrl, picUrl)}).catch((err) => {console.error(err)})},

2.合成一张图片

 getPosterPic(qrUrl, picUrl) {let that = thisfunction drawAndShareImage() {var canvas = document.createElement('canvas')var myImage = new Image()myImage.src = picUrl //背景图片myImage.crossOrigin = 'Anonymous'myImage.onload = function () {canvas.width = myImage.widthcanvas.height = myImage.heightvar context = canvas.getContext('2d')context.rect(0, 0, canvas.width, canvas.height)context.fillStyle = '#fff'context.fill()context.drawImage(myImage, 0, 0, myImage.width, myImage.height)var myImage2 = new Image()myImage2.src = qrUrl //二维码图片myImage2.crossOrigin = 'Anonymous'myImage2.onload = function () {let x = 515 // myImage.width - myImage2.width - 34let y = 1112 // myImage.height - myImage2.height - 10// console.log(x, y, (220 / 750) * myImage.width)context.drawImage(myImage2, x, y, 220, 220)var base64 = canvas.toDataURL('image/png') //"image/png" 这里注意一下const a = document.createElement('a')a.href = base64a.setAttribute('download', '图片名称')a.click()}}}

前端vue生成二维码，再合成海报图片相关推荐

Vue生成二维码，自定义插入图片生成logo
Vue生成二维码,自定义插入图片生成logo vue-qr是一个很棒的制作二维码开源库,github地址:https://github.com/Binaryify/vue-qr 1.安装vue-qr ...
vue 中生成二维码，合成海报
1.分别引入 qrcodejs2.html2canvas 执行以下命令行 npm install qrcodejs2 npm install html2canvas 2.下载canvas2image, ...
vue使用 vueQr，html2canvas 实现批量生成二维码并合成海报
开始 npm install vue-qr --save // 安装依赖//使用// 1. 页面引入组件import vueQr from "vue-qr";components: ...
Vue 生成二维码，转换成图片，下载到本地
下载插件 npm i qrcodejs2 引用 import QRCode from "qrcodejs2"; html <button @click="handl ...
php生成二维码并与背景图片合成
1. 下载 phpqrcode PHP QR Code是一个PHP二维码生成类库,利用它可以轻松生成二维码,官网提供了下载和多个演示demo,查看地址:http://phpqrcode.source ...
vue使用qrcodejs2生成带log的二维码图片，vue生成二维码图片中间带log，自定义log
安装插件 npm install qrcodejs2 --save 在页面中引入 import QRcode from 'qrcodejs2' 普通的二维码此处的id就是页面中要展示二维码容器的id ...
前端批量生成二维码并打包下载
前端批量生成二维码并打包下载项目中遇到一个紧急需求在没有后端配合的情况下,前端独自实现生成二维码并打包下载生成二维码:下载 qrcodejs2 批量打包下载:下载 JSZip 和 FileSave ...
利用VUE生成二维码（两种方式）
利用Vue生成二维码 Author:kak vue有两种生成二维码的方式,qrcode.vue-qr(有icon): 1.qrcode npm ``install` `--save qrcodejs2 ...
js前端根据链接生成二维码并转成图片下载
js前端根据链接生成二维码并转成图片下载依赖于jquery.jquery.qrcode.min.js 1.html <div class="qrcode"></ ...
vue生成二维码并下载
vue生成二维码图片,这里使用的是qrcode.js 这个插件 1.下载插件 npm install --save qrcodejs2 2.组件内使用 <template> <B ...

前端vue生成二维码，再合成海报图片

需求

实现

前端vue生成二维码，再合成海报图片相关推荐

最新文章

热门文章