canvas处理图片上传保存图片流只显示一半 您所在的位置:网站首页 微信表情只显示一半 canvas处理图片上传保存图片流只显示一半

canvas处理图片上传保存图片流只显示一半

2024-05-16 14:02| 来源: 网络整理| 查看: 265

- 当前 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)

}

})

}

})

}

});

});



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有