在H5、微信小程序中使用canvas绘制二维码、分享海报

文章目录

在H5、微信小程序中使用canvas绘制二维码、分享海报
前言
一、canvas绘制二维码
- 1.H5中使用canvas
- 2.微信小程序中使用canvas
二、canvas绘制分享海报常用方法

前言

提示：绘制二维码的插件有很多，有些仅支持H5，有些只适用微信小程序，故读者在使用二维码插件前需要先查看插件官方文档，查看其支持的环境

一、canvas绘制二维码

1.H5中使用canvas

H5中安装qrious插件

npm install --save qrious

引入qrious

 <script>import Qrcode from "qrious";</srcipt>

canvas模板

<canvas @tap="createQrCode()" style="width: 400rpx; height:400rpx"id="canvas2D"canvas-id="canvas2D"class="canvas"
></canvas>

初始化canvas

createQrCode() {let sharePath = "******";//需要编码为二维码的值let qr = new Qrcode({value: sharePath,size:800,background:'transparent',//二维码的背景颜色foreground:'black',//二维码的前景颜色// level:'L',  //二维码的误差校正级别(L, M, Q, H)});this.qrCodeSrc = qr.toDataURL(); //二维码地址//绘制海报this.$nextTick(() => {this.createSelectorQuery().select("#canvas2D").fields({node: true,size: true,}).exec(this.init.bind(this));});});
},

二维码绘制并渲染

async init(res) {try {uni.showLoading({ title: "生成中", mask: true });self = this;self.canvas = document.querySelector("canvas");let ctx = self.canvas.getContext("2d");let dpr = uni.getSystemInfoSync().pixelRatio;self.canvas.width = res[0].width * dpr;self.canvas.height = res[0].height * dpr; //画布放大后绘制比例也相应放大，这样绘图时就能按原尺寸计算let qrUrl = new Image();qrUrl.src = self.qrCodeSrc;qrUrl.onload = function () {ctx.drawImage(qrUrl,0,0,self.canvas.width/dpr,self.canvas.height/dpr);};uni.hideLoading();} catch (error) {uni.hideLoading();console.log(error, "init.error");}}

2.微信小程序中使用canvas

微信小程序中安装weapp-qrcode插件

npm install weapp-qrcode --save

引入weapp-qrcode

 <script>import qrCode from 'weapp-qrcode';</srcipt>

canvas模板

<canvas style="z-index: 1;;width: 460rpx; height: 460rpx;"canvas-id="qrcode">
</canvas>

二维码绘制并渲染

createQrCode() {let self = this;let px1 = 460 / 750 * wx.getSystemInfoSync().windowWidth;let content = "**********";//二维码内容//生成二维码new qrCode('qrcode', {text: content,width: px1,height: px1,showLoading: true, // 是否显示loadingloadingText: '二维码生成中', // loading文字colorDark: '#000000',colorLight: '#FFFFFF',correctLevel: 3})
},

二、canvas绘制分享海报常用方法

文字单行+…

/*str:要绘制的字符串canvas:canvas对象initX:绘制字符串起始x坐标initY:绘制字符串起始y坐标lineHeight:字行高 32canvasWidth:文字宽度
*/
canvasTextSingleLine(str,ctx,initX,initY,lineHeight,canvasWidth,textStyle
) {let strArr = str.split("");let row = [];let temp = "";for (let i = 0; i < strArr.length; i++) {if (ctx.measureText(temp).width < canvasWidth) {temp += strArr[i];} else {i--; //这里添加了i-- 是为了防止字符丢失，效果图中有对比row.push(temp);temp = "";}}row.push(temp); // row有多少项则就有多少行let showText=""//显示的文字//如果数组长度大于1，现在只需要显示一行则只截取第一项,把第一行结尾设置成\'...\'if (row.length >1) {let rowCut = row.slice(0, 1);let rowPart = rowCut[0];showText = rowPart + "..." //这里只显示一行，超出的用...表示;}ctx.fillText(row, initX, initY, canvasWidth);ctx.fillStyle = textStyle.color;ctx.textAlign = textStyle.align;
},

文字换行

/*str:要绘制的字符串canvas:canvas对象initX:绘制字符串起始x坐标initY:绘制字符串起始y坐标lineHeight:字行高 32canvasWidth:文字宽度
*/
canvasTextAutoLine(str,ctx,initX,initY,lineHeight,canvasWidth,textStyle
) {var lineWidth = 0;var lastSubStrIndex = 0;for (let i = 0; i < str.length; i++) {lineWidth += ctx.measureText(str[i]).width;if (lineWidth > canvasWidth - initX) {ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);initY += lineHeight;lineWidth = 0;lastSubStrIndex = i;this.wrapIndex++;console.log(241, this.wrapIndex);}if (i == str.length - 1) {ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);}// ctx.font = "bold ".concat(textStyle.fontSize, "px Arial");ctx.fillStyle = textStyle.color;ctx.textAlign = textStyle.align;}
},

绘制带圆弧的矩形

drawRoundedRect(ctx, x, y, w, h, r, dpr, fillStyle) {ctx.beginPath();ctx.moveTo(x + r, y);ctx.arcTo(x + w, y, x + w, y + h, r);ctx.arcTo(x + w, y + h, x, y + h, r);ctx.arcTo(x, y + h, x, y, r);ctx.arcTo(x, y, x + w, y, r);ctx.fillStyle = fillStyle; //设置填充颜色ctx.fill();ctx.closePath();},

画一个圆形图片

circleImg(ctx, img, x, y, w, h, r) {//头像let size = 2 * r;ctx.save(); // 先保存状态 已便于画完圆再用ctx.beginPath(); //开始绘制//先画个圆ctx.arc(x, y, r, 0, Math.PI * 2);ctx.fill() //保证图片无bug填充ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸ctx.drawImage(img, x - r, y - r, size, size) // 推进去图片ctx.restore();
},

觉得写得好的话记得点赞收藏+关注哦

在H5、微信小程序中使用canvas绘制二维码、分享海报相关推荐

【Exception】微信小程序，配置普通链接二维码规则文件校验失败问题校验文件检查失败扫普通链接二维码打开小程序
[Exception]微信小程序,配置普通链接二维码规则文件校验失败问题校验文件检查失败扫普通链接二维码打开小程序一.问题描述 1.公司业务有个需求,扫描普通的二维码,跳转到小程序的某个页面, ...
微信小程序内部长按识别二维码添加个人微信
项目场景: 最近接到需求,在小程序内部长按识别二维码添加个人微信. 初步效果: 问题描述:web-view官方文档微信小程序目前image标签,仅支持长按识别小程序码,后面查看网上相关资料,发现微信 ...
微信小程序内，生成自定义二维码
最近在开发中,需要生成自定义的二维码,于是做了一个包出来,分享给大家一起使用.适用于微信小程序的二维码生成器,基于Canvas生成,支持中文的输入.可在原生小程序,mpvue,taro中使用.(文末有 ...
微信小程序实战教程1503---生成二维码
在微信小程序中,如果我们可以自己将指定内容生成二维码,出示给别人,将是一个比较有用的功能.但是微信小程序API中,目前暂时还没有这个功能,但是我们可以通过变通的方法,来实现这一功能. 本文所提到的方法 ...
微信小程序开发：文字转二维码
使用开源组件:weapp-qrcode-canvas-2d 亲测渲染性能,生成速度等均优于其他小程序实现方式,虽然star较少,但是目前没发现什么问题以下内容摘自github项目readme.md文 ...
h5嵌入微信小程序webView长按识别二维码
1.h5页面用于渲染图片 <div id="app"><div class="priview-img"><imgv-for=&qu ...
微信小程序-预览图片识别二维码
wx.getImageInfo(Object object) 获取图片信息.网络图片需先配置download域名才能生效. 测试图片地址:http://mmbiz.qpic.cn/mmbiz_png/ ...
微信小程序调用摄像头扫描识别二维码和条形码
今天在整一个有关于快递的小程序,快递单号一般比较长,手动录入会很麻烦. 然后就找了一下,其实微信小程序 API 中自带一个扫码识别的功能. wx.scanCode(Object object) 调起客 ...
微信小程序任意指定页面生成二维码
在日常微信小程序运营中,文章,和朋友圈海报内总会用到微信小程序特定页面二维码第一步:登录微信公众平台https://mp.weixin.qq.com/ 第二步:点击右上角工具->生成小程序码 ...

在H5、微信小程序中使用canvas绘制二维码、分享海报

在H5、微信小程序中使用canvas绘制二维码、分享海报

文章目录

前言

一、canvas绘制二维码

1.H5中使用canvas

2.微信小程序中使用canvas

二、canvas绘制分享海报常用方法

在H5、微信小程序中使用canvas绘制二维码、分享海报相关推荐

最新文章

热门文章