药类网站整站模板下载,建筑库,精品网站建设费用 搜搜磐石网络,福田网站建设方案首先在写这个二维码分享海报的时候试过很多方法#xff0c;比如#xff1a;canvas中的这个createCanvasContext创建上下文的方法#xff0c;去网上一搜就是一大堆#xff0c;但其实这个方法已经被废弃了。Canvas 实例#xff0c;可通过 SelectorQuery 获取。这是绘制背景图…首先在写这个二维码分享海报的时候试过很多方法比如canvas中的这个createCanvasContext创建上下文的方法去网上一搜就是一大堆但其实这个方法已经被废弃了。Canvas 实例可通过 SelectorQuery 获取。这是绘制背景图的时候用到的这个方法下面首先看我的二维码是如何实现的。
二维码的话我是使用qrcode库来绘制的首先需要下载一个weapp.qrcode.esm文件然后在我需要绘制二维码页面的js中引入。
绘制二维码也可以去参考一下这位博主写的博客下载引入的文件
微信小程序二维码快速生成库weapp-qrcode 使用指南及问题解决方案-CSDN博客
import QRCode from ../weapp.qrcode.esm;
然后引入进去之后先写我们的wxml绘制二维码的canvas需要设置canvas-id这个不能相同
!--pages/qrcode/index.wxml--
view!-- 顶部导航栏样式 --view classtopview classround bind:taptargetHouseimage srchttp://lzh.yzwdblzs.xyz/img/houseThree.png alt //view/viewview classbig bindlongpresssaveQrcode!-- 二维码 --view stylemargin-left: -700px;position: absolute;canvas canvas-idmyQrcode stylewidth: 200px; height: 200px;background-color: azure;/canvas/view!-- 绘制的背景图 --canvas type2d idnewQrcode stylewidth: 350px;height: 700px;margin-top: 100px;/canvas!-- 背景图上的二维码 --canvas canvas-idnewsQrcode styleposition: absolute;z-index: 3;/canvas/view
/view
在onReady里初始化二维码是因为在我们刚打开页面的时候二维码就已经可以绘制出来
// 初始化二维码
QRCode({width: 200,height: 200,canvasId: myQrcode,colorDark: #000000,colorLight: #ffffff,text: https://github.com/yingye,//二维码绘制的具体内容
})
绘制成功后将生成文件的tempFilePath具体路径本地路径
// 保存二维码为临时路径wx.canvasToTempFilePath({canvasId: myQrcode,success(res) {console.log(二维码路径:, res);const tempQrcodePath res.tempFilePath;console.log(tempQrcodePath);wx.createSelectorQuery().select(#newQrcode).fields({node: true,size: true}).exec((res) {textCanvas res[0].node; // 获取 canvas 节点let textCtx textCanvas.getContext(2d); // 重点2/**至此textCanvastextCtx已经成功获取到下面代码为绘图测试代码可根据自己需要修改**/const dpr wx.getSystemInfoSync().pixelRatio; // 获取设备像素比console.log(dpr);textCanvas.width res[0].width * dprtextCanvas.height res[0].height * dprtextCtx.scale(1, 1)textCtx.fillRect(0, 0, 100, 100)textCtx.clearRect(0, 0, textCanvas.width, textCanvas.height)textCtx.beginPath();const bg textCanvas.createImage();bg.src http://lzh.yzwdblzs.xyz/img/noName.png;console.log(bg);bg.onload () {console.log(背景图加载成功);// 图片加载完成后绘制背景图// 如果背景图过大按比例缩放绘制const bgWidth bg.width;const bgHeight bg.height;// 计算缩放比例const scaleX textCanvas.width / bgWidth;const scaleY textCanvas.height / bgHeight;const scale Math.max(scaleX, scaleY); // 选择最大的比例以适应 canvas// 计算背景图绘制的尺寸const drawWidth bgWidth * scale;const drawHeight bgHeight * scale;// 绘制背景图textCtx.drawImage(bg, 0, 0, drawWidth, drawHeight);// 然后再绘制二维码// 加载二维码图像const qrImage textCanvas.createImage();qrImage.src tempQrcodePath; // 使用临时路径qrImage.onload () {console.log(二维码加载成功);// 设置二维码绘制位置居中const qrWidth 560; // 二维码宽度const qrHeight 600; // 二维码高度const qrX (textCanvas.width - qrWidth 30) / 2; // 水平居中const qrY (textCanvas.height - qrHeight 750) / 2; // 垂直居中// 绘制二维码到背景图上textCtx.drawImage(qrImage, qrX, qrY, qrWidth, qrHeight);}}})},fail(err) {console.error(获取临时文件失败, err);},});
