- 预期表现

- 复现路径

- 提供一个最简复现 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:{{ca