首页 >> js开发 >> js微信小程序实现电子签名功能js大全
js微信小程序实现电子签名功能js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例为大家分享了微信小程序实现电子签名的具体代码，供大家参考，具体内容如下
// XXXX.wxml
上传签名
清除签名
// XXXX.wxml
上传签名
清除签名
var context = null;// 使用 wx.createContext 获取绘图上下文 context
var isButtonDown = false;//是否在绘制中
var arrx = [];//动作横坐标
var arry = [];//动作纵坐标
var arrz = [];//总做状态，标识按下到抬起的一个组合
var canvasw = 0;//画布宽度
var canvash = 0;//画布高度
Page({
data: {
},
onLoad: function () {
this.startCanvas();
},
/**
* 以下 - 手写签名 / 上传签名
*/
startCanvas: function () {//画布初始化执行
var that = this;
//获取系统信息
wx.getSystemInfo({
success: function (res) {
canvasw = res.windowWidth;
canvash = res.windowHeight;
that.setData({ canvasw: canvasw });
that.setData({ canvash: canvash });
}
});
this.initCanvas();
this.cleardraw();
},
//初始化函数
initCanvas: function () {
context = wx.createCanvasContext('canvas');
context.beginPath()
context.fillStyle = 'rgba(255, 255, 255, 0)';
context.setStrokeStyle('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
},
canvasStart: function (event) {
isButtonDown = true;
arrz.push(0);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
},
canvasMove: function (event) {
if (isButtonDown) {
arrz.push(1);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
}
for (var i = 0; i < arrx.length; i++) {
if (arrz[i] == 0) {
context.moveTo(arrx[i], arry[i])
} else {
context.lineTo(arrx[i], arry[i])
}
}
context.clearRect(0, 0, canvasw, canvash);
context.setStrokeStyle('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
context.stroke();
context.draw(false);
},
canvasEnd: function (event) {
isButtonDown = false;
},
//清除画布
cleardraw: function () {
arrx = [];
arry = [];
arrz = [];
context.clearRect(0, 0, canvasw, canvash);
context.draw(true);
},
uploadImg(){
var that = this
//生成图片
wx.canvasToTempFilePath({
canvasId: 'canvas',
//设置输出图片的宽高
// destWidth:150,
// destHeight:150,
// fileType:'jpg',
quality:1.0,
success: function (res) {
console.log(res)
// canvas图片地址 res.tempFilePath
},
fail: function () {
wx.showModal({
title: '提示',
content: 'canvas生成图片失败。微信当前版本不支持，请更新到最新版本！',
showCancel: false
});
},
complete: function () {}
})
},
})
var context = null;// 使用 wx.createContext 获取绘图上下文 context
var isButtonDown = false;//是否在绘制中
var arrx = [];//动作横坐标
var arry = [];//动作纵坐标
var arrz = [];//总做状态，标识按下到抬起的一个组合
var canvasw = 0;//画布宽度
var canvash = 0;//画布高度
Page({
data: {
},
onLoad: function () {
this.startCanvas();
},
/**
* 以下 - 手写签名 / 上传签名
*/
startCanvas: function () {//画布初始化执行
var that = this;
//获取系统信息
wx.getSystemInfo({
success: function (res) {
canvasw = res.windowWidth;
canvash = res.windowHeight;
that.setData({ canvasw: canvasw });
that.setData({ canvash: canvash });
}
});
this.initCanvas();
this.cleardraw();
},
//初始化函数
initCanvas: function () {
context = wx.createCanvasContext('canvas');
context.beginPath()
context.fillStyle = 'rgba(255, 255, 255, 0)';
context.setStrokeStyle('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
},
canvasStart: function (event) {
isButtonDown = true;
arrz.push(0);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
},
canvasMove: function (event) {
if (isButtonDown) {
arrz.push(1);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
}
for (var i = 0; i < arrx.length; i++) {
if (arrz[i] == 0) {
context.moveTo(arrx[i], arry[i])
} else {
context.lineTo(arrx[i], arry[i])
}
}
context.clearRect(0, 0, canvasw, canvash);
context.setStrokeStyle('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
context.stroke();
context.draw(false);
},
canvasEnd: function (event) {
isButtonDown = false;
},
//清除画布
cleardraw: function () {
arrx = [];
arry = [];
arrz = [];
context.clearRect(0, 0, canvasw, canvash);
context.draw(true);
},
uploadImg(){
var that = this
//生成图片
wx.canvasToTempFilePath({
canvasId: 'canvas',
//设置输出图片的宽高
// destWidth:150,
// destHeight:150,
// fileType:'jpg',
quality:1.0,
success: function (res) {
console.log(res)
// canvas图片地址 res.tempFilePath
},
fail: function () {
wx.showModal({
title: '提示',
content: 'canvas生成图片失败。微信当前版本不支持，请更新到最新版本！',
showCancel: false
});
},
complete: function () {}
})
},
})为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。《微信小程序开发教程》以上就是本文的全部内容，希望对大家的学习有所帮助。
// XXXX.wxml
// XXXX.wxml
var context = null;// 使用 wx.createContext 获取绘图上下文 context
var isButtonDown = false;//是否在绘制中
var arrx = [];//动作横坐标
var arry = [];//动作纵坐标
var arrz = [];//总做状态，标识按下到抬起的一个组合
var canvasw = 0;//画布宽度
var canvash = 0;//画布高度
Page({
data: {
},
onLoad: function () {
this.startCanvas();
},
/**
* 以下 - 手写签名 / 上传签名
*/
startCanvas: function () {//画布初始化执行
var that = this;
//获取系统信息
wx.getSystemInfo({
success: function (res) {
canvasw = res.windowWidth;
canvash = res.windowHeight;
that.setData({ canvasw: canvasw });
that.setData({ canvash: canvash });
}
});
this.initCanvas();
this.cleardraw();
},
//初始化函数
initCanvas: function () {
context = wx.createCanvasContext('canvas');
context.beginPath()
context.fillStyle = 'rgba(255, 255, 255, 0)';
context.setStrokeStyle('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
},
canvasStart: function (event) {
isButtonDown = true;
arrz.push(0);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
},
canvasMove: function (event) {
if (isButtonDown) {
arrz.push(1);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
}
for (var i = 0; i < arrx.length; i++) {
if (arrz[i] == 0) {
context.moveTo(arrx[i], arry[i])
} else {
context.lineTo(arrx[i], arry[i])
}
}
context.clearRect(0, 0, canvasw, canvash);
context.setStrokeStyle('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
context.stroke();
context.draw(false);
},
canvasEnd: function (event) {
isButtonDown = false;
},
//清除画布
cleardraw: function () {
arrx = [];
arry = [];
arrz = [];
context.clearRect(0, 0, canvasw, canvash);
context.draw(true);
},
uploadImg(){
var that = this
//生成图片
wx.canvasToTempFilePath({
canvasId: 'canvas',
//设置输出图片的宽高
// destWidth:150,
// destHeight:150,
// fileType:'jpg',
quality:1.0,
success: function (res) {
console.log(res)
// canvas图片地址 res.tempFilePath
},
fail: function () {
wx.showModal({
title: '提示',
content: 'canvas生成图片失败。微信当前版本不支持，请更新到最新版本！',
showCancel: false
});
},
complete: function () {}
})
},
})
var context = null;// 使用 wx.createContext 获取绘图上下文 context
var isButtonDown = false;//是否在绘制中
var arrx = [];//动作横坐标
var arry = [];//动作纵坐标
var arrz = [];//总做状态，标识按下到抬起的一个组合
var canvasw = 0;//画布宽度
var canvash = 0;//画布高度
Page({
data: {
},
onLoad: function () {
this.startCanvas();
},
/**
* 以下 - 手写签名 / 上传签名
*/
startCanvas: function () {//画布初始化执行
var that = this;
//获取系统信息
wx.getSystemInfo({
success: function (res) {
canvasw = res.windowWidth;
canvash = res.windowHeight;
that.setData({ canvasw: canvasw });
that.setData({ canvash: canvash });
}
});
this.initCanvas();
this.cleardraw();
},
//初始化函数
initCanvas: function () {
context = wx.createCanvasContext('canvas');
context.beginPath()
context.fillStyle = 'rgba(255, 255, 255, 0)';
context.setStrokeStyle('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
},
canvasStart: function (event) {
isButtonDown = true;
arrz.push(0);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
},
canvasMove: function (event) {
if (isButtonDown) {
arrz.push(1);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
}
for (var i = 0; i < arrx.length; i++) {
if (arrz[i] == 0) {
context.moveTo(arrx[i], arry[i])
} else {
context.lineTo(arrx[i], arry[i])
}
}
context.clearRect(0, 0, canvasw, canvash);
context.setStrokeStyle('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
context.stroke();
context.draw(false);
},
canvasEnd: function (event) {
isButtonDown = false;
},
//清除画布
cleardraw: function () {
arrx = [];
arry = [];
arrz = [];
context.clearRect(0, 0, canvasw, canvash);
context.draw(true);
},
uploadImg(){
var that = this
//生成图片
wx.canvasToTempFilePath({
canvasId: 'canvas',
//设置输出图片的宽高
// destWidth:150,
// destHeight:150,
// fileType:'jpg',
quality:1.0,
success: function (res) {
console.log(res)
// canvas图片地址 res.tempFilePath
},
fail: function () {
wx.showModal({
title: '提示',
content: 'canvas生成图片失败。微信当前版本不支持，请更新到最新版本！',
showCancel: false
});
},
complete: function () {}
})
},
})为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。《微信小程序开发教程》以上就是本文的全部内容，希望对大家的学习有所帮助。
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
