小程序使用canvas绘画、签名。wx.canvasToTempFilePath安卓机生成图片背景色为黑色

最终结果如图所示：

注意：这里使用了两个canvas，所以有关canvas的配置要配置两个。利用具体实现代码如下。利用wx.canvasToTempFilePath生成canvas图片时，记得fileType为'png',这样生成图片背景色为透明色，以适应安卓机生成图片背景色为黑色的问题。

<van-tabs active="{{ active }}" animated color="#007EFF" tab-active-class='tab-active' bind:disabled="onClickDisabled"><van-tab title="拍照上传"></van-tab><van-tab title="手动填写" disabled></van-tab>
</van-tabs>
<view class="box-top" wx:if='{{careData}}'><view class="apply-detail-title"><text class="apply-detail-title-status">订单状态：{{statusDisplay}}</text><text bindtap="handleService">查看服务详情</text></view><view class="default-box care-header-box"><view class="left-img"><image src="{{careData.subOrderVo.serviceItemImg}}"></image></view><view class="right-text"><text class="title">{{careData.subOrderVo.serviceNameDisplay}}</text><text class="title-26">长护险居家</text></view></view><view class="bottom-200" wx:if='{{status&&status==="LOG_WITH_EVALUATE"}}'><uploads-img bind:getUploaderList="getUploaderList" uploaderNum="{{5-uploaderNowNum}}" uploaderList='{{uploaderList}}' title='居家护理日志上传' chooseSelf='{{false}}' desc='生命体征测量、生活护理、其他、家属评价等。'></uploads-img><view class='container'><view class="i-title justify-flex"><text class="title">护工签名</text><text class="clear-btn" bindtap="cleardraw" data-index='{{1}}'>清空</text></view><canvas class="canvas" id="canvas" canvas-id="canvas1" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback" data-index='{{1}}'></canvas><view class="i-title justify-flex"><text class="title">家属签名</text><text class="clear-btn" bindtap="cleardraw" data-index='{{2}}'>清空</text></view><canvas class="canvas" id="canvas" canvas-id="canvas2" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback" data-index='{{2}}'></canvas></view></view><view class="bottom-200" wx:if='{{status&&status!=="LOG_WITH_EVALUATE"}}'><view class="title i-title">居家护理日志上传</view><view class="log-img-box"><i-caseImgs urls='{{uploaderList}}' type='{{false}}'></i-caseImgs></view><view class="title i-title">护工签名</view><image class="canvas" src="{{nurserSignImg}}"></image><view class="title i-title">家属签名</view><image class="canvas" src="{{familySignImg}}"></image></view>
</view>
<commit-btn title="完成" bind:commit='handleFinish' wx:if='{{status==="LOG_WITH_EVALUATE"}}'></commit-btn>
<police></police>

/* pages/inquiryDetail/index.wxss */.box-top {height: 190rpx;position: relative;background: #007DFE;padding-top: 20rpx;margin-top: 2rpx;
}.apply-detail-title {font-size: 26rpx;color: rgba(255, 255, 255, 1);margin: 0 20rpx 20rpx 20rpx;display: flex;justify-content: space-between;align-items: center;
}.apply-detail-title-status {font-size: 34rpx;font-weight: 600;
}.canvas {width: 690rpx;height: 300rpx;background: rgba(232, 232, 232, 1);box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.08);border-radius: 16px;margin: 0 30rpx;
}.clear-btn {font-size: 26rpx;color: rgba(0, 126, 255, 1);
}.left-img {width: 226rpx;height: 120rpx;margin-right: 20rpx;
}.care-header-box {display: flex;justify-content: flex-start;
}.right-text {display: flex;justify-content: space-evenly;flex-direction: column;flex: 1;
}.log-img-box {margin: 0 20rpx;padding: 0 20rpx 20rpx 20rpx;border-radius: 16rpx;background: rgba(255, 255, 255, 1);box-shadow: 0 0 30rpx 0 rgba(0, 0, 0, 0.1);}

