search

博客列表 >微信小程序压缩图片并上传

微信小程序压缩图片并上传

搁浅
搁浅原创
2022年10月12日 14:23:49973浏览

wxml

  1. <canvas canvas-id="myCanvas" style="position:absolute;border: 1px solid red; width:{{imageW}}rpx;height:{{imageH}}rpx;top:-9999px;left:-9999px;"></canvas>
  2. <view style="text-align: center;"><image style="width: 192rpx;height: 192rpx;border-radius: 500rpx !important;overflow: hidden;    margin-top: 30rpx;margin-bottom: 30rpx;" src="{{returnImage}}"></image></view>
  3. <view style="display: flex;">
  4.     <button type="primary" bindtap="getImageInfo">头像预览</button>
  5.     <button type="primary" bindtap="upload" loading="{{isdisabled}}" disabled="{{isdisabled}}">上传头像</button>
  6. </view>

js

  1. const app = getApp();
  2. // 手机的宽度
  3. var windowWRPX = 750
  4. var pixelRatio = wx.getSystemInfoSync().pixelRatio
  5. Page({
  7.   /**
  8.    * 页面的初始数据
  9.    */
  10.   data: {
  11.     topLabel: '头像上传', //顶部栏
  12.     triggered: false, //模块是否刷新中
  13.     isdisabled: false, //是否提交
  14.     showmodel: false, //是否编辑模式
  15.     imageSrc: '',
  16.     returnImage: '',
  17.     isShowImg: false,
  18.     // 初始化的宽高
  19.     cropperInitW: windowWRPX,
  20.     cropperInitH: windowWRPX,
  21.     // 动态的宽高
  22.     cropperW: windowWRPX,
  23.     cropperH: windowWRPX,
  24.     // 动态的left top值
  25.     cropperL: 0,
  26.     cropperT: 0,
  28.     // 图片缩放值
  29.     scaleP: 0,
  30.     imageW: 0,
  31.     imageH: 0,
  33.     // 裁剪框 宽高
  34.     cutW: 0,
  35.     cutH: 0,
  36.     cutL: 0,
  37.     cutT: 0,
  38.   },
  39.   upload(e) { //头像上传
  40.     wx.showLoading({
  41.       title: '头像上传中...',
  42.     })
  43.     this.setData({isdisabled:true})
  44.     const userinfo = wx.getStorageSync('userinfo')
  45.     let encryptor = new Encrypt.JSEncrypt()
  46.     encryptor.setPublicKey(publicKey);
  47.     let requestkey = encryptor.encrypt(userinfo.YHBH + ',' + userinfo.OPENID + ',' + userinfo.BH + ',' + new Date().getTime()) // 加密
  48.     // 将图片写入画布
  49.     const ctx = wx.createCanvasContext('myCanvas')
  50.     ctx.drawImage(this.data.imageSrc)
  51.     ctx.draw(true, () => {
  52.       // 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题
  53.       let canvasW = (this.data.cutW / this.data.cropperW) * (this.data.imageW / pixelRatio)
  54.       let canvasH = (this.data.cutH / this.data.cropperH) * (this.data.imageH / pixelRatio)
  55.       let canvasL = (this.data.cutL / this.data.cropperW) * (this.data.imageW / pixelRatio)
  56.       let canvasT = (this.data.cutT / this.data.cropperH) * (this.data.imageH / pixelRatio)
  57.       setTimeout(() => {
  58.         wx.canvasToTempFilePath({
  59.           x: canvasL,
  60.           y: canvasT,
  61.           width: canvasW,
  62.           height: canvasH,
  63.           destWidth: canvasW * 0.35,//设置压缩百分比，如果写100就是分辨率
  64.           destHeight: canvasH * 0.35,//设置压缩百分比，如果写100就是分辨率
  65.           canvasId: 'myCanvas',
  66.           fileType: 'jpg',
  67.           success: res => {
  68.             wx.uploadFile({
  69.               url: App.uploads + '/weixin/upload/img/upload/cover',
  70.               filePath: res.tempFilePath,
  71.               name: 'file',
  72.               header: {
  73.                 token: requestkey
  74.               },
  75.               formData: {
  76.                 BH: wx.getStorageSync('userinfo').BH
  77.               },
  78.               success:res=>{
  79.                 res.data = JSON.parse(res.data)
  80.                 let pages = getCurrentPages();
  81.                 let previousPage = pages[pages.length - 2]; //上一个页面
  82.                 previousPage.setData({
  83.                   avatarUrl: res.data.data.filePath
  84.                 })
  85.                 const userinfo = wx.getStorageSync('userinfo')
  86.                 userinfo.TX = res.data.data.filePath
  87.                 wx.setStorageSync('userinfo', userinfo)
  88.                 wx.hideLoading()
  89.                 wx.showToast({
  90.                   title: '上传成功',
  91.                   icon: "succes",
  92.                   duration: 1500
  93.                 })
  94.                 this.setData({isdisabled:false})
  95.               },
  96.               fail:res=>{
  97.                 this.setData({isdisabled:false})
  98.                 wx.hideLoading()
  99.                 wx.showToast({
  100.                   title: '上传失败',
  101.                   icon: "error",
  102.                   duration: 1500
  103.                 })
  104.               }
  105.             })
  106.           }
  107.         })
  108.       }, 500);
  109.     })
  111.   },
  112.   // 获取图片
  113.   getImageInfo() {
  114.     wx.showLoading({
  115.       title: '图片生成中...',
  116.     })
  117.     wx.downloadFile({
  118.       url: this.data.imageSrc, //仅为示例，并非真实的资源
  119.       success: res=>{
  120.     // 将图片写入画布
  121.       const ctx = wx.createCanvasContext('myCanvas')
  122.       ctx.drawImage(res.tempFilePath)
  123.       ctx.draw(true, () => {
  124.         // 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题
  125.         let canvasW = (this.data.cutW / this.data.cropperW) * (this.data.imageW / pixelRatio)
  126.         let canvasH = (this.data.cutH / this.data.cropperH) * (this.data.imageH / pixelRatio)
  127.         let canvasL = (this.data.cutL / this.data.cropperW) * (this.data.imageW / pixelRatio)
  128.         let canvasT = (this.data.cutT / this.data.cropperH) * (this.data.imageH / pixelRatio)
  129.         setTimeout(() => {
  130.           wx.canvasToTempFilePath({
  131.             x: canvasL,
  132.             y: canvasT,
  133.             width: canvasW,
  134.             height: canvasH,
  135.             destWidth: canvasW * 0.35,//设置压缩百分比，如果写100就是分辨率
  136.             destHeight: canvasH * 0.35,//设置压缩百分比，如果写100就是分辨率
  137.             canvasId: 'myCanvas',
  138.             fileType: 'jpg',
  139.             success: res=>{
  140.               wx.hideLoading()
  141.               // wx.getImageInfo({
  142.               //   src: res.tempFilePath,
  143.               //   success (res) {
  144.               //     console.log(res.width)//图片宽
  145.               //     console.log(res.height)//图片高
  146.               //   }
  147.               // })
  148.               // 成功获得地址的地方
  149.               wx.previewImage({
  150.                 current: '', // 当前显示图片的http链接
  151.                 urls: [res.tempFilePath] // 需要预览的图片http链接列表
  152.               })
  153.               this.setData({
  154.                 returnImage:res.tempFilePath
  155.               })
  156.             }
  157.           })
  158.         }, 200);
  159.       })
  160.       }
  161.     })
  162.   },
  163.   /**
  164.    * 生命周期函数--监听页面加载
  165.    */
  166.   onLoad: function (options) {
  167.     this.setData({
  168.       imageSrc: 'https://wx3.sinaimg.cn/orj360/6b03f0e6gy1h6c1mivf4lj20u01400wu.jpg'
  169.     })
  170.   },
  172.   /**
  173.    * 生命周期函数--监听页面初次渲染完成
  174.    */
  175.     onReady: function () {
  176.     wx.showLoading({
  177.       title: '图片加载中...',
  178.     })
  179.     wx.getImageInfo({
  180.       src: this.data.imageSrc,
  181.       success: res=>{
  182.         var innerAspectRadio = res.width / res.height;
  183.         // 根据图片的宽高显示不同的效果   保证图片可以正常显示
  184.         if (innerAspectRadio >= 1) {
  185.           this.setData({
  186.             cropperW: windowWRPX,
  187.             cropperH: windowWRPX / innerAspectRadio,
  188.             // 初始化left right
  189.             cropperL: Math.ceil((windowWRPX - windowWRPX) / 2),
  190.             cropperT: Math.ceil((windowWRPX - windowWRPX / innerAspectRadio) / 2),
  191.             // 裁剪框  宽高  
  192.             cutW: windowWRPX,
  193.             cutH: windowWRPX / innerAspectRadio,
  194.             cutL: 0,
  195.             cutT: 0,
  196.             // 图片缩放值
  197.             scaleP: res.width * pixelRatio / windowWRPX,
  198.             // 图片原始宽度 rpx
  199.             imageW: res.width * pixelRatio,
  200.             imageH: res.height * pixelRatio
  201.           })
  202.         } else {
  203.           this.setData({
  204.             cropperW: windowWRPX * innerAspectRadio,
  205.             cropperH: windowWRPX,
  206.             // 初始化left right
  207.             cropperL: Math.ceil((windowWRPX - windowWRPX * innerAspectRadio) / 2),
  208.             cropperT: Math.ceil((windowWRPX - windowWRPX) / 2),
  209.             // 裁剪框的宽高
  210.             cutW: windowWRPX * innerAspectRadio,
  211.             cutH: windowWRPX,
  212.             cutL: 0,
  213.             cutT: 0,
  214.             // 图片缩放值
  215.             scaleP: res.width * pixelRatio / windowWRPX,
  216.             // 图片原始宽度 rpx
  217.             imageW: res.width * pixelRatio,
  218.             imageH: res.height * pixelRatio
  219.           })
  220.         }
  221.         this.setData({
  222.           isShowImg: true
  223.         })
  224.         wx.hideLoading()
  225.       }
  226.     })
  227.   },
  228.   /**
  229.    * 生命周期函数--监听页面显示
  230.    */
  231.   onShow: function () {
  233.   },
  235.   /**
  236.    * 生命周期函数--监听页面隐藏
  237.    */
  238.   onHide: function () {
  240.   },
  242.   /**
  243.    * 生命周期函数--监听页面卸载
  244.    */
  245.   onUnload: function () {
  247.   },
  249.   /**
  250.    * 页面相关事件处理函数--监听用户下拉动作
  251.    */
  252.   onPullDownRefresh: function () {
  254.   },
  256.   /**
  257.    * 页面上拉触底事件的处理函数
  258.    */
  259.   onReachBottom: function () {
  261.   },
  263.   /**
  264.    * 用户点击右上角分享
  265.    */
  266.   onShareAppMessage: function () {
  268.   }
  269. })

