devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序 实现上传图片前裁剪功能_微信小程序剪裁

作者：笔触狂放9 | 2024-05-13 19:45:19

赞

踩

微信小程序剪裁

前言

        技术支持： wx-cropper 裁剪

        总体思路是：安装完wx-cropper之后就它当成组件使用。在使用页面的地方引入组件就行。上传图片的逻辑不变，在 通过wx.chooseMedia() Api 拿到图片之后传递给子组件，子组件在拿到图片进行裁剪处理等操作之后，在把图片传递给父组件，父组件在拿到处理之后的图片，在进行自己之后的逻辑操作。简单来说就是------父组件上传图片-->子组件拿到图片进行处理-->处理的图片给父组件-->自己的逻辑操作

一. 引入wx-cropper

npm i @dw/wx-cropper

安装wx-cropper之后构建npm

二. 在需要使用的页面上引入

  1. {
  2.   "usingComponents": {
  3.     "my-cropper": "@dw/wx-cropper"
  4.   }
  5. }

 三. 示例

        1. wxml代码

  1. <button catchtap="handleuploadimg">上传图片</button>
  2.  
  3. <block wx:for="{{ fileList }}" wx:key="*this">
  4.   <image src="{{ item }}" mode=""/>
  5. </block>
  6.  
  7. <view class="layers" wx:if="{{cjtp}}">
  8.     <my-cropper bind:close="hideCut" cutRatio="{{cutRatio}}" imageSrc="{{imageSrc}}" />
  9. </view>

        2. wxss样式 

                这个是需要把裁剪功能组件覆盖到当前页面上

  1. /* pages/upload/upload.wxss */
  2. .layers{
  3.   width: 100vw;
  4.   height: 100vh;
  5.   background-color: #00000080;
  6.   position: absolute;
  7.   top: 0;
  8.   left: 0;
  9.   right: 0;
  10.   bottom: 0;
  11.   z-index: 10000000;
  12. }

 

        3. js代码

                当选择完图片时，显示裁剪功能，以及把上传的图片传给组件。当用户裁剪完图片之后，会通过组件getImageInfo方法处理图片之后，在通过子组件向父组件传值的方法，把裁剪处理完之后图片传递给父组件 _this.triggerEvent('close', img);

  1. // pages/upload/upload.js
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.     fileList: [], //上传图片集合
  9.     base64List: [], //base64集合
  10.     delFileArr:[],  //删除的附件集合
  11.     imgWidthslot: 0,
  12.     imgHeightslot: 0,
  13.     //裁剪信息
  14.     cjtp: false,     //裁剪信息 这个控制裁剪功能的现实和隐藏
  15.     cutRatio:0.75,  //裁剪比例
  16.     imageSrc:'',    //个人图片
  17.   },
  18.  
  19.   /**
  20.    * 生命周期函数--监听页面加载
  21.    */
  22.   onLoad(options) {
  23.  
  24.   },
  25.   // 上传图片
  26.   handleuploadimg() {
  27.     wx.chooseMedia({
  28.       count: 1,
  29.       mediaType: ['image'],
  30.       sourceType: ['camera', 'album'],
  31.       success: (res) => {
  32.         // this.setData({
  33.         //   fileList: res.tempFiles
  34.         // })
  35.         var tempFilePaths = res.tempFiles;
  36.         for (let i in tempFilePaths) {
  37.           let imagePath = tempFilePaths[i].tempFilePath; //原图的路径
  38.           let size = tempFilePaths[i].size;      //原图大小
  39.             //this.setData({
  40.              // imageSrc:imagePath,
  41.               //cjtp:true,
  42.             //})
  43.             //判断是否需要压缩
  44.            if(size > this.data.size){
  45.               this.setCanvasLoad(imagePath);
  46.            }else{
  47.             this.setData({
  48.               imageSrc:imagePath,
  49.               cjtp:true,
  50.             })
  51.           }
  52.           
  53.         }
  54.       }
  55.     })
  56.   },
  57. // 压缩图片
  58. setCanvasLoad(obj){
  59.     let imagePath = obj; //原图的路径
  60.       const ctx = wx.createCanvasContext('myfirstCanvasSlot',this);
  61.       let that = this;
  62.       wx.showLoading({
  63.         title: '图片压缩中...',
  64.         mask: true
  65.       }) //不需要你可以删掉
  66.       // console.log(imagePath,'原图的路径')
  67.       wx.getImageInfo({
  68.         src:imagePath,
  69.         success:(res)=>{
  70.           // console.log(res,'获取图片的属性')
  71.           // 图片原始尺寸
  72.           let originWidth = res.width;
  73.           let originHeight = res.height;
  74.           // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
  75.           let maxWidth = 1920,
  76.               maxHeight = 800;
  77.           // 目标尺寸
  78.           let targetWidth = originWidth,
  79.               targetHeight = originHeight;
  80.           // 图片尺寸超过200x150的限制
  81.           if(originWidth > maxWidth || originHeight > maxHeight) {
  82.               if(originWidth / originHeight > maxWidth / maxHeight) {
  83.                   // 更宽，按照宽度限定尺寸
  84.                   targetWidth = maxWidth;
  85.                   targetHeight = Math.round(maxWidth * (originHeight / originWidth));
  86.               } else {
  87.                   targetHeight = maxHeight;
  88.                   targetWidth = Math.round(maxHeight * (originWidth / originHeight));
  89.               }
  90.           }
  91.           // canvas对图片进行缩放
  92.           this.setData({
  93.               imgWidthslot: targetWidth,
  94.               imgHeightslot: targetHeight
  95.           })
  96.  
  97.           // 压缩图片（绘制图像到画布）
  98.           ctx.drawImage(imagePath,0,0,targetWidth,targetHeight);
  99.           console.log(this.data.imgWidth)
  100.  
  101.           ctx.draw(false, ()=>{
  102.             setTimeout(()=>{
  103.               // canvas导出为图片路径
  104.               wx.canvasToTempFilePath({
  105.                 canvasId: 'myfirstCanvasSlot',
  106.                 fileType: 'png', //支持jpg或png
  107.                 quality: 0.92, //图片质量
  108.                 success:(res1)=> {
  109.                     wx.hideLoading();
  110.                     // console.log(targetWidth,targetHeight,'targetHeight')
  111.                     let compressedPath = res1.tempFilePath;
  112.                     //将图片转化为base64
  113.                     this.setData({
  114.                       imageSrc:compressedPath,
  115.                       cjtp:true,
  116.                     })
  117.                 },
  118.                 fail:(res1)=>{
  119.                   // console.log('图片压缩失败',res)
  120.                   wx.hideLoading()
  121.                   wx.showModal({
  122.                     content: '图片压缩失败',
  123.                     showCancel:false
  124.                   })
  125.                 }
  126.               },that)
  127.             },200)
  128.              
  129.           })
  130.         },
  131.         fail: (res) => {
  132.           wx.hideLoading()
  133.           // console.log(res,'获取图片的属性失败');
  134.           wx.showModal({
  135.             content: '图片压缩失败',
  136.             showCancel:false
  137.           })
  138.         }
  139.       })
  140.   },
  141.   
  142.   //关闭裁剪
  143.   hideCut(e){
  144.     let obj = e.detail;
  145.     let fileList = this.data.fileList;
  146.     let base64List = this.data.base64List;
  147.     //是否已经截取
  148.     if(obj){
  149.       console.log('------obj', obj)
  150.       wx.showLoading({
  151.         title: '裁剪中',
  152.       })
  153.       fileList = [ obj.path ]
  154.       wx.getFileSystemManager().readFile({
  155.         filePath: obj.path,
  156.         encoding: "base64",
  157.         success: (res) => {
  158.           
  159.           wx.hideLoading(); //不需要你可以删掉
  160.           base64List = [res.data]
  161.           this.setData({
  162.             base64List: base64List,
  163.             fileList: fileList,
  164.           })
  165.  
  166.           console.log('-----res-----', this.data.base64List, this.data.fileList)
  167.         },
  168.         fail: (res) => {
  169.  
  170.           wx.hideLoading(); //不需要你可以删掉
  171.           wx.showModal({
  172.             content: '图片裁剪失败',
  173.             showCancel:false
  174.           })
  175.         }
  176.       })
  177.     }
  178.     this.setData({
  179.       cjtp:false,
  180.     })
  181.   },
  182.   /**
  183.    * 生命周期函数--监听页面初次渲染完成
  184.    */
  185.   onReady() {
  186.  
  187.   },
  188.  
  189.   /**
  190.    * 生命周期函数--监听页面显示
  191.    */
  192.   onShow() {
  193.  
  194.   },
  195.  
  196.   /**
  197.    * 生命周期函数--监听页面隐藏
  198.    */
  199.   onHide() {
  200.  
  201.   },
  202.  
  203.   /**
  204.    * 生命周期函数--监听页面卸载
  205.    */
  206.   onUnload() {
  207.  
  208.   },
  209.  
  210.   /**
  211.    * 页面相关事件处理函数--监听用户下拉动作
  212.    */
  213.   onPullDownRefresh() {
  214.  
  215.   },
  216.  
  217.   /**
  218.    * 页面上拉触底事件的处理函数
  219.    */
  220.   onReachBottom() {
  221.  
  222.   },
  223.  
  224.   /**
  225.    * 用户点击右上角分享
  226.    */
  227.   onShareAppMessage() {
  228.  
  229.   }
  230. })

父组件会通过hideCut方法 来拿到子组件传递过来的图片，然后在回显到页面上。 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/565214
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号