2377关注7966浏览
- 预期表现
- 复现路径
- 提供一个最简复现 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, ur
-
至过去的我
2044人对此回答表示赞同
我是未来的你,你现在是不是在年找寻小程序答案。你不要感觉诧异,给你来信原因,就是让你不在后悔。今天去学习如何推广小程序,相信......点击查看更多> -
遥遥无期
19人对此回答表示赞同
展开192回复分享发布于 6年前评论(2)
收起评论
-
月下独酌素笺淡墨
7人对此回答表示赞同
wx.canvasToTempFilePath()函数是异步的,要在ctx.draw(),回调中settimeout执行你要的代码防止图片丢失!
展开74回复分享发布于 6年前评论(4)
收起评论
-
Adeline 2019-03-03 09:11
这段是改成这样了吗
回复 -
龙骑士 2019-03-05 18:45
是写在success里面的demo都能跑通,嵌进项目里图片就出问题了。。。。原模原样copy进去也不行
回复 -
文心雕龙 2019-03-07 12:05
wx.getImageInfo()也是异步的,因此你要把2个函数错开或者写在wx.getImageInfo()中success
回复 -
夏洛克制不住自己 2019-03-09 13:47
你好我就是在那个里面调的
回复
-
-
枯等年轮
7人对此回答表示赞同
我也是,经过我的测试发现,好像跟canvas这个控件的width和height有关,比如你设置了50px*50px的canvas,无论图在里面铺多大(比如100*100),你只能截在canvas里能看见的那50*50的那部分,由于我们大多是从坐标(0,0)开始铺,所以一般只能截到左上角的一部分图
展开72回复分享发布于 6年前评论(2)
收起评论
-
Chloe1 2019-02-25 19:00
你这是铺进去,我是说截图截出来,用wx.canvasToTempFilePath方法生成一个临时文件
回复 -
harryhurryup 2019-02-27 13:13
ctx.drawImage(src,0,0,50,50,0,0,100,100)
回复
-
-
Reid
2人对此回答表示赞同
主解决了吗?我的图片也是只出现左上角一块。
展开21回复分享发布于 6年前评论(1)
收起评论
-
置之度外 2019-02-27 16:41
对,没错,动态的可以的,我那个是canvas和模板之间样式有冲突,图片流是读完整的,现在弄好了。
回复
-
-
胖小王
1人对此回答表示赞同
开发工具机型iPhone6版本库1.9.91
展开10回复分享发布于 6年前评论(0)
收起评论
我试过放在canvasToTempFilePath的success回调里出来的图片还是不完整的但是调了一下canvas的top样式一半的图片会变小是怎么回事呢?