• 微信小程序开发之图片压缩方案

    目录

     前言：

    问题：现有的压缩方案支付宝小程序不生效

    解决方案：

    uni.createCanvasContext(canvasId, this)

    核心代码展示：

    1，封装公用工具类compressImage.js

    2，html调用并上传服务器：

    小结：

    前言：

    由于公司业务拓展，急需基于uniapp生成支付宝小程序。之前已经成功将微信小程序和H5融合成一套码，故得知此需求的时候，笔者信心十足，但是本着实践出真知的想法，觉得还是得先调研一下uniapp在支付宝小程序的兼容性，并集成已有项目主体关键功能，为后续的技术调研方案做准备。在调研过程中，发现之前封装好的图片压缩方法在支付宝小程序上无法正常使用，重新阅读了官方文档后，又双更新了项目的图片压缩方法的使用流程。

    问题：现有的压缩方案支付宝小程序不生效

    之前封装好的压缩方案，原理是使用canvas现实的，但是在支付宝小程序端不生效，canvas相关的api存在但是不可用。

    解决方案：

    查阅文档后，给canvas添加了id区分支付宝小程序，可兼容之。

    以下是官方文档原文

    uni.createCanvasContext(canvasId, this)

    #定义

    画布表示，传入定义在  的 canvas-id或id（支付宝小程序是id、其他平台是canvas-id）

    核心代码展示：

    1，封装公用工具类compressImage.js

    1. /**
    2.  * 给的文件资源是否小于LimitSize （M）, 小于走lessCallBack， 大于走moreCallBack
    3.  */
    4. export function imageSizeIsLessLimitSize(imagePath, limitSize, lessCallBack, moreCallBack) {
    5.   uni.getFileInfo({
    6.     filePath: imagePath,
    7.  
    8.     success(res) {
    9.       console.log('压缩前图片大小:', res.size / 1024, 'kb')
    10.  
    11.       if (res.size > 1024 * 1024 * limitSize) {
    12.         moreCallBack()
    13.       } else {
    14.         lessCallBack()
    15.       }
    16.     }
    17.   })
    18. } // 主调用方法
    19.  
    20. /**
    21.  * 获取小于限制大小的Image, limitSize默认为1M，递归调用。
    22.  */
    23.  
    24. export function getLessLimitSizeImage(canvasId, imagePath, limitSize = 1, drawWidth, callBack) {
    25.   imageSizeIsLessLimitSize(
    26.     imagePath,
    27.     limitSize,
    28.     (lessRes) => {
    29.       callBack(imagePath)
    30.     },
    31.     (moreRes) => {
    32.       uni.getImageInfo({
    33.         src: imagePath,
    34.         success: function(imageInfo) {
    35.           var maxSide = Math.max(imageInfo.width, imageInfo.height) //画板的宽高默认是windowWidth
    36.  
    37.           var windowW = drawWidth
    38.           var scale = 1
    39.  
    40.           if (maxSide > windowW) {
    41.             scale = windowW / maxSide
    42.           }
    43.  
    44.           var imageW = Math.floor(imageInfo.width * scale)
    45.           var imageH = Math.floor(imageInfo.height * scale)
    46.           console.log('调用压缩', imageW, imageH)
    47.           getCanvasImage(canvasId, imagePath, imageW, imageH, (pressImgPath) => {
    48.             getLessLimitSizeImage(canvasId, pressImgPath, limitSize, drawWidth * 0.7, callBack)
    49.           })
    50.         }
    51.       })
    52.     }
    53.   )
    54. }
    55. /**
    56.  * 获取画布图片
    57.  */
    58.  
    59. export function getCanvasImage(canvasId, imagePath, imageW, imageH, getImgsuccess) {
    60.   const ctx = uni.createCanvasContext(canvasId)
    61.   ctx.drawImage(imagePath, 0, 0, imageW, imageH)
    62.   ctx.draw(false, () => {
    63.     uni.canvasToTempFilePath({
    64.       canvasId: canvasId,
    65.       x: 0,
    66.       y: 0,
    67.       width: imageW,
    68.       height: imageH,
    69.       quality: 1,
    70.  
    71.       success(res) {
    72.         getImgsuccess(res.tempFilePath)
    73.       }
    74.     })
    75.   })
    76. }
    77. export default {
    78.   getLessLimitSizeImage,
    79.   imageSizeIsLessLimitSize,
    80.   getCanvasImage
    81. }

    2，html调用并上传服务器：

    1. <template>
    2.   <view class="upload-page">
    3.     <view class="upload-tips">您最多可上传{{maxCount}}张图片view>
    4.     <view class="image-list">
    5.       <view v-for="(item, index) in fileList"
    6.             :key="index"
    7.             class="image-item">
    8.         <image class="image"
    9.                mode="aspectFit"
    10.                :src="item.path"
    11.                @click="viewImage(index)">image>
    12.         <image class="image-delete"
    13.                :src="imgUrl + 'doctor/img_delete.png'"
    14.                @tap.stop="deleteImage"
    15.                :data-index="index">image>
    16.       view>
    17.       <view v-if="fileList.length < maxCount"
    18.             class="image-item"
    19.             @tap="openAlbum">
    20.         <image class="image"
    21.                :src="imgUrl + 'doctor/img_add.png'">image>
    22.       view>
    23.     view>
    24.     <view class="upload-btn"
    25.           @tap="confirmUpload">确定view>
    26.  
    27.     <canvas canvas-id="pressCanvas"
    28.             id="pressCanvas"
    29.             class="press-canvas">canvas>
    30.   view>
    31. template>
    32.  
    33. <script>
    34. import { getLessLimitSizeImage } from './compressImage.js'
    35.  
    36.  
    37. export default {
    38.   data() {
    39.     return {
    40.       imgUrl: process.env.VUE_APP_RESOURCE_URL,
    41.       page: {
    42.         json: {}
    43.       },
    44.       type: '',
    45.       fileList: [],
    46.       maxCount: 9
    47.     }
    48.   },
    49.  
    50.   components: {},
    51.   props: {},
    52.  
    53.   onLoad(options) {
    54.     this.type = options.type
    55.     this.page.json = options
    56.   },
    57.  
    58.   methods: {
    59.     confirmUpload() {
    60.       if (this.fileList.length === 0) {
    61.         this.$util.showToast('请至少选择一张图片')
    62.         return false
    63.       }
    64.       this.$Router.back()
    65.       uni.$emit(this.page.json.emit, this.fileList)
    66.     },
    67.  
    68.     // 查看图片
    69.     viewImage(index) {
    70.       let copyData = [],
    71.         data = [].concat(this.fileList)
    72.       data.forEach((v) => {
    73.         copyData.push(v.path)
    74.       })
    75.       uni.previewImage({
    76.         current: copyData[index],
    77.         urls: copyData
    78.       })
    79.     },
    80.  
    81.     // 删除图片
    82.     deleteImage(e) {
    83.       let { index } = e.currentTarget.dataset
    84.       this.fileList.splice(index, 1)
    85.     },
    86.  
    87.     // 打开相册
    88.     openAlbum() {
    89.       let length = this.maxCount - this.fileList.length
    90.       uni.chooseImage({
    91.         count: length,
    92.         sizeType: ['original', 'compressed'],
    93.         sourceType: ['album', 'camera'],
    94.         success: (res) => {
    95.           this.upLoadImgs(res.tempFilePaths, this.type)
    96.         }
    97.       })
    98.     },
    99.  
    100.     // 上传多张图片
    101.     upLoadImgs(files, type) {
    102.       uni.showLoading()
    103.       let promises = files.map((item) => {
    104.         return this.uploadImg(item, type)
    105.       })
    106.       Promise.all(promises)
    107.         .then((datas) => {
    108.           // 所有上传完成后
    109.           this.fileList = datas.length > 0 && this.fileList.concat(datas)
    110.  
    111.           uni.hideLoading()
    112.         })
    113.         .catch(() => {
    114.           uni.hideLoading()
    115.         })
    116.     },
    117.  
    118.     // 上传图片
    119.     uploadImg(file, type) {
    120.       return new Promise((resolve, reject) => {
    121.         getLessLimitSizeImage('pressCanvas', file, 1, 750, (imagePath) => {
    122.           /* #ifdef H5 */
    123.           let devicetype = 'h5'
    124.           /* #endif */
    125.           /* #ifdef MP-WEIXIN */
    126.           let devicetype = 'applet'
    127.           /* #endif */
    128.  
    129.           /* #ifdef MP-ALIPAY */
    130.           let devicetype = 'alipay'
    131.           /* #endif */
    132.  
    133.           uni.uploadFile({
    134.             url: process.env.VUE_APP_API_URL + 'client/v1/file/images',
    135.             header: {
    136.               'access-token': this.$store.state.user.accessToken,
    137.               version: process.env.VUE_APP_VERSION,
    138.               'version-code': process.env.VUE_APP_VERSION_CODE,
    139.               devicetype: devicetype
    140.             },
    141.             fileType: 'image',
    142.             filePath: imagePath,
    143.             name: 'file',
    144.             formData: {
    145.               source: 'inquiryApply',
    146.               type:  ''
    147.             },
    148.             success: (res) => {
    149.               let image = JSON.parse(res.data)
    150.               console.log('uploadFile success：', image)
    151.  
    152.               if (image.code === 200) {
    153.                 resolve(image.data[0])
    154.               } else {
    155.                 this.$util.showModal(image.msg || '图片上传失败')
    156.                 reject(image)
    157.               }
    158.             },
    159.             fail: (err) => {
    160.               console.log('uploadFile fail：', JSON.stringify(err || {}))
    161.  
    162.               if (err.hasOwnProperty('errMsg') && err.errMsg.indexOf('timeout') > 0) {
    163.                 this.$util.showModal('上传超时，请稍后再试')
    164.               } else {
    165.                 this.$util.showModal('图片上传失败，请稍后再试')
    166.               }
    167.  
    168.               reject(err)
    169.             },
    170.             complete: () => {}
    171.           })
    172.         })
    173.       })
    174.     }
    175.   }
    176. }
    177. script>
    178. <style lang="scss" scoped>
    179. .upload-page {
    180.   position: relative;
    181.   width: 750rpx;
    182.   height: 100vh;
    183.   background-color: #ffffff;
    184. }
    185.  
    186. .upload-tips {
    187.   width: 750rpx;
    188.   height: 80rpx;
    189.   background-color: #fffbe8;
    190.   font-size: 28rpx;
    191.   color: #ed6a0c;
    192.   line-height: 80rpx;
    193.   text-align: center;
    194. }
    195.  
    196. .image-list {
    197.   box-sizing: border-box;
    198.   display: flex;
    199.   flex-wrap: wrap;
    200.   justify-content: flex-start;
    201.   align-items: center;
    202.   width: 750rpx;
    203.   padding: 30rpx;
    204. }
    205.  
    206. .image-item {
    207.   position: relative;
    208.   box-sizing: border-box;
    209.   width: 210rpx;
    210.   height: 210rpx;
    211.   margin-right: 30rpx;
    212.   margin-bottom: 30rpx;
    213.   border: 1rpx solid #ebedf0;
    214. }
    215.  
    216. .image-item:nth-child(3n) {
    217.   margin-right: 0;
    218. }
    219.  
    220. .image-item .image {
    221.   width: 210rpx;
    222.   height: 210rpx;
    223. }
    224.  
    225. .image-item .image-delete {
    226.   position: absolute;
    227.   top: -30rpx;
    228.   right: -30rpx;
    229.   width: 40rpx;
    230.   height: 40rpx;
    231.   padding: 10rpx;
    232. }
    233.  
    234. .upload-btn {
    235.   position: fixed;
    236.   bottom: 0;
    237.   left: 0;
    238.   width: 750rpx;
    239.   height: 100rpx;
    240.   background-color: $primary;
    241.   font-size: 30rpx;
    242.   color: #ffffff;
    243.   line-height: 100rpx;
    244.   text-align: center;
    245. }
    246.  
    247. .press-canvas {
    248.   position: absolute;
    249.   top: -1000px;
    250.   left: -1000px;
    251.   background-color: gray;
    252.   width: 750px;
    253.   height: 750px;
    254. }
    255. style>

    小结：

    以上就是笔者分享的图片压缩上传的方法封装及使用啦，完美兼容支付宝小程序，微信小程序及H5三端。希望对大家有所帮助。如有错误希望各位大神多多指教。

  • 相关阅读:
    【对当前现状的分析】如何做好学术汇报的PPT？
    个人笔记-ADC
    02-docker network
    虚拟机Ubuntu操作系统最基本终端命令（安装包+详细解释+详细演示）
    2678. 老人的数目 --力扣 --JAVA
    vmware安装MacOS以及flutter遇到的问题
    JVM【类加载与GC垃圾回收机制】
    Android硬件服务访问(3)：编写JNI方法提供Java访问硬件服务接口
    MySQL导出数据为csv的方法（亲测）
    C++函数模板
  • 原文地址：https://blog.csdn.net/m0_61243965/article/details/126002755