画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) {
}
}
})
},
<!--
页面
myCanvas要注意处理,如果你把display设置为none,将会绘图失败:
opacity:0;position:absolute;left:-{{canvasWidth}}px;top:-{{canvasHeight}}px
-->
<view>
<view class="selbox" >
<view class="seldetailbox1 recordbox">
<view>图片上传:</view>
<view class="recordimgbox">
<image wx:if="{{imgurlArr.length > 0}}" wx:for="{{imgurlArr}}" wx:key="{{index}}" src="{{imgurlArr[index]}}" data-idx="{{index}}" bindtap="del" class="imgs"><icon type="clear"></icon></image>
<image src="../../images/add.svg" bindtap="selphoto" class="addpic"></image>
</view>
</view>
</view>
<view style="opacity:0;position:absolute;left:-{{canvasWidth}}px;top:-{{canvasHeight}}px">
<canvas canvas-id="myCanvas" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;"></canvas>
</view>
</view>