search

博客列表 >微信小程序自定义裁剪图片并压缩

微信小程序自定义裁剪图片并压缩

搁浅
搁浅原创
2022年10月12日 10:49:451118浏览

wxml

  1.         <view class="wx-content-info" wx:if="{{imageSrc}}">
  2.           <view wx:if="{{isShowImg}}" class="wx-corpper" style="width:{{cropperInitW}}rpx;height:{{cropperInitH}}rpx;background:#000">
  3.             <view class="wx-corpper-content" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx;left:{{cropperL}}rpx;top:{{cropperT}}rpx">
  4.               <image src="{{imageSrc}}" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx"></image>
  5.               <view class="wx-corpper-crop-box" bindtouchstart="contentStartMove" bindtouchmove="contentMoveing" style="width:{{cutW}}rpx;height:{{cutH}}rpx;left:{{cutL}}rpx;top:{{cutT}}rpx">
  6.                 <view class="wx-cropper-view-box">
  7.                   <view class="wx-cropper-dashed-h"></view>
  8.                   <view class="wx-cropper-dashed-v"></view>
  9.                   <view class="wx-cropper-line-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
  10.                   <view class="wx-cropper-line-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
  11.                   <view class="wx-cropper-line-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
  12.                   <view class="wx-cropper-line-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
  13.                   <view class="wx-cropper-point point-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
  14.                   <view class="wx-cropper-point point-tr" data-drag="topTight"></view>
  15.                   <view class="wx-cropper-point point-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
  16.                   <view class="wx-cropper-point point-rb" data-drag="rightBottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
  17.                   <view class="wx-cropper-point point-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
  18.                   <view class="wx-cropper-point point-bl" data-drag="bottomLeft"></view>
  19.                   <view class="wx-cropper-point point-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
  20.                   <view class="wx-cropper-point point-lt" data-drag="leftTop"></view>
  21.                 </view>
  22.               </view>
  23.             </view>
  24.           </view>
  25.           <canvas canvas-id="myCanvas" style="position:absolute;border: 1px solid red; width:{{imageW}}rpx;height:{{imageH}}rpx;top:-9999px;left:-9999px;"></canvas>
  26.           <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>
  27.           <view style="display: flex;">
  28.             <button type="primary" bindtap="getImageInfo">头像预览</button>
  29.             <button type="primary" bindtap="upload" loading="{{isdisabled}}" disabled="{{isdisabled}}">上传头像</button>
  30.           </view>
  31.         </view>

