使用 canvas 模拟微信生成二维码名片

需求说明

模拟微信的二维码名片的功能
接口获取到用户的二维码，前端将二维码，背景图，用户头像(圆形)，用户姓名等信息结合生成一张图片

示例

等比例创建画布

获取背景图，监听图片的 onload 事件
图片加载完成后，创建 canvas 元素
canvas 宽高比设定为背景图的宽高比，防止背景图变形或者被切掉

<img :src="reDrawQcodeSrc" alt="" />

// 可视窗口宽度
let pageWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;
// 可视窗口高度
let pageHeight =window.innerHeight ||document.documentElement.clientHeight ||document.body.clientHeight;
console.log("pageWidth", pageWidth);
console.log("pageHeight", pageHeight);
// 背景图片
let imgBg = new Image();
imgBg.src = require("../assets/shareBg.jpg");
imgBg.crossOrigin = "Anonymous";
imgBg.onload = () => {// 创建画布let canvas = document.createElement("canvas");// 规定画布大小canvas.width = pageWidth; // 画布宽度占满屏幕canvas.height = (canvas.width * imgBg.height) / imgBg.width; // 画布根据背景图宽高比等比例方法或缩小console.log("canvas.width1", canvas.width);console.log("canvas.height1", canvas.height);let context = canvas.getContext("2d");// 绘制背景图context.drawImage(imgBg, 0, 0, canvas.width, canvas.height);let base64 = canvas.toDataURL("image/png"); // 将 canvas 画布转换成 base64 码this.reDrawQcodeSrc = base64; // 赋值给 img 标签
};

添加二维码图片

等待加载完背景图后，绘制二维码图片
模拟接口获取二维码的地址
计算二维码图片展示的位置

// 二维码图片
let imgQcode = new Image();
this.qrcode = 'https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_960_720.jpg'
imgQcode.src = this.qrcode + "?time=" + new Date().valueOf(); // 模拟接口获取二维码，绘制线上图片
imgQcode.crossOrigin = "Anonymous";
imgQcode.onload = () => {let left = canvas.width * 0.2; // 二维码宽度设定为总宽的 60%，设定左侧空隙为 20% 使其水平居中let top = canvas.height * 0.8 - canvas.width * 0.6;// 绘制二维码context.drawImage(imgQcode,left,top,canvas.width * 0.6,canvas.width * 0.6);let base64 = canvas.toDataURL("image/png"); // 将 canvas 画布转换成 base64 码this.reDrawQcodeSrc = base64; // 赋值给 img 标签
};

添加文字描述

二维码图片加载完成后，绘制文字

// 绘制文字
//设置填充文字样式
context.font = "16px Microsoft Yahei";
context.fillStyle = "#ffffff";
//设置文字及其位置
context.fillText(this.userPhoneId + "的二维码",canvas.width * 0.23,canvas.height * 0.2
);
let base64 = canvas.toDataURL("image/png"); // 将 canvas 画布转换成 base64 码
this.reDrawQcodeSrc = base64; // 赋值给 img 标签

添加用户头像(圆形)

// 用户头像-圆形
let imgHead = new Image();
imgHead.src = require("../assets/logo.png");
imgHead.crossOrigin = "Anonymous";
imgHead.onload = () => {let circle = {left: canvas.width * 0.13,top: canvas.height * 0.2,radio: canvas.width * 0.065,};// 绘制圆形区域context.arc(circle.left, circle.top, circle.radio, 0, 2 * Math.PI);context.clip();context.fill();context.drawImage(imgHead,circle.left - circle.radio,circle.top - circle.radio,circle.radio * 2,circle.radio * 2);let base64 = canvas.toDataURL("image/png"); // 将 canvas 画布转换成 base64 码this.reDrawQcodeSrc = base64; // 赋值给 img 标签
};

完整代码

