首页下载资源前端weapp-qrcode-canvas-2d

ZIPweapp-qrcode-canvas-2d

moumouguo62.86KB需要积分:1

资源文件列表:

weapp-qrcode-canvas-2d-master.zip 大约有25个文件
  1. weapp-qrcode-canvas-2d-master/
  2. weapp-qrcode-canvas-2d-master/.editorconfig 147B
  3. weapp-qrcode-canvas-2d-master/.eslintignore 38B
  4. weapp-qrcode-canvas-2d-master/.eslintrc.js 603B
  5. weapp-qrcode-canvas-2d-master/.gitignore 13B
  6. weapp-qrcode-canvas-2d-master/.travis.yml 456B
  7. weapp-qrcode-canvas-2d-master/LICENSE 1.04KB
  8. weapp-qrcode-canvas-2d-master/README.md 5.25KB
  9. weapp-qrcode-canvas-2d-master/build/
  10. weapp-qrcode-canvas-2d-master/build/rollup.dev.config.js 884B
  11. weapp-qrcode-canvas-2d-master/build/rollup.prod.config.js 1.42KB
  12. weapp-qrcode-canvas-2d-master/dist/
  13. weapp-qrcode-canvas-2d-master/dist/weapp.qrcode.common.js 17.07KB
  14. weapp-qrcode-canvas-2d-master/dist/weapp.qrcode.esm.js 17.05KB
  15. weapp-qrcode-canvas-2d-master/dist/weapp.qrcode.js 34.17KB
  16. weapp-qrcode-canvas-2d-master/dist/weapp.qrcode.min.js 16.03KB
  17. weapp-qrcode-canvas-2d-master/examples/
  18. weapp-qrcode-canvas-2d-master/examples/wechat-app/
  19. weapp-qrcode-canvas-2d-master/examples/wechat-app/utils/
  20. weapp-qrcode-canvas-2d-master/examples/wechat-app/utils/weapp.qrcode.js 34.17KB
  21. weapp-qrcode-canvas-2d-master/package-lock.json 103KB
  22. weapp-qrcode-canvas-2d-master/package.json 1.27KB
  23. weapp-qrcode-canvas-2d-master/src/
  24. weapp-qrcode-canvas-2d-master/src/index.js 3.93KB
  25. weapp-qrcode-canvas-2d-master/src/qrcode.js 28.51KB

