效果图:
这种写法就简单粗暴,写好直接生成图片或者上传服务器都可以.
html:
<view class='container'>
<!-- 签名画布 -->
<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback">
</canvas>
<view class='buttonBox'>
<button bindtap='clickMe' class='addbutton' open-type="getuserinfo">点击我生成图片保存相册</button>
<button type="default" class='delbutton' bindtap="cleardraw">清除</button>
</view>
</view>
js:
// canvas 全局配置
var context = null;
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//注册页面
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);
},
data: {
src: "",
img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=578899140,1412678472&fm=27&gp=0.jpg",
rpx: ''
},
onLoad: function (options) {
var that = this
// 使用 wx.createContext 获取绘图上下文 context
context = wx.createCanvasContext('canvas');
context.beginPath()
context.setStrokeStyle('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
// context.drawImage('../../images/img111.png', 0, 0, canvasw, 500);
context.draw();
},
//过程
canvasMove: function (event) {
var that = this
if (isButtonDown) {
arrz.push(1);
console.log(event)
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);
},
// 点击保存图片
clickMe: function () {
wx.canvasToTempFilePath({
canvasId: 'canvas',
fileType: 'png',
success: function (res) {
console.log(res)
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
console.log(res)
wx.hideLoading();
wx.showToast({
title: '保存成功',
});
// //存入服务器
// wx.uploadFile({
// url: 'a.php', //接口地址
// filePath: res.tempFilePath,
// name: 'file',
// formData: { //HTTP 请求中其他额外的 form data
// 'user': 'test'
// },
// success: function (res) {
// console.log(res);
// },
// fail: function (res) {
// console.log(res);
// },
// complete: function (res) {
// }
// });
},
fail() {
wx.hideLoading()
}
})
}
})
},
canvasEnd: function (event) {
isButtonDown = false;
},
cleardraw: function () {
//清除画布
arrx = [];
arry = [];
arrz = [];
context.draw(false);
},
})
css:
.canvas {
width: 100%;
height: 93%;
border-bottom: 1rpx solid #e2e2e2e2;
position: fixed;
box-sizing: border-box;
}
.imageCanvas{
width: 100%;
height: 300rpx;
}
.buttonBox{
width: 100%;
justify-content: center;
display: flex;
position: fixed;
bottom: 0;
left: 0;
}
有帮助到大家的关注我,会一直更新小程序常用技术及新玩法。
如果你感觉有收获,欢迎给我打赏 ———— 以激励我输出更多优质内容