微信小程序画布实现个人签名，并保存为图片

转自 GIS开发者微信小程序canvas实现个人签名，并保存为图片_做GIS梦的人-CSDN博客_canvas签名生成图片

1、html

<view class="container"><canvas canvas-id="firstCanvas" id='firstCanvas' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas><view class="btn"><button type="warn" bindtap='clear'>清除</button><button type="primary"  bindtap='export'>提交</button></view></view>

2、css

.container #firstCanvas{width: 100%;height: 500rpx;
}
.container .btn{display: flex;
}
.container .btn button{width: 50%;
}

3、js

//index.js
//获取应用实例
// const app = getApp()
// 持导出为图片和清空的功能。为了提供用户体验，在性能优化上做了很大提升。最后的保存图片是先保存为本地临时文件，然后上传服务器，从服务器请求预览
Page({data: {context: null,index: 0,height: 0,width: 0},/**记录开始点 */bindtouchstart: function(e) {this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)},/**记录移动点，刷新绘制 */bindtouchmove: function(e) {this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);this.data.context.stroke();this.data.context.draw(true);this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);},/**清空画布 */clear: function() {this.data.context.clearRect(0, 0, this.data.width, this.data.height);this.data.context.draw();this.data.context.setStrokeStyle('#061A06')this.data.context.setLineWidth(2)this.data.context.setFontSize(20)let str = "签名区域";this.data.context.fillText(str, Math.ceil((this.data.width - this.data.context.measureText(str).width) / 2), Math.ceil(this.data.height / 2) - 20)this.data.context.draw()},/**导出图片 */export: function() {console.log('点击了提交。。。。。。');const that=this;this.data.context.draw(false, wx.canvasToTempFilePath({x: 0,y: 0,width: that.data.width,height: that.data.height,destWidth: that.data.width,destHeight: that.data.height,fileType: 'jpg',canvasId: 'firstCanvas',success(res) {wx.uploadFile({url: 'http://192.168.0.157:8089/uppic', filePath: res.tempFilePath,name: 'file',success(res) {var url = "http://192.168.0.157:8089/pic?name=" + res.datawx.previewImage({// current: url, // 当前显示图片的http链接urls: [url], // 需要预览的图片http链接列表fail(f) {console.log(2)console.error(f)},success(s) {console.log(1)console.log(s)}})},fail(err) {wx.showToast({title: '上传失败',icon: 'none',duration: 2000})}})},fail() {wx.showToast({title: '导出失败',icon: 'none',duration: 2000})}}))},onLoad: function(options) {console.log(options.id);if (options.id) {wx.showToast({title: '姓名' + options.id,icon: 'success',duration: 2000})}},onShow: function() {let query = wx.createSelectorQuery();const that = this;query.select('#firstCanvas').boundingClientRect();query.exec(function(rect) {let width = rect[0].width;let height = rect[0].height;that.setData({width,height});const context = wx.createCanvasContext('firstCanvas')that.setData({context: context})context.setStrokeStyle('#061A06')context.setLineWidth(2)context.setFontSize(20)let str = "签名区域";context.fillText(str, Math.ceil((width - context.measureText(str).width) / 2), Math.ceil(height / 2) - 20)context.draw()});},onShareAppMessage: (res) => {if (res.from === 'button') {console.log("来自页面内转发按钮");console.log(res.target);} else {console.log("来自右上角转发菜单")}return {title: '手动签名',path: '/pages/index/index?id=测试',// imageUrl: "/images/1.jpg",success: (res) => {console.log("转发成功", res);},fail: (res) => {console.log("转发失败", res);}}}
})

微信小程序画布实现个人签名，并保存为图片相关推荐

微信小程序用户数据的签名校验和加解密 - 后端nodejs
在本文微信小程序用户数据的签名校验和加解密之前需要先看看微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. 小程序代码: ...
解决微信小程序开发中wxss中不能用本地图片
微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方 ...
微信小程序利用腾讯云IM发送语音 + 图片
微信小程序利用腾讯云IM发送语音 + 图片能做到这里说明你已经可以发送普通文本了如果没有的话可以看一下我的上一篇文章有完整的讲解效果图语音聊天发送图片传送 → 发送图片发送语音 ** ...
微信小程序-注册登录功能-本地数据保存-页面数据交替
Title:微信小程序-注册登录功能-本地数据保存-页面数据交替完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面主页面login.js代码 // pages/login/logi ...
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
微信小程序画布组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 画布组件,我们可以做一些绘图和动画效果.2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),同时支持同层渲染,原有 ...
微信小程序画布画时针转盘
需求:使用微信小程序画一个12时辰的转盘,每两一个小时转盘上的指针跳动一次,每隔两个小时转盘分区跳动一次. canvas.wxml <view class="canvas-conten ...
微信小程序画布Canvas组件touchend事件不触发处理
一.摘要在微信小程序手势图案锁屏.解锁实现并提供onSuccess等回调一文中,用Canvas画布组件实现了类似Android和Iphone的图案锁屏.解锁功能,除去偶尔卡顿.滑动不连续外,其它都还 ...
微信小程序画布实现冒泡点赞，三阶贝塞尔曲线
一.核心代码 1)wxml 核心代码 <canvas wx:for="{{bezierCount-0}}" wx:key="key" class=&quo ...
微信小程序画布圆形进度条demo
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: wxml  <canvas s ...

微信小程序画布实现个人签名，并保存为图片

微信小程序画布实现个人签名，并保存为图片相关推荐

最新文章

热门文章