vue中将链接转二维码图片，2张图合成为1张图

1.将链接转为二维码图片

首先，下载插件：npm install qrcodejs2 --save

html代码如下：

  <div ref="qrcode" style="display: none;"  />

js代码如下：

new QRCode(this.$refs.qrcode, {width: 100, // 设置宽度，单位像素height: 100, // 设置高度，单位像素text: link // 需要转换为二维码图片的链接
});

2.2张图合成为1张图

html代码

// 使用canvas将2张图画在一起
<canvas ref="canvas" />

js代码：

import img from '@/assets/images/1.png';
//将要画的第二张图导入const canvas = this.$refs.canvas;canvas.width = 100;canvas.height = 100;const context = canvas.getContext('2d');context.rect(0, 0, canvas.width, canvas.height);context.fillStyle = '#fff';context.fill();var myImage2 = new Image();myImage2.onload = () => {// 先画下面的图context.drawImage(myImage2, 0, 0, 100, 100);const myImage = new Image();myImage.crossOrigin = 'Anonymous';myImage.onload = () => {// 画上面的图context.drawImage(myImage, 20, 20, 30, 30);// 提取合成后图片的链接this.qrcodeUrl = canvas.toDataURL('image/png');};myImage.src = img;};myImage2.src = document.querySelector('#qrcode').children[1].toDataURL('image/png');

3.下载合成后的图片

   const link = document.createElement('a');link.href = this.qrcodeUrl;link.download = 'qrCode.png';this.qrcodeUrl && link.click();

vue中将链接转二维码图片，2张图合成为1张图相关推荐

vue将链接转为二维码的方法即插件
1.将链接转为二维码图片第一步先下载插件:npm install qrcodejs2 --save html页面: <div class="share_box">&l ...
vue 根据链接生成二维码(功能实现)
今天同事问我一个问题,在vue项目中想要根据一个链接显示对应的二维码该怎么实现. 我前一段时间,有用apicloud项目生成二维码的功能,但是vue版本的没有处理过.百度后找到一个可行的方案: 大神实 ...
iOS常用功能 - 根据链接生成二维码图片
根据链接生成二维码 1 -(void)generatingTwoDimensionalCode { 2 3 // 创建过滤器 4 CIFilter *filter = [CIFilter filter ...
Vue中链接生成二维码
1.安装插件 npm install qrcodejs2 --save 2.导入组件 import QRCode from 'qrcodejs2' 3.页面中添加二维码 <div id=&quo ...
android通过链接生成二维码图片
近期在项目中要做三级分销,就是通过分享图片让好友扫码注册下载.具体代码如下: 1.导入框架: compile 'cn.yipianfengye.android:zxing-library:2.2' 2 ...
URL链接转二维码图片
/** 请求二维码图片流*/public void openQrcode(){String url = getPara("link");if(StringUtil.isEmpty( ...
Vue+Element-Ui项目中使用qrcodejs2将链接生成二维码
1. 下载安装包 npm i qrcodejs2 -S 2. 在要生成二维码的页面或组件内导入qrcodejs2 import QRCode from "qrcodejs2"; 3 ...
链接生成二维码( QRCode )
Vue中链接生成二维码安装插件 sudo npm install qrcodejs2 --save 页面中引入 import QRCode from "qrcodejs2"; c ...
Vue - 使用qrcodejs2生成二维码
了解:QR码(英语:Quick Response Code:全称为快速响应矩阵图码)是二维码的一种, QR来自英文Quick Response的缩写,即快速反应,因为发明者希望QR码可以快速解码其内容 ...

vue中将链接转二维码图片，2张图合成为1张图

1.将链接转为二维码图片

2.2张图合成为1张图

3.下载合成后的图片

vue中将链接转二维码图片，2张图合成为1张图相关推荐

最新文章

热门文章