资源介绍:

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 ``` ## 安装方法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 ```js import drawQrcode from 'weapp-qrcode-canvas-2d' ``` ## 安装完成后调用 ### 例子1：没有使用叠加图片 ```js const 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) ```js const 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]) ### options Type: 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}` | # TIPS weapp-qrcode-canvas-2d 参考以下源码 - 参考 [weapp-qrcode](https://github.com/yingye/weapp-qrcode) - 参考 [jquery-qrcode](https://github.com/jeromeetienne/jquery-qrcode)
100+评论
captcha

    相关资源

    1. 永磁同步电机ADRC 自抗扰控制 SIMULINK仿真模型

      shendingposb#行业研究ZIP13.33MB7月前
      资源摘要:及其相关的参考论文

    2. VS开发工具，ODOO环境

      tds_tang#信息化管理ZIP1.2MB7月前
      资源摘要:ODOO环境需要用到，省得下载

    3. JAVA 班主任管理系统(源代码+论文).zip

      weixin_44259230#后端ZIP11.49MB7月前
      资源摘要:这是“JAVA 班主任管理系统(源代码+论文)”，仅供学习参考，请勿商用。

    4. java+毕业设计+扫雷（程序）.zip

      weixin_44259230#后端ZIP151.68KB7月前
      资源摘要:这是“java+毕业设计+扫雷（程序）”，仅供学习参考，请勿商用。

    5. MATLAB汉字定位检测识别（GUI界面）.zip

      2401_86539719#大数据ZIP833.08KB7月前
      资源摘要:在MATLAB中进行汉字定位检测和识别，可以使用以下步骤：1. 预处理：使用图像处理函数对输入的图像进行预处理，包括灰度化、二值化等。可以使用`rgb2gray`函数将彩色图像转为灰度图像，使用`imbinarize`函数进行二值化。2. 字符定位：使用图像处理技术找到图像中的汉字位置。可以使用边缘检测算法（如Canny算法）检测汉字的边缘，然后使用形态学操作（如腐蚀、膨胀）去除噪声并连接字符边缘，最后使用连通区域分析找到汉字的位置。3. 字符识别：对于定位到的汉字区域，可以使用基于特征的方法或深度学习方法进行识别。基于特征的方法可以提取汉字区域的特征，如垂直和水平投影、方向梯度直方图等，然后使用分类器（如支持向量机、K近邻）进行识别。深度学习方法可以使用卷积神经网络（CNN）对汉字进行端到端的识别。4. 结果展示：将识别的汉字和其位置标注在原图像上，并进行展示。需要注意的是，以上步骤只是一个简单的流程，具体的实现方法和参数设置需根据具体的需求进行调整和优化。

    6. MATLAB的车牌识别系统（GUI界面）

      2401_86539719#大数据ZIP159.22KB7月前
      资源摘要:MATLAB是一种强大的数值计算和拟合工具，可以用于开发车牌识别系统。以下是一个使用MATLAB开发车牌识别系统的基本步骤：1. 数据采集：收集一批包含不同车牌的图像数据，包括正常、模糊、倾斜等不同情况下的车牌图像。2. 数据预处理：对采集的车牌图像进行预处理，包括灰度化、二值化、去噪等，以便于后续的图像处理操作。3. 车牌定位：利用图像处理技术，如边缘检测、形态学操作等，对预处理后的图像进行车牌定位，找出图像中车牌的位置。4. 字符分割：对定位到的车牌图像进行字符分割，将每个字符分离开来。可以使用基于图像处理的技术，如投影法、边缘检测等，将字符分割为单个的字母或数字。5. 字符识别：利用图像分类和模式识别的算法，对分割得到的字符进行识别。可以使用机器学习算法，如支持向量机（SVM）、卷积神经网络（CNN）等，对字符图像进行训练，建立字符识别模型。6. 结果输出：将识别得到的字符信息输出为车牌号码，并进行后续的处理和应用。可以将结果保存到文件中，或者在系统界面上显示出来。以上是一个简单的车牌识别系统的基本步骤，实际开发中还可以根据需求进行扩展和优化。使用MA

    7. matlab设计车牌识别系统设计实现.zip

      m0_59833680#音视频ZIP720.57KB7月前
      资源摘要:MATLAB可以用于车牌识别的流程如下：1. 图像预处理：首先，加载车牌图像并对其进行预处理。可以使用MATLAB提供的图像处理函数进行图像灰度化、图像增强、图像二值化等操作，以提高车牌图像的质量。2. 车牌定位：使用图像处理算法或机器学习算法在预处理后的图像中进行车牌定位。这可以通过检测车牌的形状、颜色、纹理等特征进行。3. 字符分割：将定位到的车牌图像进行字符分割，将每个字符分割为单独的图像。可以使用MATLAB的图像处理函数进行字符分割，如字符二值化、字符定位等。4. 字符识别：对每个字符图像进行特征提取和分类，以实现字符识别。可以使用MATLAB的机器学习工具箱来训练字符分类器，如支持向量机、神经网络等。5. 结果输出：根据字符识别的结果，将识别出的字符进行组合，得到最终的车牌号码。可以使用MATLAB的图像处理函数将字符图像组合起来，生成最终的识别结果。需要注意的是，车牌识别是一个复杂的任务，可能涉及到多个图像处理和机器学习的算法。此外，车牌的种类和样式在不同的国家和地区可能有所不同，识别算法也需要相应的调整和修改。具体的实现方法和效果需要根据实际情况

    8. 数学建模培训-第二轮-李普林.zip

      2301_78064537#行业研究ZIP49.04MB7月前
      资源摘要:数学建模培训-第二轮-李普林.zip
    站长QQ:九六九五七三七