js

  1. const app = getApp();
  2. // 手机的宽度
  3. var windowWRPX = 750
  4. // 拖动时候的 pageX
  5. var pageX = 0
  6. // 拖动时候的 pageY
  7. var pageY = 0
  8. var pixelRatio = wx.getSystemInfoSync().pixelRatio
  9. // 调整大小时候的 pageX
  10. var sizeConfPageX = 0
  11. // 调整大小时候的 pageY
  12. var sizeConfPageY = 0
  13. var initDragCutW = 0
  14. var initDragCutL = 0
  15. var initDragCutH = 0
  16. var initDragCutT = 0
  17. // 移动时 手势位移与 实际元素位移的比
  18. var dragScaleP = 2
  19. Page({
  21.   /**
  22.    * 页面的初始数据
  23.    */
  24.   data: {
  25.     topLabel: '头像上传', //顶部栏input
  26.     isIphoneX: app.globalStore.globalData.isIphoneX, //是否Iphonx
  27.     windowHeight: app.globalStore.globalData.windowHeight,
  28.     windowWidth: app.globalStore.globalData.windowWidth,
  29.     triggered: false, //模块是否刷新中
  30.     isdisabled: false, //是否提交
  31.     showmodel: false, //是否编辑模式
  32.     imageSrc: '',
  33.     returnImage: '',
  34.     isShowImg: false,
  35.     // 初始化的宽高
  36.     cropperInitW: windowWRPX,
  37.     cropperInitH: windowWRPX,
  38.     // 动态的宽高
  39.     cropperW: windowWRPX,
  40.     cropperH: windowWRPX,
  41.     // 动态的left top值
  42.     cropperL: 0,
  43.     cropperT: 0,
  45.     // 图片缩放值
  46.     scaleP: 0,
  47.     imageW: 0,
  48.     imageH: 0,
  50.     // 裁剪框 宽高
  51.     cutW: 0,
  52.     cutH: 0,
  53.     cutL: 0,
  54.     cutT: 0,
  55.   },
  56.   upload(e) { //头像上传
  57.     wx.showLoading({
  58.       title: '头像上传中...',
  59.     })
  60.     this.setData({isdisabled:true})
  61.     const userinfo = wx.getStorageSync('userinfo')
  62.     let encryptor = new Encrypt.JSEncrypt()
  63.     encryptor.setPublicKey(publicKey);
  64.     let requestkey = encryptor.encrypt(userinfo.YHBH + ',' + userinfo.OPENID + ',' + userinfo.BH + ',' + new Date().getTime()) // 加密
  65.     // 将图片写入画布
  66.     const ctx = wx.createCanvasContext('myCanvas')
  67.     ctx.drawImage(this.data.imageSrc)
  68.     ctx.draw(true, () => {
  69.       // 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题
  70.       let canvasW = (this.data.cutW / this.data.cropperW) * (this.data.imageW / pixelRatio)
  71.       let canvasH = (this.data.cutH / this.data.cropperH) * (this.data.imageH / pixelRatio)
  72.       let canvasL = (this.data.cutL / this.data.cropperW) * (this.data.imageW / pixelRatio)
  73.       let canvasT = (this.data.cutT / this.data.cropperH) * (this.data.imageH / pixelRatio)
  74.       setTimeout(() => {
  75.         wx.canvasToTempFilePath({
  76.           x: canvasL,
  77.           y: canvasT,
  78.           width: canvasW,
  79.           height: canvasH,
  80.           destWidth: canvasW * 0.35,//设置压缩百分比，如果写100就是分辨率
  81.           destHeight: canvasH * 0.35,//设置压缩百分比，如果写100就是分辨率
  82.           canvasId: 'myCanvas',
  83.           fileType: 'jpg',
  84.           success: res => {
  85.             wx.uploadFile({
  86.               url: App.uploads + '/weixin/upload/img/upload/cover',
  87.               filePath: res.tempFilePath,
  88.               name: 'file',
  89.               header: {
  90.                 token: requestkey
  91.               },
  92.               formData: {
  93.                 BH: wx.getStorageSync('userinfo').BH
  94.               },
  95.               success:res=>{
  96.                 res.data = JSON.parse(res.data)
  97.                 let pages = getCurrentPages();
  98.                 let previousPage = pages[pages.length - 2]; //上一个页面
  99.                 previousPage.setData({
  100.                   avatarUrl: res.data.data.filePath
  101.                 })
  102.                 const userinfo = wx.getStorageSync('userinfo')
  103.                 userinfo.TX = res.data.data.filePath
  104.                 wx.setStorageSync('userinfo', userinfo)
  105.                 wx.hideLoading()
  106.                 wx.showToast({
  107.                   title: '上传成功',
  108.                   icon: "succes",
  109.                   duration: 1500
  110.                 })
  111.                 this.setData({isdisabled:false})
  112.               },
  113.               fail:res=>{
  114.                 this.setData({isdisabled:false})
  115.                 wx.hideLoading()
  116.                 wx.showToast({
  117.                   title: '上传失败',
  118.                   icon: "error",
  119.                   duration: 1500
  120.                 })
  121.               }
  122.             })
  123.           }
  124.         })
  125.       }, 500);
  126.     })
  128.   },
  130.   // 拖动时候触发的touchStart事件
  131.   contentStartMove(e) {
  132.     pageX = e.touches[0].pageX
  133.     pageY = e.touches[0].pageY
  134.   },
  136.   // 拖动时候触发的touchMove事件
  137.   contentMoveing(e) {
  138.     // this.data.cutL + (e.touches[0].pageX - pageX)
  139.     // console.log(e.touches[0].pageX)
  140.     // console.log(e.touches[0].pageX - pageX)
  141.     var dragLengthX = (pageX - e.touches[0].pageX) * dragScaleP
  142.     var dragLengthY = (pageY - e.touches[0].pageY) * dragScaleP
  143.     var minX = Math.max(this.data.cutL - (dragLengthX), 0)
  144.     var minY = Math.max(this.data.cutT - (dragLengthY), 0)
  145.     var maxX = this.data.cropperW - this.data.cutW
  146.     var maxY = this.data.cropperH - this.data.cutH
  147.     this.setData({
  148.       cutL: Math.min(maxX, minX),
  149.       cutT: Math.min(maxY, minY),
  150.     })
  151.     // console.log(`${maxX} ----- ${minX}`)
  152.     pageX = e.touches[0].pageX
  153.     pageY = e.touches[0].pageY
  154.   },
  156.   // 获取图片
  157.   getImageInfo() {
  158.     wx.showLoading({
  159.       title: '图片生成中...',
  160.     })
  161.     wx.downloadFile({
  162.       url: this.data.imageSrc, //仅为示例，并非真实的资源
  163.       success: res=>{
  164.     // 将图片写入画布
  165.       const ctx = wx.createCanvasContext('myCanvas')
  166.       ctx.drawImage(res.tempFilePath)
  167.       ctx.draw(true, () => {
  168.         // 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题
  169.         let canvasW = (this.data.cutW / this.data.cropperW) * (this.data.imageW / pixelRatio)
  170.         let canvasH = (this.data.cutH / this.data.cropperH) * (this.data.imageH / pixelRatio)
  171.         let canvasL = (this.data.cutL / this.data.cropperW) * (this.data.imageW / pixelRatio)
  172.         let canvasT = (this.data.cutT / this.data.cropperH) * (this.data.imageH / pixelRatio)
  173.         setTimeout(() => {
  174.           wx.canvasToTempFilePath({
  175.             x: canvasL,
  176.             y: canvasT,
  177.             width: canvasW,
  178.             height: canvasH,
  179.             destWidth: canvasW * 0.35,//设置压缩百分比，如果写100就是分辨率
  180.             destHeight: canvasH * 0.35,//设置压缩百分比，如果写100就是分辨率
  181.             canvasId: 'myCanvas',
  182.             fileType: 'jpg',
  183.             success: res=>{
  184.               wx.hideLoading()
  185.               // wx.getImageInfo({
  186.               //   src: res.tempFilePath,
  187.               //   success (res) {
  188.               //     console.log(res.width)//图片宽
  189.               //     console.log(res.height)//图片高
  190.               //   }
  191.               // })
  192.               // 成功获得地址的地方
  193.               wx.previewImage({
  194.                 current: '', // 当前显示图片的http链接
  195.                 urls: [res.tempFilePath] // 需要预览的图片http链接列表
  196.               })
  197.               this.setData({
  198.                 returnImage:res.tempFilePath
  199.               })
  200.             }
  201.           })
  202.         }, 200);
  203.       })
  204.       }
  205.     })
  206.   },
  208.   // 设置大小的时候触发的touchStart事件
  209.   dragStart(e) {
  210.     sizeConfPageX = e.touches[0].pageX
  211.     sizeConfPageY = e.touches[0].pageY
  212.     initDragCutW = this.data.cutW
  213.     initDragCutL = this.data.cutL
  214.     initDragCutT = this.data.cutT
  215.     initDragCutH = this.data.cutH
  216.   },
  218.   // 设置大小的时候触发的touchMove事件
  219.   dragMove(e) {
  220.     var dragType = e.target.dataset.drag
  221.     switch (dragType) {
  222.       case 'right':
  223.         var dragLength = (sizeConfPageX - e.touches[0].pageX) * dragScaleP
  224.         if (initDragCutW >= dragLength) {
  225.           // 如果 移动小于0 说明是在往下啦  放大裁剪的高度  这样一来 图片的高度  最大 等于 图片的top值加 当前图片的高度  否则就说明超出界限
  226.           if (dragLength < 0 && this.data.cropperW > initDragCutL + this.data.cutW) {
  227.             this.setData({
  228.               cutW: initDragCutW - dragLength
  229.             })
  230.           }
  231.           // 如果是移动 大于0  说明在缩小  只需要缩小的距离小于原本裁剪的高度就ok
  232.           if (dragLength > 0) {
  233.             this.setData({
  234.               cutW: initDragCutW - dragLength
  235.             })
  236.           } else {
  237.             return
  238.           }
  239.         } else {
  240.           return
  241.         }
  242.         break;
  243.       case 'left':
  244.         var dragLength = (dragLength = sizeConfPageX - e.touches[0].pageX) * dragScaleP
  245.         console.log(dragLength)
  246.         if (initDragCutW >= dragLength && initDragCutL > dragLength) {
  247.           if (dragLength < 0 && Math.abs(dragLength) >= initDragCutW) return
  248.           this.setData({
  249.             cutL: initDragCutL - dragLength,
  250.             cutW: initDragCutW + dragLength
  251.           })
  252.         } else {
  253.           return;
  254.         }
  255.         break;
  256.       case 'top':
  257.         var dragLength = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
  258.         if (initDragCutH >= dragLength && initDragCutT > dragLength) {
  259.           if (dragLength < 0 && Math.abs(dragLength) >= initDragCutH) return
  260.           this.setData({
  261.             cutT: initDragCutT - dragLength,
  262.             cutH: initDragCutH + dragLength
  263.           })
  264.         } else {
  265.           return;
  266.         }
  267.         break;
  268.       case 'bottom':
  269.         var dragLength = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
  270.         // console.log(this.data.cropperH > this.data.cutT + this.data.cutH)
  271.         // console.log(dragLength)
  272.         // console.log(initDragCutH >= dragLength)
  273.         // console.log(this.data.cropperH > initDragCutT + this.data.cutH)
  274.         // 必须是 dragLength 向上缩小的时候必须小于原本的高度
  275.         if (initDragCutH >= dragLength) {
  276.           // 如果 移动小于0 说明是在往下啦  放大裁剪的高度  这样一来 图片的高度  最大 等于 图片的top值加 当前图片的高度  否则就说明超出界限
  277.           if (dragLength < 0 && this.data.cropperH > initDragCutT + this.data.cutH) {
  278.             this.setData({
  279.               cutH: initDragCutH - dragLength
  280.             })
  281.           }
  282.           // 如果是移动 大于0  说明在缩小  只需要缩小的距离小于原本裁剪的高度就ok
  283.           if (dragLength > 0) {
  284.             this.setData({
  285.               cutH: initDragCutH - dragLength
  286.             })
  287.           } else {
  288.             return
  289.           }
  290.         } else {
  291.           return
  292.         }
  293.         break;
  294.       case 'rightBottom':
  295.         var dragLengthX = (sizeConfPageX - e.touches[0].pageX) * dragScaleP
  296.         var dragLengthY = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
  297.         if (initDragCutH >= dragLengthY && initDragCutW >= dragLengthX) {
  298.           // bottom 方向的变化
  299.           if ((dragLengthY < 0 && this.data.cropperH > initDragCutT + this.data.cutH) || (dragLengthY > 0)) {
  300.             this.setData({
  301.               cutH: initDragCutH - dragLengthY
  302.             })
  303.           }
  305.           // right 方向的变化
  306.           if ((dragLengthX < 0 && this.data.cropperW > initDragCutL + this.data.cutW) || (dragLengthX > 0)) {
  307.             this.setData({
  308.               cutW: initDragCutW - dragLengthX
  309.             })
  310.           } else {
  311.             return
  312.           }
  313.         } else {
  314.           return
  315.         }
  316.         break;
  317.       default:
  318.         break;
  319.     }
  320.   },
  323.   /**
  324.    * 生命周期函数--监听页面加载
  325.    */
  326.   onLoad: function (options) {
  327.     this.setData({
  328.       imageSrc: 'https://wx3.sinaimg.cn/orj360/6b03f0e6gy1h6c1mivf4lj20u01400wu.jpg'
  329.     })
  330.   },
  332.   /**
  333.    * 生命周期函数--监听页面初次渲染完成
  334.    */
  335.   onReady: function () {
  336.     wx.showLoading({
  337.       title: '图片加载中...',
  338.     })
  339.     wx.getImageInfo({
  340.       src: this.data.imageSrc,
  341.       success: res=>{
  342.         var innerAspectRadio = res.width / res.height;
  343.         // 根据图片的宽高显示不同的效果   保证图片可以正常显示
  344.         if (innerAspectRadio >= 1) {
  345.           this.setData({
  346.             cropperW: windowWRPX,
  347.             cropperH: windowWRPX / innerAspectRadio,
  348.             // 初始化left right
  349.             cropperL: Math.ceil((windowWRPX - windowWRPX) / 2),
  350.             cropperT: Math.ceil((windowWRPX - windowWRPX / innerAspectRadio) / 2),
  351.             // 裁剪框  宽高  
  352.             cutW: windowWRPX - 200,
  353.             cutH: windowWRPX / innerAspectRadio - 200,
  354.             cutL: Math.ceil((windowWRPX - windowWRPX + 200) / 2),
  355.             cutT: Math.ceil((windowWRPX / innerAspectRadio - (windowWRPX / innerAspectRadio - 200)) / 2),
  356.             // 图片缩放值
  357.             scaleP: res.width * pixelRatio / windowWRPX,
  358.             // 图片原始宽度 rpx
  359.             imageW: res.width * pixelRatio,
  360.             imageH: res.height * pixelRatio
  361.           })
  362.         } else {
  363.           this.setData({
  364.             cropperW: windowWRPX * innerAspectRadio,
  365.             cropperH: windowWRPX,
  366.             // 初始化left right
  367.             cropperL: Math.ceil((windowWRPX - windowWRPX * innerAspectRadio) / 2),
  368.             cropperT: Math.ceil((windowWRPX - windowWRPX) / 2),
  369.             // 裁剪框的宽高
  370.             cutW: windowWRPX * innerAspectRadio - 200,
  371.             cutH: 200,
  372.             cutL: Math.ceil((windowWRPX * innerAspectRadio - (windowWRPX * innerAspectRadio - 50)) / 2),
  373.             cutT: Math.ceil((windowWRPX - 200) / 2),
  374.             // 图片缩放值
  375.             scaleP: res.width * pixelRatio / windowWRPX,
  376.             // 图片原始宽度 rpx
  377.             imageW: res.width * pixelRatio,
  378.             imageH: res.height * pixelRatio
  379.           })
  380.         }
  381.         this.setData({
  382.           isShowImg: true
  383.         })
  384.         wx.hideLoading()
  385.       }
  386.     })
  387.   },
  388.   /**
  389.    * 生命周期函数--监听页面显示
  390.    */
  391.   onShow: function () {
  393.   },
  395.   /**
  396.    * 生命周期函数--监听页面隐藏
  397.    */
  398.   onHide: function () {
  400.   },
  402.   /**
  403.    * 生命周期函数--监听页面卸载
  404.    */
  405.   onUnload: function () {
  407.   },
  409.   /**
  410.    * 页面相关事件处理函数--监听用户下拉动作
  411.    */
  412.   onPullDownRefresh: function () {
  414.   },
  416.   /**
  417.    * 页面上拉触底事件的处理函数
  418.    */
  419.   onReachBottom: function () {
  421.   },
  423.   /**
  424.    * 用户点击右上角分享
  425.    */
  426.   onShareAppMessage: function () {
  428.   }
  429. })

