页面布局
<zan-panel title='炫场拍照'>
<view class='picBox'>
<image wx:key="{{index}}" wx:for="{{fileList}}" data-index="{{index}}" src='{{item}}' bindtap='showImg'>
<view class='icon' data-index="{{index}}" catchtap='delPic'>×</view>
</image>
<view bindtap='takePic' class='takePic'>+</view>
</view>
</zan-panel>
//这里藏着一个canvas 留着做水印用（暂时没找到其他办法），用css隐藏掉
<canvas class='canvas' canvas-id="firstCanvas"></canvas>
css
image {
width: 100rpx;
height: 100rpx;
margin-right: 20rpx;
position: relative;
overflow: inherit;
}
.icon {
position: absolute;
top: -6rpx;
right: -6rpx;
width: 30rpx;
height: 30rpx;
background: rgb(90, 86, 86);
border-radius: 50%;
color: #fff;
font-size: 30rpx;
line-height: 30rpx;
text-align: center;
}
/* 将canvas隐藏掉，如果苹果系统手机上拉能看到就将top值改的大一些 */
.canvas{
position: fixed;
top: 100%;
left: 0;
width: 100%;
height: 100%;
}
js
//点击添加拍照按钮 ， 下面一长串都是
takePic: function() {
if (this.data.fileList.length >= 9) {
Toast({
message: '最多只能上传9张图片',
selector: '#zan-toast-test',
timeout: '1000',
type: 'fail'
});
return false;
} else {
var that = this;
wx.chooseImage({
count: 9, // 默认9
sourceType: ['camera'], //只允许用相机拍照
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
success: function(res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var arr = that.data.fileList
res.tempFilePaths.forEach(function(item) {
arr.push(item)
})
that.setData({
fileList: arr
})
//获取图片详细信息
wx.getImageInfo({
src: res.tempFilePaths[0],
success: (ress) => {
let date = util.formatTime(new Date());
let ctx = wx.createCanvasContext('firstCanvas')
//将每个图片src放到cancas内，宽高为图片大小
ctx.drawImage(res.tempFilePaths[0], 0, 0, ress.width, ress.height)
//将声明的时间放入canvas
ctx.setGlobalAlpha(0.4)
ctx.setFontSize(30) //注意：设置文字大小必须放在填充文字之前，否则不生效
ctx.fillText(date, 0, 30)
ctx.draw(false, function () {
wx.canvasToTempFilePath({
canvasId: 'firstCanvas',
success: (res) => {
//自己封装的请求，将canvas
app.post('/attach',{
fileList: res.tempFilePath
},function (response){
console.log(response)
})
},
fail: (e) => {
console.log(e)
}
})
})
}
})
}
})
}
},
//图片预览fangfa
页面布局
<zan-panel title='炫场拍照'>
<view class='picBox'>
<image wx:key="{{index}}" wx:for="{{fileList}}" data-index="{{index}}" src='{{item}}' bindtap='showImg'>
<view class='icon' data-index="{{index}}" catchtap='delPic'>×</view>
</image>
<view bindtap='takePic' class='takePic'>+</view>
</view>
</zan-panel>
//这里藏着一个canvas 留着做水印用（暂时没找到其他办法），用css隐藏掉
<canvas class='canvas' canvas-id="firstCanvas"></canvas>
css
image {
width: 100rpx;
height: 100rpx;
margin-right: 20rpx;
position: relative;
overflow: inherit;
}
.icon {
position: absolute;
top: -6rpx;
right: -6rpx;
width: 30rpx;
height: 30rpx;
background: rgb(90, 86, 86);
border-radius: 50%;
color: #fff;
font-size: 30rpx;
line-height: 30rpx;
text-align: center;
}
/* 将canvas隐藏掉，如果苹果系统手机上拉能看到就将top值改的大一些 */
.canvas{
position: fixed;
top: 100%;
left: 0;
width: 100%;
height: 100%;
}
js
//点击添加拍照按钮 ， 下面一长串都是
takePic: function() {
if (this.data.fileList.length >= 9) {
Toast({
message: '最多只能上传9张图片',
selector: '#zan-toast-test',
timeout: '1000',
type: 'fail'
});
return false;
} else {
var that = this;
wx.chooseImage({
count: 9, // 默认9
sourceType: ['camera'], //只允许用相机拍照
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
success: function(res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var arr = that.data.fileList
res.tempFilePaths.forEach(function(item) {
arr.push(item)
})
that.setData({
fileList: arr
})
//获取图片详细信息
wx.getImageInfo({
src: res.tempFilePaths[0],
success: (ress) => {
let date = util.formatTime(new Date());
let ctx = wx.createCanvasContext('firstCanvas')
//将每个图片src放到cancas内，宽高为图片大小
ctx.drawImage(res.tempFilePaths[0], 0, 0, ress.width, ress.height)
//将声明的时间放入canvas
ctx.setGlobalAlpha(0.4)
ctx.setFontSize(30) //注意：设置文字大小必须放在填充文字之前，否则不生效
ctx.fillText(date, 0, 30)
ctx.draw(false, function () {
wx.canvasToTempFilePath({
canvasId: 'firstCanvas',
success: (res) => {
//自己封装的请求，将canvas 转成图片的路径发送给后台（没测试会不会变成base64），因为需求原因在这里上传的路径，也可在提交时统一上传图片路径，但是遇到一些问题（在循环获得canvas的时候，ctx.draw()的callback()方法，有些问题），如果您已解决，请留言给我，跪谢！！！
app.post('/attach',{
fileList: res.tempFilePath
},function (response){
console.log(response)
})
},
fail: (e) => {
console.log(e)
}
})
})
}
})
}
})
}
},
//图片预览方法
showImg: function(event) {
var index = event.currentTarget.dataset.index
wx.previewImage({
current: this.data.fileList[index], // 当前显示图片的http链接
urls: this.data.fileList // 需要预览的图片http链接列表
})
},
//删除图片方法
delPic: function(event) {
var index = event.currentTarget.dataset.index;
var arr = this.data.fileList;
arr.splice(index, 1);
this.setData({
fileList: arr
})
},