小程序二维码生成器;使用canvas与纯JS版二维码生成

[复制链接]
hyt_xcx手机认证 实名认证 视频认证 发表于 2016-12-11 16:59:08 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
实现小程序上的二维码生成器,想想基于jquery的二维码生成插件有很多,但是小程序是不允许操作dom的,所以自己找了一个纯javascript版的二维码生成源码,然后换汤不换药把其中的hmtl5中的canvas改为小程序的canvas;
1.png

2.png



主要代码片段:
  1. draw: function (string, canvas, cavW, cavH, ecc) {
  2.            ecclevel = ecc || ecclevel;
  3.            canvas = canvas || _canvas;
  4.            if (!canvas) {
  5.                console.warn('No canvas provided to draw QR code in!')
  6.                return;
  7.            }

  8.            var size =  Math.min(cavW, cavH);

  9.            var frame = this.getFrame(string),
  10.                ctx = wx.createContext(),
  11.                px = Math.round(size / (width + 8));

  12.            var roundedSize = px * (width + 8),
  13.                offset = Math.floor((size - roundedSize) / 2);
  14.            size = roundedSize;
  15.            ctx.clearRect(0, 0, cavW, cavW);
  16.            // ctx.setFillStyle('#ffffff');
  17.            // ctx.rect(0, 0, size, size);
  18.            ctx.setFillStyle('#000000');
  19.                        // ctx.setLineWidth(1);
  20.            for (var i = 0; i < width; i++) {
  21.                for (var j = 0; j < width; j++) {
  22.                    if (frame[j * width + i]) {   
  23.                        ctx.rect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
  24.                        // ctx.fill();
  25.                    }
  26.                }
  27.            }
  28.            ctx.fill();
  29.                        wx.drawCanvas({
  30.                          canvasId: canvas,
  31.                          actions: ctx.getActions()
  32.                    });
  33.        }
  34.    }
  35.        module.exports = {
  36.        qrApi: api
  37.    }
复制代码


主页面js代码:
  1. // pages/main/index.js
  2. var QR = require("../../utils/qrcode.js");
  3. Page({
  4.   data:{
  5.     maskHidden:true,
  6.     imagePath:'',
  7.     placeholder:'wxapp-union.com'
  8.   },
  9.   onLoad:function(options){
  10.     // 页面初始化 options为页面跳转所带来的参数
  11.     var size = this.setCanvasSize();//动态设置画布大小
  12.     var initUrl = "http://"+this.data.placeholder;
  13.     this.createQrCode(initUrl,"mycanvas",size.w,size.h);

  14.   },
  15.   onReady:function(){
  16.      
  17.   },
  18.   onShow:function(){
  19.      
  20.     // 页面显示
  21.   },
  22.   onHide:function(){
  23.     // 页面隐藏
  24.   },

  25.   onUnload:function(){
  26.     // 页面关闭

  27.   },
  28.   //适配不同屏幕大小的canvas
  29.   setCanvasSize:function(){
  30.     var size={};
  31.     try {
  32.         var res = wx.getSystemInfoSync();
  33.         var scale = 750/686;//不同屏幕下canvas的适配比例;设计稿是750宽
  34.         var width = res.windowWidth/scale;
  35.         var height = width;//canvas画布为正方形
  36.         size.w = width;
  37.         size.h = height;
  38.       } catch (e) {
  39.         // Do something when catch error
  40.         console.log("获取设备信息失败"+e);
  41.       }
  42.     return size;
  43.   } ,
  44.   createQrCode:function(url,canvasId,cavW,cavH){
  45.     //调用插件中的draw方法,绘制二维码图片
  46.     QR.qrApi.draw(url,canvasId,cavW,cavH);
  47.     var that = this;
  48.     //二维码生成之后调用canvasToTempImage();延迟3s,否则获取图片路径为空
  49.     var st = setTimeout(function(){
  50.       that.canvasToTempImage();
  51.       clearTimeout(st);
  52.     },3000);
  53.      
  54.   },
  55.   //获取临时缓存照片路径,存入data中
  56.   canvasToTempImage:function(){
  57.     var that = this;
  58.     wx.canvasToTempFilePath({
  59.       canvasId: 'mycanvas',
  60.       success: function (res) {
  61.           var tempFilePath = res.tempFilePath;
  62.           console.log("********"+tempFilePath);
  63.           that.setData({
  64.               imagePath:tempFilePath,
  65.           });
  66.       },
  67.       fail: function (res) {
  68.           console.log(res);
  69.       }
  70.     });
  71.   },
  72.   //点击图片进行预览,长按保存分享图片
  73.   previewImg:function(e){
  74.     var img = this.data.imagePath;
  75.     console.log(img);
  76.     wx.previewImage({
  77.       current: img, // 当前显示图片的http链接
  78.       urls: [img] // 需要预览的图片http链接列表
  79.     })
  80.   },
  81.   formSubmit: function(e) {
  82.     var that = this;
  83.     var url = e.detail.value.url;
  84.     url = url==''?('http://'+that.data.placeholder):('http://'+url);
  85.     that.setData({
  86.       maskHidden:false,
  87.     });
  88.     wx.showToast({
  89.       title: '生成中...',
  90.       icon: 'loading',
  91.       duration:2000
  92.     });
  93.     var st = setTimeout(function(){
  94.       wx.hideToast()
  95.       var size = that.setCanvasSize();
  96.       //绘制二维码
  97.       that.createQrCode(url,"mycanvas",size.w,size.h);
  98.       that.setData({
  99.         maskHidden:true
  100.       });
  101.       clearTimeout(st);
  102.     },2000)
  103.      
  104.   }

  105. })
复制代码
期间遇到的问题:
1、小程序是不支持fillRect()方法的,只能先rect(),然后fill();注意一定要把fill()放到for外面,不然会影响生成速度;
2、安卓和IDE依然不能预览图片问题,生成二维码没问题;
3、IDE不识别wx.canvasToTempFilePath()问题;
tips:输入时只需输入域名,http://会自动添加,如果是复制粘贴的链接请自行删除开头的http://


项目地址:
游客,如果您要查看本帖隐藏内容请回复


回复

使用道具 举报

精彩评论1

tinting实名认证 手机认证 视频认证 发表于 2017-11-6 11:44:01 | 显示全部楼层
查看隐藏内容
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

专注源码分享,教程分享
全国服务电话

187-8198-7163

周一至周8:00-22:00

反馈建议

cdhaoyt@163.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.2© 2001-2013 Comsenz Inc.( 蜀ICP备16032957号-1