var app = getApp()
// canvas 全局配置
var isButtonDown = false;
var nurseArrx = [];
var nurseArry = [];
var nurseArrz = [];
var familyArrx = [];
var familyArry = [];
var familyArrz = [];
var canvasw = 0;
var canvash = 0;
Page({/*** 页面的初始数据*/data: {role: '',active: 0,uploaderList: [],lciSubOrderLogInfoList: [],uploaderNowNum: 0,nurseSign: null,familySign: null,nurseArrx: [],nurseArry: [],nurseArrz: [],familyArrz: [],familyArrx: [],familyArrY: [],statusMap: {WATING_SURE: '待确定',WATING_VISIT: '待出诊',WATING_ARRIVE: '待到达',SERVICING: '服务中',LOG_WITH_EVALUATE: '日志与评价',FINISH: '已完成'},status: '',statusDisplay: '',nurserSignImg: '',familySignImg: '',isNurseStart: false,isFamilyStart: false},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({role: wx.getStorageSync('role')})let nurseSign = this.init('canvas1')let familySign = this.init('canvas2')this.setData({nurseSign,familySign,hospitalDeptId: options.hospitalDeptId,subOrderId: options.subOrderId})},/*** 生命周期函数--监听页面显示*/onShow: function () {this.handleDetail()},// 点击保存图片handleSaveSign() {let that = thisthis.setData({lciSubOrderLogInfoList: []})let p1, p2wx.canvasToTempFilePath({canvasId: 'canvas1',fileType: 'png',success: function (res) {that.setData({nurserSignImg: res.tempFilePath}),p1 = new Promise((res1, rej1) => {that.uploadImage(res.tempFilePath, res1, 'NURSE_SIGN')})}})wx.canvasToTempFilePath({canvasId: 'canvas2',fileType: 'png',success: function (res) {that.setData({familySignImg: res.tempFilePath}),p2 = new Promise((res1, rej1) => {that.uploadImage(res.tempFilePath, res1, 'FAMILY_MEMBER_SIGN')})}})return Promise.all([p1, p2])},uploadLocalImgs() {var uploaderList = this.data.uploaderList; //原数据var proArr = []for (let i = 0; i < uploaderList.length; i++) {var pro = new Promise((res1, rej1) => {this.uploadImage(uploaderList[i], res1, 'HOME_CARE_LOG')})proArr.push(pro)}return Promise.all(proArr)},handleFinish() {let that = thiswx.showLoading({title: '加载中...',mask: true})that.handleSaveSign().then(() => {     if (that.data.uploaderList.length && that.data.isNurseStart && that.data.isFamilyStart) {wx.hideLoading()wx.showModal({content: '您确认完成吗？',confirmColor: '#007eff',mask:true,success(res) {if (res.confirm) {that.uploadLocalImgs().then(() => {that.handleChangeStatus()})} else if (res.cancel) {console.log('用户点击取消')}}})} else {wx.hideLoading()wx.showToast({title: '请完善信息',icon: 'none'})}})},handleChangeStatus() {let that = thiswx.showLoading({title: '加载中...',mask: true})let data = {id: this.data.subOrderId,status: 'FINISH',lciSubOrderLogInfoList: this.data.lciSubOrderLogInfoList}console.log('data', data)app.http.post(`/cl-hospital-ihospital/ihospital/lci/sub/orders/records/record`, data).then(res => {wx.hideLoading()that.handleDetail()})},handleDetail() {wx.showLoading({title: '加载中...',mask: true})app.http.get(`/cl-hospital-ihospital/ihospital/lci/sub/orders/records/record?hospitalDeptId=${this.data.hospitalDeptId}&subOrderId=${this.data.subOrderId}`).then(res => {let status = res.data.subOrderVo.subOrder.serviceStatusthis.setData({careData: res.data,status,statusDisplay: this.data.statusMap[status]})let imgJson = res.data.subOrderVo.subOrder.imgJsonlet nurserSignImg = imgJson.filter(it => it.imageType === 'NURSE_SIGN').map(item => item.imgUrl)let familySignImg = imgJson.filter(it => it.imageType === 'FAMILY_MEMBER_SIGN').map(item => item.imgUrl)if (imgJson.length) {this.setData({uploaderList: imgJson.filter(it => it.imageType === 'HOME_CARE_LOG').map(item => item.imgUrl),nurserSignImg: nurserSignImg.join(','),familySignImg: familySignImg.join(',')})}wx.hideLoading()wx.stopPullDownRefresh()})},handleService() {wx.redirectTo({url: `/pages/care/careDetail/index?hospitalDeptId=${this.data.hospitalDeptId}&subOrderId=${this.data.subOrderId}`})},//获取上传图片getUploaderList(e) {this.setData({uploaderList: e.detail.uploaderList,uploaderNowNum: e.detail.uploaderNowNum})},/*** 上传图片获取地址*/uploadImage(tempFilePath, callBack, type) {var that = thiswx.showLoading({title: '加载中...',mask: true})console.log('tempFilePath', tempFilePath)app.http.get(`/cl-system/medias/uploadToken?mimeType=image/jpeg&type=IMAGE`).then(result => {wx.uploadFile({url: 'https://up.qbox.me/',filePath: tempFilePath,name: 'file',formData: {'token': result.data.token,'key': result.data.fileName},success: function (res) {var data = res.datathat.data.lciSubOrderLogInfoList.push({imageType: type,imgUrl: result.data.fileUrl})callBack()},complete: function (res) {console.log('res', res)wx.hideLoading()}})}).catch(res=>{wx.hideLoading()})},onClickDisabled() {wx.showToast({title: '暂未开放',})},init(canvas) {// 使用 wx.createContext 获取绘图上下文 contextlet context = wx.createCanvasContext(canvas);context.beginPath()context.setStrokeStyle('#000000');context.setLineWidth(4);context.setLineCap('round');context.setLineJoin('round');context.draw();return context},canvasIdErrorCallback: function (e) {console.error(e.detail.errMsg)},//开始canvasStart: function (e) {isButtonDown = truelet index = e.target.dataset.indexif (index === 1) {nurseArrz.push(0)nurseArrx.push(e.changedTouches[0].x)nurseArry.push(e.changedTouches[0].y)this.setData({isNurseStart: true})} else {familyArrz.push(0)familyArrx.push(e.changedTouches[0].x)familyArry.push(e.changedTouches[0].y)this.setData({isFamilyStart: true})}},//过程canvasMove: function (e) {let index = e.target.dataset.indexlet context = index === 1 ? this.data.nurseSign : this.data.familySignif (index === 1) {if (isButtonDown) {nurseArrz.push(1);nurseArrx.push(e.changedTouches[0].x);nurseArry.push(e.changedTouches[0].y);}for (var i = 0; i < nurseArrx.length; i++) {if (nurseArrz[i] == 0) {context.moveTo(nurseArrx[i], nurseArry[i])} else {context.lineTo(nurseArrx[i], nurseArry[i])}}} else {if (isButtonDown) {familyArrz.push(1);familyArrx.push(e.changedTouches[0].x);familyArry.push(e.changedTouches[0].y);}for (var i = 0; i < familyArrx.length; i++) {if (familyArrz[i] == 0) {context.moveTo(familyArrx[i], familyArry[i])} else {context.lineTo(familyArrx[i], familyArry[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 (e) {isButtonDown = false;},cleardraw: function (e) {let index = e.target.dataset.indexlet context = index === 1 ? this.data.nurseSign : this.data.familySignif (index === 1) {//清除画布nurseArrx = [];nurseArry = [];nurseArrz = [];context.draw(false);this.setData({isNurseStart: false})} else {//清除画布familyArrx = [];familyArry = [];familyArrz = [];context.draw(false);this.setData({isFamilyStart: false})}},onUnload() {isButtonDown = falsenurseArrx = []nurseArry = []nurseArrz = []familyArrx = []familyArry = []familyArrz = []canvasw = 0canvash = 0},onPullDownRefresh(){this.handleDetail()}
})

