微信小程序canvas裁剪功能怎么实现?
既然微信小程序canvas可以实现绘制图标、画图，那么肯定也可以裁剪图片啦。很多小程序开发者都认为微信小程序canvas对小程序开发有着很大的帮助，那么今天小编就会再为大家补充一下关于实现的相关代码。
id: wxml中对应canvas的id
width: 裁剪图片区域宽度
height: 裁剪图片区域高度
minScale: 最小缩放倍数
maxScale: 最大缩放倍数
src: 裁剪图片临时路径
app.json：
添加一个路由："pages/canvas/canvas"
{ "pages":[ "pages/index/index", "pages/logs/logs", "pages/canvas/canvas" ], "window":{ "navigationBarBackgroundColor": "#ea6a46", "navigationBarTextStyle":"white", "navigationBarTitleText": "写字板", "backgroundTextStyle":"dark", "backgroundColor":"white", "enablePullDownRefresh":"true" }}
然后就是：
canvas.wxml:
清除画布裁剪图片
canvas.js:
// canvas 全局配置var context = null;// 使用 wx.createContext 获取绘图上下文 contextvar isButtonDown = false;var arrx = [];var arry = [];var arrz = [];var canvasw = 0;var canvash = 0;//获取系统信息wx.getSystemInfo({ success: function (res) { canvasw = res.windowWidth;//设备宽度 canvash = res.windowWidth*7/15; }});//注册页面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); //context.moveTo(event.changedTouches[0].x, event.changedTouches[0].y);
}, canvasMove: function (event) { if (isButtonDown) { arrz.push(1); arrx.push(event.changedTouches[0].x); arry.push(event.changedTouches[0].y); // context.lineTo(event.changedTouches[0].x, event.changedTouches[0].y); // context.stroke(); // context.draw()
};
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.stroke();
context.draw(true); }, 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) { console.log(res.tempFilePath); //存入服务器 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) {
} }); } })
}, /** * 页面的初始数据 */ data: { src: "" }, /** * 生命周期函数--小程序监听页面加载 */ onLoad: function (options) { // 使用 wx.createContext 获取绘图上下文 context context = wx.createCanvasContext('canvas'); context.beginPath() context.setStrokeStyle('#000000'); context.setLineWidth(4); context.setLineCap('round'); context.setLineJoin('round');
}})
参照以上小程序代码和相关流程，大家就能实现微信小程序canvas裁剪图片的功能啦，是不是很简单呢?如果还有不明白的地方可以在文章底部留言，小编会在微信小程序商店及时更新相关资料的。
微信小程序canvas重绘怎么弄
微信小程序canvas图表怎么绘制?
微信小程序canvas滑动的代码及效果