weapp-qrcode-canvas-2d
资源内容介绍
weapp-qrcode-canvas-2d在微信小程序中生成二维码，新版canvas-2d接口 # weapp-qrcode-canvas-2d [weapp-qrcode-canvas-2d](https://github.com/DoctorWei/weapp-qrcode-canvas-2d) 是使用新版canvas-2d接口在微信小程序中生成二维码（外部二维码）的js包。canvas 2d 接口支持同层渲染且性能更佳，建议切换使用，可大幅提升速度。# 仓库地址- [weapp-qrcode-canvas-2d【码云gitee】](https://gitee.com/WeiDoctor/weapp-qrcode-canvas-2d)- [weapp-qrcode-canvas-2d【github】](https://github.com/DoctorWei/weapp-qrcode-canvas-2d)<!--  --># 测试环境- 微信小程序基础库版本：2.10.4- 开发者工具版本：Stable 1.03.2101150# Usage先在 wxml 文件中，创建绘制的 `canvas`，并定义好 `width`, `height`, `id` , `type` ，其中type的值必须为`2d````html<canvas type="2d" style="width: 260px; height: 260px;" id="myQrcode"></canvas>```## 安装方法1：直接引入 js 文件直接引入 js 文件，使用 `drawQrcode()` 绘制二维码```js// 将 dist 目录下，weapp.qrcode.esm.js 复制到项目中。路径根据实际引用的页面路径自行改变import drawQrcode from '../../utils/weapp.qrcode.esm.js'```## 安装方法2：npm安装```npm install weapp-qrcode-canvas-2d --save```// 然后需要在小程序开发者工具中：构建npm```jsimport drawQrcode from 'weapp-qrcode-canvas-2d'```## 安装完成后调用### 例子1：没有使用叠加图片```jsconst query = wx.createSelectorQuery()query.select('#myQrcode') .fields({ node: true, size: true }) .exec((res) => { var canvas = res[0].node // 调用方法drawQrcode生成二维码 drawQrcode({ canvas: canvas, canvasId: 'myQrcode', width: 260, padding: 30, background: '#ffffff', foreground: '#000000', text: '大王顶真帅', }) // 获取临时路径（得到之后，想干嘛就干嘛了） wx.canvasToTempFilePath({ canvasId: 'myQrcode', canvas: canvas, x: 0, y: 0, width: 260, height: 260, destWidth: 260, destHeight: 260, success(res) { console.log('二维码临时路径：', res.tempFilePath) }, fail(res) { console.error(res) } }) })```### 例子2：使用叠加图片(在二维码中加logo)```jsconst query = wx.createSelectorQuery()query.select('#myQrcode') .fields({ node: true, size: true }) .exec((res) => { var canvas = res[0].node var img = canvas.createImage(); img.src = "/image/logo.png" img.onload = function () { // img.onload完成后才能调用 drawQrcode方法 var options = { canvas: canvas, canvasId: 'myQrcode', width: 260, padding: 30, paddingColor: '#fff', background: '#fff', foreground: '#000000', text: 'abc123', image: { imageResource: img, width: 80, // 建议不要设置过大，以免影响扫码 height: 80, // 建议不要设置过大，以免影响扫码 round: true // Logo图片是否为圆形 } } drawQrcode(options) // 获取临时路径（得到之后，想干嘛就干嘛了） wx.canvasToTempFilePath({ x: 0, y: 0, width: 260, height: 260, destWidth: 600, destHeight: 600, canvasId: 'myQrcode', canvas: canvas, success(res) { console.log('二维码临时路径为：', res.tempFilePath) }, fail(res) { console.error(res) } }) }; })```# API## drawQrcode([options])### optionsType: Object| 参数 | 必须 | 说明 | 示例|| ------ | ------ | ------ | ------ || canvas | 必须 | 画布标识，传入 canvas 组件实例 | || canvasId | 非 | 绘制的`canvasId` | `'myQrcode'` || text | 必须 | 二维码内容 | 'abc123' || width | 非 | 二维码宽度，与`canvas`的`width`保持一致 | 260 || padding | 非 | 空白内边距 | 20 || paddingColor | 非 | 内边距颜色 | 默认与background一致 || background | 非 | 二维码背景颜色，默认值白色 | `'#ffffff'` || foreground | 非 | 二维码前景色，默认值黑色 | `'#000000'` || typeNumber | 非| 二维码的计算模式，默认值-1 | 8 || correctLevel | 非| 二维码纠错级别，默认值为高级，取值：`{ L: 1, M: 0, Q: 3, H: 2 }` | 1 || image | 非 | 在 canvas 上绘制图片，层级高于二维码，v1.1.1+版本支持。具体使用见：例子2 | `{imageResource: '', width:80, height: 80, round: true}` |# TIPSweapp-qrcode-canvas-2d 参考以下源码- 参考 [weapp-qrcode](https://github.com/yingye/weapp-qrcode)- 参考 [jquery-qrcode](https://github.com/jeromeetienne/jquery-qrcode)