Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 微信小程序自定义裁剪图片并压缩
Blogger Information
Blog 67
fans 0
comment 2
visits 71988
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
微信小程序自定义裁剪图片并压缩
搁浅
Original
1117 people have browsed it

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. }
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post