本文实例为大家分享了微信小程序做电子签名，并导出图片的具体代码，供大家参考，具体内容如下wxml:


清除画布
导出图片


清除画布
导出图片wxss:
.canvas {
width: 100%;
min-height: 400rpx;
border: 1rpx solid #000;
/*//突出canvas画布范围 */
box-sizing: border-box;
}
.canvas {
width: 100%;
min-height: 400rpx;
border: 1rpx solid #000;
/*//突出canvas画布范围 */
box-sizing: border-box;
}js:
var context = null;// 使用 wx.createContext 获取绘图上下文
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//获取系统信息
wx.getSystemInfo({
success: function (res) {

canvasw = res.windowWidth;//设备宽度

canvash = res.windowHeight; //设备高度
}
});

Page({
canvasIdErrorCallback: function (e) {

console.error(e.detail.errMsg)
},
//绘制开始
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);
},
//导出图片
getimg: function () {

if (arrx.length == 0) {

wx.showModal({

title: '提示',

content: '签名内容不能为空！',

showCancel: false

});

return false;

};

//生成图片

wx.canvasToTempFilePath({

canvasId: 'canvas',

success: function (res) {

wx.saveImageToPhotosAlbum({

filePath: res.tempFilePath,

success(res) {

// console.log(res)

wx.showToast({

title: '保存成功',

});

},

fail(err) {

console.log(err)

}

})

//将照片存入服务器

// wx.uploadFile({

//
url: '', //接口地址

//
filePath: res.tempFilePath,

//
name: 'file',

//
formData: {


//
'user': 'test'

//
},

//
success function (res) {

//
console.log(res);

//
},

//
fail: function (res) {

//
console.log(res);

//
},

//
complete: function (res) {

//
}

// });

}

})

},
/**

* 页面的初始数据

*/
data: {


},
/**

* 生命周期函数--监听页面加载

*/
onLoad: function (options) {

// 使用 wx.createContext 获取绘图上下文 context

context = wx.createCanvasContext('canvas');

context.beginPath()

context.setStrokeStyle('#000000');

context.setLineWidth(4);

context.setLineCap('round');

context.setLineJoin('round');
}
})
var context = null;// 使用 wx.createContext 获取绘图上下文
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//获取系统信息
wx.getSystemInfo({
success: function (res) {

canvasw = res.windowWidth;//设备宽度

canvash = res.windowHeight; //设备高度
}
});

Page({
canvasIdErrorCallback: function (e) {

console.error(e.detail.errMsg)
},
//绘制开始
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);
},
//导出图片
getimg: function () {

if (arrx.length == 0) {

wx.showModal({

title: '提示',

content: '签名内容不能为空！',

showCancel: false

});

return false;

};

//生成图片

wx.canvasToTempFilePath({

canvasId: 'canvas',

success: function (res) {

wx.saveImageToPhotosAlbum({

filePath: res.tempFilePath,

success(res) {

// console.log(res)

wx.showToast({

title: '保存成功',

});

},

fail(err) {

console.log(err)

}

})

//将照片存入服务器

// wx.uploadFile({

//
url: '', //接口地址

//
filePath: res.tempFilePath,

//
name: 'file',

//
formData: {


//
'user': 'test'

//
},

//
success function (res) {

//
console.log(res);

//
},

//
fail: function (res) {

//
console.log(res);

//
},

//
complete: function (res) {

//
}

// });

}

})

},
/**

* 页面的初始数据

*/
data: {


},
/**

* 生命周期函数--监听页面加载

*/
onLoad: function (options) {

// 使用 wx.createContext 获取绘图上下文 context

context = wx.createCanvasContext('canvas');

context.beginPath()

context.setStrokeStyle('#000000');

context.setLineWidth(4);

context.setLineCap('round');

context.setLineJoin('round');
}
})以上就是本文的全部内容，希望对大家的学习有所帮助。