实际应用场景

html

  1. <canvas canvas-id="myCanvas" style="position:absolute;border: 1px solid red; width:{{imageW}}rpx;height:{{imageH}}rpx;top:-9999px;left:-9999px;"></canvas>
  2. <button class="round cu-avatar" plain="true" open-type="chooseAvatar" bind:chooseavatar="getimginfo" style="border: 0;width: 158rpx;height: 158rpx;">
  3.     <image class="round" src="https://wx3.sinaimg.cn/orj360/6b03f0e6gy1h6c1mivf4lj20u01400wu.jpg" style="width: 158rpx;height: 158rpx;"></image>
  4. </button>

js

  1. const app = getApp();
  2. // 手机的宽度
  3. var windowWRPX = 750
  4. var pixelRatio = wx.getSystemInfoSync().pixelRatio
  5. Page({
  7.   /**
  8.    * 页面的初始数据
  9.    */
  10.   data: {
  11.     topLabel: '头像上传', //顶部栏
  12.     // 初始化的宽高
  13.     cropperInitW: windowWRPX,
  14.     cropperInitH: windowWRPX,
  15.     // 动态的宽高
  16.     cropperW: windowWRPX,
  17.     cropperH: windowWRPX,
  18.     // 动态的left top值
  19.     cropperL: 0,
  20.     cropperT: 0,
  22.     // 图片缩放值
  23.     scaleP: 0,
  24.     imageW: 0,
  25.     imageH: 0,
  27.     // 裁剪框 宽高
  28.     cutW: 0,
  29.     cutH: 0,
  30.     cutL: 0,
  31.     cutT: 0,
  32.   },
  33.     getimginfo(e) { //获取图片信息
  34.     wx.getImageInfo({
  35.       src: e.detail.avatarUrl,
  36.       success: res => {
  37.         var innerAspectRadio = res.width / res.height;
  38.         // 根据图片的宽高显示不同的效果   保证图片可以正常显示
  39.         if (innerAspectRadio >= 1) {
  40.           this.setData({
  41.             cropperW: windowWRPX,
  42.             cropperH: windowWRPX / innerAspectRadio,
  43.             // 初始化left right
  44.             cropperL: Math.ceil((windowWRPX - windowWRPX) / 2),
  45.             cropperT: Math.ceil((windowWRPX - windowWRPX / innerAspectRadio) / 2),
  46.             // 裁剪框  宽高  
  47.             cutW: windowWRPX,
  48.             cutH: windowWRPX / innerAspectRadio,
  49.             cutL: 0,
  50.             cutT: 0,
  51.             // 图片缩放值
  52.             scaleP: res.width * pixelRatio / windowWRPX,
  53.             // 图片原始宽度 rpx
  54.             imageW: res.width * pixelRatio,
  55.             imageH: res.height * pixelRatio
  56.           })
  57.         } else {
  58.           this.setData({
  59.             cropperW: windowWRPX * innerAspectRadio,
  60.             cropperH: windowWRPX,
  61.             // 初始化left right
  62.             cropperL: Math.ceil((windowWRPX - windowWRPX * innerAspectRadio) / 2),
  63.             cropperT: Math.ceil((windowWRPX - windowWRPX) / 2),
  64.             // 裁剪框的宽高
  65.             cutW: windowWRPX * innerAspectRadio,
  66.             cutH: windowWRPX,
  67.             cutL: 0,
  68.             cutT: 0,
  69.             // 图片缩放值
  70.             scaleP: res.width * pixelRatio / windowWRPX,
  71.             // 图片原始宽度 rpx
  72.             imageW: res.width * pixelRatio,
  73.             imageH: res.height * pixelRatio
  74.           })
  75.         }
  76.         this.upfile(e.detail.avatarUrl)
  77.       }
  78.     })
  79.   },
  80.   upfile(url) { //上传图片
  81.     wx.getFileInfo({
  82.       filePath: url,
  83.       success: res => {
  84.         if (res.size > 10000) { //大于10KB就压缩
  85.           const ctx = wx.createCanvasContext('myCanvas')
  86.           ctx.drawImage(url)
  87.           ctx.draw(true, () => {
  88.             // 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题
  89.             let canvasW = (this.data.cutW / this.data.cropperW) * (this.data.imageW / pixelRatio)
  90.             let canvasH = (this.data.cutH / this.data.cropperH) * (this.data.imageH / pixelRatio)
  91.             let canvasL = (this.data.cutL / this.data.cropperW) * (this.data.imageW / pixelRatio)
  92.             let canvasT = (this.data.cutT / this.data.cropperH) * (this.data.imageH / pixelRatio)
  93.             setTimeout(() => {
  94.               wx.canvasToTempFilePath({
  95.                 x: canvasL,
  96.                 y: canvasT,
  97.                 width: canvasW,
  98.                 height: canvasH,
  99.                 destWidth: canvasW * 0.35, //设置压缩百分比，如果写100就是分辨率
  100.                 destHeight: canvasH * 0.35, //设置压缩百分比，如果写100就是分辨率
  101.                 canvasId: 'myCanvas',
  102.                 fileType: 'jpg',
  103.                 success: res => {
  104.                   wx.uploadFile({
  105.                     url: App.uploads + '/file/api/upload',
  106.                     filePath: res.tempFilePath,
  107.                     name: 'file',
  108.                     header: {
  109.                       authToken: wx.getStorageSync('token'),
  110.                     },
  111.                     success: res => {
  112.                       res.data = JSON.parse(res.data)
  113.                       this.data.tx = res.data.data.filePath
  114.                       this.batchmodify()
  115.                     },
  116.                     fail: res => {
  117.                       wx.hideLoading()
  118.                       wx.showToast({
  119.                         title: '上传失败',
  120.                         icon: "error",
  121.                         duration: 1500
  122.                       })
  123.                     }
  124.                   })
  125.                 }
  126.               })
  127.             }, 500);
  128.           })
  129.         } else {
  130.           wx.uploadFile({
  131.             url: App.uploads + '/file/api/upload',
  132.             filePath: url,
  133.             name: 'file',
  134.             header: {
  135.               authToken: wx.getStorageSync('token'),
  136.             },
  137.             success: res => {
  138.               res.data = JSON.parse(res.data)
  139.               this.data.tx = res.data.data.filePath
  140.               this.batchmodify()
  141.             },
  142.             fail: res => {
  143.               wx.hideLoading()
  144.               wx.showToast({
  145.                 title: '上传失败',
  146.                 icon: "error",
  147.                 duration: 1500
  148.               })
  149.             }
  150.           })
  151.         }
  152.       }
  153.     })
  154.   },
  155.   /**
  156.    * 生命周期函数--监听页面加载
  157.    */
  158.   onLoad: function (options) {
  160.   },
  162.   /**
  163.    * 生命周期函数--监听页面初次渲染完成
  164.    */
  165.   onReady: function () {
  167.   },
  168.   /**
  169.    * 生命周期函数--监听页面显示
  170.    */
  171.   onShow: function () {
  173.   },
  175.   /**
  176.    * 生命周期函数--监听页面隐藏
  177.    */
  178.   onHide: function () {
  180.   },
  182.   /**
  183.    * 生命周期函数--监听页面卸载
  184.    */
  185.   onUnload: function () {
  187.   },
  189.   /**
  190.    * 页面相关事件处理函数--监听用户下拉动作
  191.    */
  192.   onPullDownRefresh: function () {
  194.   },
  196.   /**
  197.    * 页面上拉触底事件的处理函数
  198.    */
  199.   onReachBottom: function () {
  201.   },
  203.   /**
  204.    * 用户点击右上角分享
  205.    */
  206.   onShareAppMessage: function () {
  208.   }
  209. })

css

  1. .round {
  2.     border-radius: 5000rpx !important;
  3.     overflow: hidden;
  4. }
  5. .cu-avatar {
  6.     font-variant: small-caps;
  7.     margin: 0;
  8.     padding: 0;
  9.     display: inline-flex;
  10.     text-align: center;
  11.     justify-content: center;
  12.     align-items: center;
  13.     background-color: #ccc;
  14.     color: var(--white);
  15.     white-space: nowrap;
  16.     position: relative;
  17.     width: 64rpx;
  18.     height: 64rpx;
  19.     background-size: cover;
  20.     background-position: center;
  21.     vertical-align: middle;
  22.     font-size: 1.5em;
  23. }
上一条：使用Python获取国际版淘宝AliExpress的商品信息下一条：JS时间相同的分组显示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多