css

  1. .wx-corpper{
  2.   position: relative;
  3.   overflow: hidden;
  4.   -webkit-user-select: none;
  5.   -moz-user-select: none;
  6.   -ms-user-select: none;
  7.   user-select: none;
  8.   -webkit-tap-highlight-color: transparent;
  9.   -webkit-touch-callout: none;
  10.   box-sizing: border-box;
  11. }
  13. .wx-corpper-content{
  14.     position: absolute;
  15.     top: 0;
  16.     right: 0;
  17.     bottom: 0;
  18.     left: 0;
  19. }
  21. .wx-corpper-content image {
  22.     display: block;
  23.     width: 100%;
  24.     min-width: 0 !important;
  25.     max-width: none !important;
  26.     height: 100%;
  27.     min-height: 0 !important;
  28.     max-height: none !important;
  29.     image-orientation: 0deg !important;
  30.     margin: 0 auto;
  31. }
  33. /* 移动图片效果 */
  34. .wx-cropper-drag-box{
  35.     position: absolute;
  36.     top: 0;
  37.     right: 0;
  38.     bottom: 0;
  39.     left: 0;
  40.     cursor: move;
  41.     background: rgba(0,0,0,0.6);
  42.     z-index: 1;
  43. }
  45. /* 内部的信息 */
  46. .wx-corpper-crop-box{
  47.     position: absolute;
  48.     width: 500rpx;
  49.     height: 500rpx;
  50.     background: rgba(255,255,255,0.3); 
  51.     z-index: 2;
  52. }
  54. .wx-corpper-crop-box .wx-cropper-view-box {
  55.     position: relative;
  56.     display: block;
  57.     width: 100%;
  58.     height: 100%;
  59.     overflow: visible;
  60.     outline: 1px solid #69f;
  61.     outline-color: rgba(102, 153, 255, .75)
  62. }
  64. /* 横向虚线 */
  65. .wx-cropper-dashed-h{
  66.     position: absolute;
  67.     top: 33.33333333%;
  68.     left: 0;
  69.     width: 100%;
  70.     height: 33.33333333%;
  71.     border-top: 1px dashed rgba(255,255,255,0.5);
  72.     border-bottom: 1px dashed rgba(255,255,255,0.5);
  73. }
  75. /* 纵向虚线 */
  76. .wx-cropper-dashed-v{
  77.     position: absolute;
  78.     left: 33.33333333%;
  79.     top: 0;
  80.     width: 33.33333333%;
  81.     height: 100%;
  82.     border-left: 1px dashed rgba(255,255,255,0.5);
  83.     border-right: 1px dashed rgba(255,255,255,0.5);
  84. }
  86. /* 四个方向的线  为了之后的拖动事件*/
  87. .wx-cropper-line-t{
  88.     position: absolute;
  89.     display: block;
  90.     width: 100%;
  91.     background-color: #69f;
  92.     top: 0;
  93.     left: 0;
  94.     height: 1px;
  95.     opacity: 0.1;
  96.     cursor: n-resize;
  97. }
  99. .wx-cropper-line-t::before{
  100.   content: '';
  101.   position: absolute;
  102.   top: 50%;
  103.   right: 0rpx;
  104.   width: 100%;
  105.   -webkit-transform: translate3d(0,-50%,0);
  106.   transform: translate3d(0,-50%,0);
  107.   bottom: 0;
  108.   height: 41rpx;
  109.   background: transparent;
  110.   z-index: 11;
  111. }
  113. .wx-cropper-line-r{
  114.     position: absolute;
  115.     display: block;
  116.     background-color: #69f;
  117.     top: 0;
  118.     right: 0px;
  119.     width: 1px;
  120.     opacity: 0.1;
  121.     height: 100%;
  122.     cursor: e-resize;
  123. }
  124. .wx-cropper-line-r::before{
  125.   content: '';
  126.   position: absolute;
  127.   top: 0;
  128.   left: 50%;
  129.   width: 41rpx;
  130.   -webkit-transform: translate3d(-50%,0,0);
  131.   transform: translate3d(-50%,0,0);
  132.   bottom: 0;
  133.   height: 100%;
  134.   background: transparent;
  135.   z-index: 11;
  136. }
  138. .wx-cropper-line-b{
  139.     position: absolute;
  140.     display: block;
  141.     width: 100%;
  142.     background-color: #69f;
  143.     bottom: 0;
  144.     left: 0;
  145.     height: 1px;
  146.     opacity: 0.1;
  147.     cursor: s-resize;
  148. }
  150. .wx-cropper-line-b::before{
  151.   content: '';
  152.   position: absolute;
  153.   top: 50%;
  154.   right: 0rpx;
  155.   width: 100%;
  156.   -webkit-transform: translate3d(0,-50%,0);
  157.   transform: translate3d(0,-50%,0);
  158.   bottom: 0;
  159.   height: 41rpx;
  160.   background: transparent;
  161.   z-index: 11;
  162. }
  164. .wx-cropper-line-l{
  165.     position: absolute;
  166.     display: block;
  167.     background-color: #69f;
  168.     top: 0;
  169.     left: 0;
  170.     width: 1px;
  171.     opacity: 0.1;
  172.     height: 100%;
  173.     cursor: w-resize;
  174. }
  175. .wx-cropper-line-l::before{
  176.   content: '';
  177.   position: absolute;
  178.   top: 0;
  179.   left: 50%;
  180.   width: 41rpx;
  181.   -webkit-transform: translate3d(-50%,0,0);
  182.   transform: translate3d(-50%,0,0);
  183.   bottom: 0;
  184.   height: 100%;
  185.   background: transparent;
  186.   z-index: 11;
  187. }
  189. .wx-cropper-point{
  190.     width: 5px;
  191.     height: 5px;
  192.     background-color: #69f;
  193.     opacity: .75;
  194.     position: absolute;
  195.     z-index: 3;
  196. }
  198. .point-t{
  199.     top: -3px;
  200.     left: 50%;
  201.     margin-left: -3px;
  202.     cursor: n-resize;
  203. }
  205. .point-tr{
  206.     top: -3px;
  207.     left: 100%;
  208.     margin-left: -3px;
  209.     cursor: n-resize;
  210. }
  212. .point-r{
  213.     top: 50%;
  214.     left:100%;
  215.     margin-left: -3px;
  216.     margin-top: -3px;
  217.     cursor: n-resize;
  218. }
  220. .point-rb{
  221.     left: 100%;
  222.     top: 100%;
  223.     -webkit-transform: translate3d(-50%,-50%,0);
  224.     transform: translate3d(-50%,-50%,0);
  225.     cursor: n-resize;
  226.     width: 24rpx;
  227.     height: 24rpx;
  228.     background-color: #69f;
  229.     position: absolute;
  230.     z-index: 1112;
  231.     opacity: 1;
  232. }
  234. .point-b{
  235.     left:50%;
  236.     top: 100%;
  237.     margin-left: -3px;
  238.     margin-top: -3px;
  239.     cursor: n-resize;
  240. }
  242. .point-bl{
  243.     left:0%;
  244.     top: 100%;
  245.     margin-left: -3px;
  246.     margin-top: -3px;
  247.     cursor: n-resize;
  248. }
  250. .point-l{
  251.     left:0%;
  252.     top: 50%;
  253.     margin-left: -3px;
  254.     margin-top: -3px;
  255.     cursor: n-resize;
  256. }
  258. .point-lt{
  259.     left:0%;
  260.     top: 0%;
  261.     margin-left: -3px;
  262.     margin-top: -3px;
  263.     cursor: n-resize;
  264. }
  266. /* 裁剪框预览内容 */
  267. .wx-cropper-viewer{
  268.   position: relative;
  269.   width: 100%;
  270.   height: 100%;
  271.   overflow: hidden;
  272. }
  274. .wx-cropper-viewer image{
  275.   position: absolute;
  276.   z-index: 2;
  277. }
上一条：0809-函数调用、分支循环、数组遍历和替代语法/模板语法下一条：微信小程序官方组件展示之表单组件input源码
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多