微信小程序添加多张图片的问题

[酒德亚纪]

没有后台的微信小程序，做着练练手，想实现一个添加多张图片的功能，思路卡住了，望指教，下面是代码
index.js
//添加照片按钮点击事件
,

  addphoto: function(){
    console.log('addphoto');
    var that = this;
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      success: function (res) {
        console.log(res);
        var tempFilePaths = res.tempFilePaths;
        console.log(res.tempFilePaths);
        // for (var i = 0; i <= tempFilePaths.length; i++){
        // that.setData({ imageList: tempFilePaths[i] });
        //   }
        that.setData({ imageList: tempFilePaths[0] });
      }\

index.wxml

<view class='separator'></view>
<view class='floortitle'>
  <view class='floortitlecolor'></view>
  <view class='floortitleinformation'>相册</view>
  <button class='addphoto' bindtap='addphoto' size='mini' type='primary'>添加图片</button>
</view>
<view class='photo'><image class='images' src='{{imageList}}'></image></view>

[酒德亚纪]

各位大牛来帮帮忙啊。 这个是纯前台的

[Vishon_Liu]

利用 canvas 压缩图片

首先 WXML 页面 下要有一个看不见的canvas,
<!--利用绝对定位隐藏canvas,不能直接有隐藏属性-->
<canvas style="width: {{thumbWidth}}px; height: {{thumbHeight}}px;border:1px solid black;position: absolute; left: -1000px; top:-1000px;" canvas-id="firstCanvas"></canvas>

js:
//点击添加图片
pushPhoto(){
var that = this, max=9;
max -= that.data.photo.length;
wx.chooseImage({
count: max,
sizeType: ['compressed'],
success: function(res) {
console.log({ '选择图片的返回数据': res });
res.tempFilePaths.forEach(v => {
console.log({'遍历每一张图':v});
that.compress(v, '450', false, function (res) {
that.setData({
photo: that.data.photo.concat(res.tempFilePath)
});
});
})
},
})
},
// 压缩图片
//file图片文件(必选)
//maxWidth限制宽度(必选)
//maxHeight限制高度(可选)
//callback压缩完成回调方法(可选)
compress(file, maxWidth, maxHeight, callback) { //接收传过来的图片
var that = this;
//获取原图片信息
wx.getImageInfo({
src: file,
success: function (res) {
var width = res.width, height = res.height;
if (width > maxWidth) {
//超出限制宽度
height = (maxWidth / width) * height;
width = parseInt(maxWidth);
}
if (res.height > maxHeight && maxHeight) {
//超出限制高度
var ratio = that.data.thumbHeight / res.height;//计算比例
width = (maxHeight / height) * width.toFixed(2);
height = maxHeight.toFixed(2);
}

that.setData({ thumbWidth: width, thumbHeight: height });

//按比例压缩图片
const ctx = wx.createCanvasContext('firstCanvas');
ctx.drawImage(file, 0, 0, width, height);
ctx.draw(false, function () {
//绘画完成回调
//生成图片
wx.canvasToTempFilePath({
canvasId: 'firstCanvas',
success: function (res) {
typeof callback == "function" && callback(res);
}
})
});
}
})
},