1.从本地相册或者相机拍照选择图片;
chooseImage (){
wx.chooseImage({
count: 1,
//图片尺寸原图和压缩图
sizeType: ['original', 'compressed'],
//从相册选图和使用相机
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
}
})
}
2.将图片转换为base64格式;
//img_url为选择图片得到的临时路径
imgBase64(img_url) {
let res = wx.getFileSystemManager().readFileSync(img_url, 'base64')
console.log("输出base64",res)
return res
},
3.将图片上传;
upLoad(){
wx.request({
url: '你的接口',
data: {
img:'',//转base64后的字符串
},
header: {
'content-type': 'application/json'
},
success (res) {
console.log(res.data)
}
})
}
但在实际开发中,用户上传的图片有可能很大,上传时间就会变长,这样就会影响用户体验,这个时候就需要我们对图片进行压缩。本文采用canvas压缩图片,步骤如下:
- 创建canvas;
- 取得图片临时路径;
- 取得图片的原始尺寸;
- 对图片原始尺寸进行等比例缩放;
- 将缩放后的图片画到canvas上;
- 导出canvas画出的图片资源url;
- 将url转为base64上传;
创建canvas,注意canvas标签中对于id的定义(刚开始尝试了2d写法,在画图片时候失败了)
//wxml
<canvas style="width: {{cwidth}}px;height: {{cheight}}px;" canvas-id="mycanvas" class="canvas-compress"></canvas>
//js
data:{
cwidth:'',
cheight:'',
}
//wxss
//此处是为了保证画出的图片不出现在视野中
.canvas-compress {
position: absolute;
top: -1000px;
background-color: gray;
}
压缩画出canvas,得到临时路径:
get_img(url) {
let that = this
console.log("选择图片返回的路径", url)
wx.getImageInfo({
src: url,
success(res) {
console.log("路径", res.path)
console.log('获得原始图片大小', res.width, res.height)
var originWidth, originHeight;
originHeight = res.height;
originWidth = res.width;
// 最大尺寸限制 //压缩比例
var maxWidth = originWidth >= originHeight ? 300 : 600,
maxHeight = originWidth >= originHeight ? 600 : 300;
// 目标尺寸
var targetWidth = originWidth,
targetHeight = originHeight;
//等比例压缩,如果宽度大于高度,则宽度优先,否则高度优先
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > maxWidth / maxHeight) {
// 要求宽度*(原生图片比例)=新图片尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
console.log("压缩后的图片大小", targetWidth, targetHeight)
var ctx = wx.createCanvasContext('mycanvas');
ctx.clearRect(0, 0, targetWidth, targetHeight);
ctx.drawImage(res.path, 0, 0, targetWidth, targetHeight);
ctx.draw();
//更新canvas大小
that.setData({
cwidth: targetWidth,
cheight: targetHeight
});
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: (res) => {
console.log("压缩后的临时路径:", res.tempFilePath)
},
fail: (err) => {
console.error(err)
}
}, this)
}, 400); //延迟400毫秒为了等canvas画上
}
})
},