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

目录

前言：

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

问题：现有的压缩方案不生效

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

解决方案：

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

以下是官方文档原文

uni.createCanvasContext(canvasId, this)

定义

画布表示，传入定义在 <canvas/> 的 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三端。希望对大家有所帮助。如有错误希望各位大神多多指教。

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发