<template><div class="mainBox"><img :src="reDrawQcodeSrc" alt="" /></div>
</template>
<script>
export default {data() {return {qrcode:"https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_960_720.jpg",userPhoneId: "月半周",reDrawQcodeSrc: "",};},mounted() {this.reDrawQcode();},methods: {// 重绘图片-背景图与二维码的组合reDrawQcode() {// 可视窗口宽度let pageWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;// 可视窗口高度let pageHeight =window.innerHeight ||document.documentElement.clientHeight ||document.body.clientHeight;console.log("pageWidth", pageWidth);console.log("pageHeight", pageHeight);// 背景图片let imgBg = new Image();imgBg.src = require("../assets/shareBg.jpg");imgBg.crossOrigin = "Anonymous";imgBg.onload = () => {// 创建画布let canvas = document.createElement("canvas");// 规定画布大小canvas.width = pageWidth; // 画布宽度占满屏幕canvas.height = (canvas.width * imgBg.height) / imgBg.width; // 画布根据背景图宽高比等比例方法或缩小console.log("canvas.width1", canvas.width);console.log("canvas.height1", canvas.height);let context = canvas.getContext("2d");// 绘制背景图context.drawImage(imgBg, 0, 0, canvas.width, canvas.height);// 二维码图片let imgQcode = new Image();imgQcode.src = this.qrcode + "?time=" + new Date().valueOf(); // 模拟接口获取二维码，绘制线上图片imgQcode.crossOrigin = "Anonymous";imgQcode.onload = () => {let left = canvas.width * 0.2; // 二维码宽度设定为总宽的 60%，设定左侧空隙为 20% 使其水平居中let top = canvas.height * 0.8 - canvas.width * 0.6;// 绘制二维码context.drawImage(imgQcode,left,top,canvas.width * 0.6,canvas.width * 0.6);// 绘制文字//设置填充文字样式context.font = "16px Microsoft Yahei";context.fillStyle = "#ffffff";//设置文字及其位置context.fillText(this.userPhoneId + "的二维码",canvas.width * 0.23,canvas.height * 0.2);// 用户头像-圆形let imgHead = new Image();imgHead.src = require("../assets/logo.png");imgHead.crossOrigin = "Anonymous";imgHead.onload = () => {let circle = {left: canvas.width * 0.13,top: canvas.height * 0.2,radio: canvas.width * 0.065,};// 绘制圆形区域context.arc(circle.left, circle.top, circle.radio, 0, 2 * Math.PI);context.clip();context.fill();context.drawImage(imgHead,circle.left - circle.radio,circle.top - circle.radio,circle.radio * 2,circle.radio * 2);let base64 = canvas.toDataURL("image/png"); // 将 canvas 画布转换成 base64 码this.reDrawQcodeSrc = base64; // 赋值给 img 标签};};};},},
};
</script>

使用 canvas 模拟微信生成二维码名片相关推荐

二维码相关---java生成二维码名片,并且自动保存到手机通讯录中...
二维码相关---java生成二维码名片,并且自动保存到手机通讯录中... 技术qq交流群:JavaDream:251572072 1.首先介绍一个api. Zxing是Google提供的关于条码 ...
二维码相关---java生成二维码名片,而且自己主动保存到手机通讯录中...
版权声明:本文为博主原创文章,未经博主credreamer 同意不得转载违者追究法律责任. https://blog.csdn.net/lidew521/article/details/244418 ...
Wx腾讯微信生成二维码---＞微信扫描后注册并登录
Wx生成二维码 1.配置yml application.yml wx:open:# 微信开放平台 appidappid: wxed9954c01bb89b47# 微信开放平台 appsecretapp ...
（转）ZXing生成二维码和带logo的二维码，模仿微信生成二维码效果
场景:移动支付需要对二维码的生成与部署有所了解,掌握目前主流的二维码生成技术. 1 ZXing 生成二维码首先说下,QRCode是日本人开发的,ZXing是google开发,barcode4j也是老 ...
ZXing生成二维码和带logo的二维码，模仿微信生成二维码效果
首先说下,QRCode是日本人开发的,ZXing是google开发,barcode4j也是老美开发的,barcode4j对一维条形码处理的很好,而且支持的格式很多,当然也可以对二维码进行处理,效果个人 ...
微信生成二维码 PHP
<?php /*** Created by PhpStorm.* User: liyiming* Date: 2019/8/8* Time: 14:23*/ # 生成二维码 class WxTC ...
Asp.net 获取泛微OA个人信息并生成二维码名片vCard
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.二维码名片vCard是什么? 二.使用步骤 1.引入库 2.读取OA数据 3.生成名片 4.名片效果前言记录学 ...
Android 简单生成二维码名片
二维码名片是现在很常见的,这里只是一个简单生成二维码,如果对二维码名片的内容没有过多的要求,可以借鉴一下.生成二维码用的是谷歌的Zxing库,关于扫码,这里就不多说了. zxing下载地址:http: ...
php生成二维码名片和读取二维码图片信息
扫描后识别和读取所需软件.php扩展

使用 canvas 模拟微信生成二维码名片

需求说明

示例

等比例创建画布

添加二维码图片

添加文字描述

添加用户头像(圆形)

完整代码

使用 canvas 模拟微信生成二维码名片相关推荐

最新文章

热门文章