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

2017-11-23 03:13:42 1.4k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

保姆级教程：用pdf-lib在微信小程序里把多张图片合成PDF（附水印添加）本文提供了一份详细的微信小程序开发教程，指导开发者如何使用pdf-lib库将多张图片合成为PDF文件，并添加水印功能。文章涵盖了从环境配置、核心实现逻辑到高级功能（如智能水印系统和性能优化）的全流程，适合需要实现多图片转pdf功能的开发者参考。阅读详情

没有后台的微信小程序，做着练练手，想实现一个添加多张图片的功能，思路卡住了，望指教，下面是代码
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>

...全文

微信小程序云开发上传多张图片微信小程序使用云开发如何批量上传图片场景 1.微信小程序 2.云开发 3.批量上传图片分析由于是多张图片，不能是同步，上传太慢了，最好是异步上传。方便管理使用Promise的all方法 code count: parseInt(n) - o, //动态图片数量 sizeType: ['compressed'], success: funct... 阅读详情

酒德亚纪

微信开发 3,161 成员 3,828 内容

+ 关注 + 加入社区

切换为时间正序

Vishon_Liu 2018-10-06

打赏
举报

利用 canvas 压缩图片

首先 WXML 页面下要有一个看不见的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);
}
})
});
}
})
},

酒德亚纪 2017-11-24

打赏
举报

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

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

相关推荐