- 当前 Bug 的表现(可附上截图)
- 预期表现
- 复现路径
- 提供一个最简复现 Demo
js代码
Page({
data: {
url:’’,
fileList:[],
canvasHeight:’’,
canvasWidth:’’,
},
onLoad: function (e) {
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 =new Date();
let time = date.toLocaleTimeString()
let ctx = wx.createCanvasContext(‘firstCanvas’)
that.setData({
canvasHeight: ress.height,
canvasWidth: ress.width
})
//将图片src放到cancas内,宽高为图片大小
ctx.drawImage(res.tempFilePaths[0], 0, 0, ress.width, ress.height)
//将声明的时间放入canvas
ctx.setFontSize(30) //注意:设置文字大小必须放在填充文字之前,否则不生效
ctx.setFillStyle(‘blue’)
ctx.fillText(‘拍摄地点’, 0, 100)
ctx.fillText(‘单证类型’, 100, 50)
ctx.strokeText(time, 100, 10)
ctx.draw(false, function () {
wx.canvasToTempFilePath({
canvasId: ‘firstCanvas’,
success: (res) => {
console.log(res.tempFilePath)
wx.uploadFile({
url: ‘’,
filePath: res.tempFilePath[0],
name: ‘file’,
formData:{},
header: {
“Content-Type”: “multipart/form-data”
},
success: function (res) {
console.log(res.data)
},
fail: function (res) {
console.log(res)
},
complete: function (res) {
console.log(res)
}
})
},
fail: (e) => {
console.log(e)
}
})
})
}
})
}
})
}
})
index.html
<canvas class=‘canvas’ style=“width:{{canvasWidth}}px;height:{{canvasHeight}}px;top:{{canvasHeight*2}}px;” canvas-id=“firstCanvas”></canvas>
index.css
.canvas{
position: fixed;
top: 200%;
left: 0;
/* background: red;*/
width: 100%;
height: 100%;
}