<view class="container column-me"> <view class="tips"> 请绘制清晰可见的签名并保存 </view> <canvas class="canvas" id="canvas" type="2d" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas> <view class='addBtn'> <button type="default" class='txt reset' bindtap="clickClear">重新签名</button> <button type="default" class='txt' bindtap="clickSave">保存签名</button> </view> </view>
page { background: #fff; } .container { padding: 0 20rpx; height: 100vh; background: #fff; border-radius: 5px; } .canvas { width: 100%; flex: 1; box-sizing: border-box; margin-top: 10rpx; } .tips { display: flex; align-items: center; justify-content: center; text-align: center; color: #aaa; font-size: 20rpx; } .addBtn { display: flex; align-items: center; justify-content: center; width: 100%; background: #fff; z-index: 100; padding: 10rpx 0; } .addBtn .txt { text-align: center; width: 200rpx; font-size: 15rpx; border-radius: 100px; background: #0097fe; color: #fff; box-sizing: border-box; margin: 0 20rpx; padding: 10px; z-index: 100; } .reset { background: #fff !important; border: 1px solid #cccccc; color: #333333 !important; }
{ "usingComponents": {}, "pageOrientation": "landscape", "navigationBarTitleText": "医生签名" }
let http = require("../../utils/http.js"); // canvas 全局配置 var context = null; // 使用 wx.createContext 获取绘图上下文 context var mCanvas = null; //注册页面 Page({ /** * 页面的初始数据 */ data: { userId: '', //用户id hasDraw: false, //默认没有画 }, /** * 生命周期函数--监听页面加载 */ onl oad: function (options) { this.setData({ userId: options.scene, hasDraw: false, }) wx.createSelectorQuery() .select('#canvas') // 在 WXML 中填入的 id .fields({ node: true, size: true }) .exec((res) => { // Canvas 对象 const canvas = res[0].node mCanvas = res[0].node // 渲染上下文 context = canvas.getContext('2d') // Canvas 画布的实际绘制宽高 const width = res[0].width const height = res[0].height // 初始化画布大小 const dpr = wx.getWindowInfo().pixelRatio canvas.width = width * dpr canvas.height = height * dpr context.scale(dpr, dpr) //绘制背景 context.fillStyle = '#fff' context.clearRect(0, 0, canvas.width, canvas.height) context.fillRect(0, 0, canvas.width, canvas.height) }) }, onShow() { }, canvasIdErrorCallback: function (e) {}, //开始 canvasStart: function (event) { context.moveTo(event.touches[0].x, event.touches[0].y); }, //过程 canvasMove: function (event) { var x = event.touches[0].x; var y = event.touches[0].y; context.lineWidth = 4 context.lineCap = 'round' context.lineJoin = 'round' context.lineTo(x, y); context.stroke(); this.setData({ hasDraw: true, }); }, canvasEnd: function (event) { }, clickClear: function () { context.clearRect(0, 0, mCanvas.width, mCanvas.height); //清除画布 context.beginPath() //清空画笔 this.setData({ hasDraw: false, }); }, //保存签名 clickSave: function () { let that = this if (!this.data.hasDraw) { wx.showModal({ title: '提示', content: '签名内容不能为空!', showCancel: false }); return false; }; if (this.data.userId === undefined || this.data.userId === '') { wx.showModal({ title: '提示', content: '用户id为空,请重新扫码', showCancel: false }); return false; } //生成图片 wx.canvasToTempFilePath({ canvas: mCanvas, success: function (res) { http.upload({ url: '/admin/upload/upLoadFile', filePath: res.tempFilePath, name: 'file', formData: {}, callBack: function (uploadRes) { let res = JSON.parse(uploadRes) let url = res.data.url http.request({ url: "/doctor/home/updateSignature", method: "POST", noBody: true, data: { id: that.data.userId, image: url, }, callBack: (res) => { wx.showModal({ title: '温馨提示', content: '保存签名成功!', confirmText: '退出', showCancel: false, success(res) { if (res.confirm) { wx.exitMiniProgram({ success: function (res) { console.log(res) }, fail: function (err) { console.log(err) } }) } else if (res.cancel) { console.log('用户点击取消') } } }) } }) } }) } }) }, })
标签:function,Canvas,微信,canvas,电子签名,width,context,res,wx From: https://www.cnblogs.com/jiangbeixiaoqiao/p/16873605.html