canvas处理图片上传保存图片流只显示一半
- 当前 Bug 的表现（可附上截图）
-
预期表现
-
复现路径
-
提供一个最简复现 Demo
js代码
wx.chooseImage({
count: 1, // 默认9
sizeType: [‘original’, ‘compressed’], // 可以指定是原图还是压缩图，默认二者都有
sourceType: itemIndex == 0 ? [‘album’] : [‘camera’],
success: (res) => {
console.log(res.tempFilePaths)
const item = new IMOperator(this).createNormalChatItem({
type: ‘image’,
content: res.tempFilePaths,
isMy: true,
});
that.data.chatItems.push(item);
that.setData({
chatItems: that.data.chatItems,
scrollTopVal: that.data.scrollTopVal + 999,
});
// 图片加水印功能
// 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) => {
console.log(ress)
let date = new Date();
let time = that.formartDate(date);
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(20) //注意：设置文字大小必须放在填充文字之前，否则不生效
ctx.setFillStyle(‘blue’)
// ctx.setGlobalAlpha(0.5)
ctx.fillText(‘15200000001’, that.data.canvasWidth - 400, that.data.canvasHeight - 150)
ctx.fillText(time, that.data.canvasWidth - 500, that.data.canvasHeight - 100)
ctx.draw(false, function() {
wx.canvasToTempFilePath({
canvasId: ‘firstCanvas’,
success: (res) => {
that.setData({
canvesimgurl:res.tempFilePath
})
},
fail: (e) => {
console.log(e)
}
})
})
wx.uploadFile({
url: ‘、、、’,
filePath: that.data.canvesimgurl,
name: ‘file’,
formData: {},
header: {
“Content-Type”: “multipart/form-data”
},
success: function (res) {
console.log(res)
var url = res.data.url;
var data = res.data.fileId;
var imgtype = “image”;
if (res.statusCode == 200) {
that.sendmessage(data, url, imgtype)
} else {
let index = parseInt(that.data.chatItems.length - 1);
that.updateViewWhenSendFailed(index)
}
console.log(res.data)
},
fail: function (res) {
console.log(res)
},
complete: function (res) {
console.log(res)
}
})
}
})
}
});
});