{"usingComponents": { "uploads-img": "/component/uploads-img/index","commit-btn": "/component/commit-btn/index","van-tab": "/miniprogram_npm/@vant/weapp/tab/index","van-tabs": "/miniprogram_npm/@vant/weapp/tabs/index","i-caseImgs": "/component/case-imgs/index"},"navigationBarTitleText": "护理订单详情","enablePullDownRefresh": true,"onReachBottomDistance": 50
}

小程序使用canvas绘画、签名。wx.canvasToTempFilePath安卓机生成图片背景色为黑色相关推荐

在线签名、canvas手写在线签名——小程序端实现在线签名，手写电子签名canvas
在线签名.canvas手写在线签名--小程序端实现在线签名,手写电子签名canvas 近期公司准备接一个政府的小项目,里头有一个在线签名的需求,老板让我研究一下.于是就...开始思考: 在线手写签名, ...
微信小程序使用 canvas 实现手写签名
在使用微信小程序开发中,有的需求场景中会需要用户手写签名.或者绘制一些路径,通常会使用 canvas 来实现这种需求在小程序的开发官方文档中我们可以查找到相关的 canvas 接口使用方法,在文档中 ...
uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式
文章目录 uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式一.手写板 1.H5代码 2.JS代码总结 uniapp 小程序 APP 实现手写板签名画图 can ...
小程序05 canvas绘图并保存到相册
小程序现在没有提供直接分享到朋友圈的接口,所以只能采取折中的策略,即先将要分享的内容先保存为图片,保存到用户相册,然后再由用户将该图片分享到朋友圈生成小程序码需要access token,后端生成比 ...
微信小程序-基于canvas画画涂鸦
代码地址如下: http://www.demodashi.com/demo/14461.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
小程序实现canvas添加图文
小程序实现canvas添加图文笔者今年刚毕业,也没从业经历,难免有代码编写不成熟的地方,欢迎指正上周开始接触小程序,这里实现的功能类似表情包制作:选择图片.输入文字后保存到本地.目前只是demo ...
微信小程序图片转换成文字_微信小程序中用canvas将文字转成图片，文字自动换行...
onReady: function () { wx.showLoading({ title: '生成图片中...', }) var that = this const ctx = wx.createC ...
原生微信小程序实现手写签名功能
项目中有遇到在小程序上实现手动签名功能,今天给大家分享下代码 wxml 文件代码如下,catchtouchmove属性一定要加上,否则移动起来连笔非常不流畅 <view class=" ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...

小程序使用canvas绘画、签名。wx.canvasToTempFilePath安卓机生成图片背景色为黑色

小程序使用canvas绘画、签名。wx.canvasToTempFilePath安卓机生成图片背景色为黑色相关推荐

最新文章

热门文章