E企盈营销工具技术服务商 热线:4006-838-530

微信小程序实现滑块验证码

E企盈直播平台营销卖货系统

老规矩,先上Demo:思 路创建2个canvas,一个当作背景,一个当作拼图。传入3个参数,x:canvas中裁剪区域的横坐标,y:canvas中裁剪区域的纵坐标,l:拼图的边长背景图使用fill()的方法裁剪出一个洞拼图使用wx.canvasToTempFilePath的方法裁剪成一个拼图图片。小程序中的触控事件bindtouchmove,bindtouchend分别记录移动的距离和松手时的距离判断移动距离和x的差距,如果两者小于一定阈值,则验证成功,反之失败。开始操作创建两个canvas在微信小程序中,由于不能操作DOM,所以要想更改样式需要在组件中用style表明,在data中修改,通过{{}}渲染出来。比如我们需要控制canvas距离顶部的高度,除了在wxss中定义以外,还可以使用canvas style=’top:{{this.data.top}}rpx’这种方式实现。小程序中操作创建canvas的方法如下:const canvas = wx.createCanvasContext(‘canvas1’),     block = wx.createCanvasContext(‘block’);这样就创建了两个canvas画布定义所需参数 let l = 50,  //拼图的边长    x =150+Math.random()*(canvas_width-l-150), //裁剪的x坐标    y = 10+Math.random()*(canvas_height-l-10);//裁剪的y坐标    that.setData({      block_w:l,      y:y,      x:x    })背景图的制作使用block.drawImage(img, 0, 0, canvas_width, canvas_height);的方法使图片绘制到canvas上。使用globalCompositeOperation = ‘xor’的方法,使裁剪的那一块变得透明。block.beginPath()    block.moveTo(x,y)    block.lineTo(x,y+l)    block.lineTo(x+l,y+l)    block.lineTo(x+l,y)    block.globalCompositeOperation = ‘xor’     block.fill()    block.drawImage(img, 0, 0, canvas_width, canvas_height);    block.draw( ) 有可能这里无法显示图片,把代码放到 onReady 下就可以了拼图的制作使用wx.canvasToTempFilePath方法,从另一张canvas画布上截取一块。 canvas.drawImage(img, 0, 0, canvas_width, canvas_height);    canvas.draw(false, setTimeout(() = {      wx.canvasToTempFilePath({        x: x,        y: y,        width:l,        height: l,        canvasId: ‘canvas1’,        fileType: ‘png’,        success(res) {          console.log(res.tempFilePath)          that.setData({            pic: res.tempFilePath          })        },        fail: err = {          console.log(err)        }      }, this)    }, 500))这样res.temFilePath就是我们截取出来的拼图了。注意!如果图片是空白的,需要添加一个定时器 setTimeout() 清除 canvas 缓存在滑动块上添加触控事件滑动的过程需要两个事件来完成bindtouchmove=’move’ bindtouchend=’end’js中创建这两个事件。move:function(res){  let left = res.touches[0].pageX;   // 由于我这里是和page没有距离,也没有加外层盒子的,所以,pageX就是位移距离。  if (left0){  this.setData({    left: left  })  }  else{    this.setData({      left:0    })  }},end:function(res){  let end = this.data.left,  moves = this.data.x;console.log(end)  })}}判断,出结果end:function(res){  …  …if (Math.abs(end-moves)2){  //当小于2px的可接受阈值时,验证成功  console.log(‘bingo’)  wx.showToast({    title: ‘验证成功’,    icon:’success’,    duration:2000  })  setTimeout(function(){    wx.redirectTo({      url: ‘verification’,    })  },2000)}else{  this.setData({    left:0  })}}好了,大功告成。具体代码在——github:Jarry007仅供参考,我是菜鸟,轻喷。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序实现滑块验证码
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