画canvas:
//这个是选择图片,具体可以看微信的官方文档
wx.chooseImage({
count:1, //用户最大可以选择照片张数
success(res){
console.log('res',res) //打印看里面的数据
let src = res.tempFilePaths[0] //我限制只能上传一张,所以拿的是[0]的路径
//调用wx.getImageInfo
}
})
//获取图片信息
wx.getImageInfo({
src: src ,
success(res){
//在这里进行canvas
let path = res.path //本地图片路径
let width = res.width //图片的宽
let height = res.height //图片的高
ctx.width = width;
ctx.height = height;
ctx.drawImage(path, 0, 0, width, height)
ctx.draw(false, function () {
setTimeout(function () {
//调用wx.canvasToTempFilePath
}, 1000)
})
}
})
//导出图片
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: width,
height: height,
destWidth: width,
destHeight: height,
fileType: 'jpg', //输出jpg格式,图片会小很多,清晰度也不错
canvasId: 'myCanvas',//绘制canvas的view的id
success(res) {
let tempFilePath = res.tempFilePath
//上传图片uploads(tempFilePath)
},
fail(res) {
console.log('canvasToTempFilePath fail', res)
}
}, this)
//上传图片
uploads(tempFilePath)
wx.uploadFile({
url: 'https://www.test.com', //仅为示例,非真实的接口地址
filePath: tempFilePath,
name: 'file',
header: {
'Content-Type': 'multipart/form-data',
},
method: "post",
success(res) {
let list = JSON.parse(res.data)
let imgurlArr = that.data.imgurlArr //data中定义的imgurlArr数组,用来存图片路径
imgurlArr.push(‘你的图片路径’)
if (success) {
that.setData({
imgurlArr: imgurlArr,
})
} else {
}
},
fail() {
}
})
//删除图片
del(e){
let idx = e.currentTarget.dataset.idx
let imgurlArr = this.data.imgurlArr
let that = this
wx.showModal({
title: '',
content: '确定删除该图片?',
success(res) {
if (res.confirm) {
imgurlArr.splice(idx, 1)
that.setData({
imgurlArr: imgurlArr
})
} else if (res.cancel) {
}
}
})
},
图片上传: