<!-- 模板提示 -->
<view class="danger-swapper" wx:if="{{dangHint}}">
<view class="mbBox">
<view bindtap="submitMb">快来点我呀</view>
<view class="mb7" bindtap="saveCanvas">确 定</view>
</view>
</view>
<!-- 输入签名 -->
<view class="danger-swapper" wx:if="{{dangeMb}}">
<view style="width:100%">
<view class="container">
<canvas canvas-id="firstCanvas" id='firstCanvas' disable-scroll="true" bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas>
<view class="canBtnBox">
<view bindtap='clear' class="clear canBtn">
清 空
</view>
<view bindtap='export' class="submit canBtn">
提 交
</view>
</view>
</view>
</view>
</view>
答完题跳转到新页面的时候在新页面需要签名
// 跳转
onFinish: function () {
const check = () => {
if (this.data.user.id== 97) {
return false;
}
if (this.data.user.id== 101) {
return false;
}
return true;
};
const id= check();
if(this.data.user.id== 7 && id){
// 保存dangHint在本地 控制下次进入页面是否弹出
wx.setStorage({key:"dangHint",data:true})
}
wx.reLaunch({ url: '下一个页面地址' });
},
进入新页面时需要弹出提示信息 通过dangHint控制
data:{
context: null,
imgUrl:'', // 手写签名img
bkgimgUrl:'./../../img/abc.jpg',
dangeMb:false, //控制画板
dangHint:wx.getStorageSync('dangHint') //进页面是否显示提示内容
}
onShow:function(){
this.setData({ dangHint: wx.getStorageSync('dangHint') });
if(this.data.dangHint){
wx.showModal({
title: '提 示',
content: '点击屏幕任意位置弹出签名框',
showCancel: false,
});
}
}
// 点击弹出画板 输入签名
submitMb(){
this.setData({
dangeMb:true
})
},
// 导出图片 自己写出来的签名图
export: function () {
let that = this;
that.data.context.draw(true, wx.canvasToTempFilePath({
fileType: 'jpg',
canvasId: 'firstCanvas',
success:(res) => {
let { tempFilePath } = res;
this.setData({
imgUrl:tempFilePath,
dangeMb:false
});
},
fail() {
wx.showToast({
title: '导出失败',
icon: 'none',
duration: 2000
})
}
}))
},
// 开始触摸 记录开始点
bindtouchstart: function(e) {
console.log("bindtouchstart", e);
this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
},
// 记录移动点,刷新绘制
bindtouchmove: function(e) {
console.log("bindtouchstart", 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.draw();
},
// 保存
saveCanvas(e){
// 调用后台保存接口
request
.submit_fpm_user_commitment(this, { url:this.data.imgUrl })
.then((res) => {
if(res.data.success){
//获取相册授权
wx.getSetting({
success:(res) => {
console.log(res.authSetting)
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success:() => {
//用户同意授权
this.saveImgToLocal();
console.log(2)
},
fail() {//用户拒绝授权
wx.showModal({
title: '提示',
content: '保存失败,请手动打开相册授权',
showCancel: false
})
}
})
} else {//用户已经授权过了
this.saveImgToLocal();
console.log(1)
}
}
})
}else{
wx.showModal({
title: '提示',
content: '保存失败',
showCancel: false
})
}
})
.catch(() => {
})
.finally(() => {
this.setData({
dangHint:false,
})
wx.setStorage({key:"dangHint",data:false})
wx.removeStorageSync('dangHint')
});
},
saveImgToLocal: function (e) {
const user = wx.getStorageSync('User');
console.log(user)
let imgUrl = this.data.imgUrl;
let mobile = user.mobile ? user.mobile : '';
// 我比较懒 因为导出的图片布局很恶心 所以我索性贴上去一张图片 只用把动态的数据画上去就可以了
// 哈哈 整个背景布局是img 签名是img 手机号不是
const ctx = wx.createCanvasContext('share');
// 第一个参数 距离left距离
// 第二个参数 距离top距离
// 第三第四 宽高
ctx.drawImage('./../../img/abc.jpg',0,0,300 ,550); // 背景布局
ctx.drawImage(imgUrl,210,370,50,40); // 签名
// ctx.setFontSize(18)
ctx.fillText(mobile,210,423) // 手机号
ctx.draw()
// ctx.draw(true)
//将生成好的图片保存到本地,需要延迟一会,绘制期间耗时
setTimeout(function() {
wx.canvasToTempFilePath({
canvasId: 'share',
success:(res) => {
var tempFilePath = res.tempFilePath;
console.log('tempFilePath地址是' + tempFilePath)
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: (data) => {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
},
fail: function(res) {
console.log(res);
}
})
// 不要加下面这些!!!!微信开发者工具可以正常使用 真机调试就报错
// wx.downloadFile({
// url: tempFilePath,
// success:(res) => {
// console.log(res);
// //图片保存到本地
// wx.saveImageToPhotosAlbum({
// filePath: tempFilePath,
// success: (data) => {
// wx.showToast({
// title: '保存成功',
// icon: 'success',
// duration: 2000
// })
// },
// })
// },
// fail: function(res) {
// console.log('downloadFile报错')
// console.log(res);
// }
// })
},
fail: function(res) {
console.log(res);
}
});
}, 500);
},
遇到的问题
canvasToTempFilePath绘制图片到画布上,真机不显示,开发工具显示,相关域名都配置上了,打印看到的是地址返回不一样;
真机返回的是:wxfile://tmp_666.png
开发工具返回的是:"http://tmp/666
第一次用 咱也找不到原因 只能自己摸索 发现把 wx.downloadFile 去掉就ok了 应该因为我是本地图片不需要走wx.downloadFile的原因吧 但是wx你难道不能给我一个提示吗???
亲测已成功 如果我说的不对 欢迎讨论