Merge pull request #73 from 1977474741/dev

1.添加代码片段

README.md

@@ -102,6 +102,8 @@
 
 Demo地址：https://github.com/wx-plugin/image-cropper-demo
 
+[点击导入代码片段](https://developers.weixin.qq.com/s/dIQvo5mr7cpm)
+
 如果有什么好的建议欢迎提issues或者提pr
 
 ## 进群 | 鼓励作者

demo/app.js

+App({
+  onLaunch: function () {
+
+  },
+  globalData:{}
+})

demo/app.json

+{
+  "pages":[
+    "index/index",
+    "cropper/cropper"
+  ],
+  "window":{
+    "backgroundTextStyle":"light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "Weixin",
+    "navigationBarTextStyle":"black"
+  },
+  "sitemapLocation": "sitemap.json"
+}

demo/app.wxss

+page{
+    height: 100%;
+    width: 100%;
+}
\ No newline at end of file

demo/component/image-cropper/image-cropper.json

+{
+	"component": true
+}
\ No newline at end of file

demo/component/image-cropper/image-cropper.wxml

+<view class='image-cropper' catchtouchmove='_preventTouchMove'>
+    <view class='main' bindtouchend="_cutTouchEnd" bindtouchstart="_cutTouchStart" bindtouchmove="_cutTouchMove" bindtap="_click">
+        <view class='content'>
+            <view class='content_top bg_gray {{_flag_bright?"":"bg_black"}}' style="height:{{cut_top}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
+            <view class='content_middle' style="height:{{height}}px;">
+                <view class='content_middle_left bg_gray {{_flag_bright?"":"bg_black"}}' style="width:{{cut_left}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
+                <view class='content_middle_middle' style="width:{{width}}px;height:{{height}}px;transition-duration: .3s;transition-property:{{_cut_animation?'':'background'}};">
+                    <view class="border border-top-left"></view>
+                    <view class="border border-top-right"></view>
+                    <view class="border border-right-top"></view>
+                    <view class="border border-right-bottom"></view>
+                    <view class="border border-bottom-right"></view>
+                    <view class="border border-bottom-left"></view>
+                    <view class="border border-left-bottom"></view>
+                    <view class="border border-left-top"></view>
+                </view>
+                <view class='content_middle_right bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
+            </view>
+            <view class='content_bottom bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
+        </view>
+        <image bindload="imageLoad" bindtouchstart="_start" bindtouchmove="_move" bindtouchend="_end" style="width:{{img_width ? img_width + 'px' : 'auto'}};height:{{img_height ? img_height + 'px' : 'auto'}};transform:translate3d({{_img_left-img_width/2}}px,{{_img_top-img_height/2}}px,0) scale({{scale}}) rotate({{angle}}deg);transition-duration:{{_cut_animation?.4:0}}s;" class='img' src='{{imgSrc}}'></image>
+    </view>
+    <canvas canvas-id='image-cropper' disable-scroll="true" style="width:{{_canvas_width * export_scale}}px;height:{{_canvas_height * export_scale}}px;left:{{canvas_left}}px;top:{{canvas_top}}px" class='image-cropper-canvas'></canvas>
+</view>

demo/component/image-cropper/image-cropper.wxss

+.image-cropper {
+    background: rgba(14, 13, 13, .8);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1;
+}
+
+.image-cropper .main {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.image-cropper .content {
+    z-index: 9;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    pointer-events: none;
+}
+
+.image-cropper .bg_black {
+    background: rgba(0, 0, 0, 0.8) !important;
+}
+
+.image-cropper .bg_gray {
+    background: rgba(0, 0, 0, 0.45);
+    transition-duration: .35s;
+}
+
+.image-cropper .content>.content_top {
+    pointer-events: none;
+}
+
+.image-cropper .content>.content_middle {
+    display: flex;
+    height: 200px;
+    width: 100%;
+}
+
+.image-cropper .content_middle_middle {
+    width: 200px;
+    box-sizing: border-box;
+    position: relative;
+    transition-duration: .3s;
+}
+
+.image-cropper .content_middle_right {
+    flex: auto;
+}
+
+.image-cropper .content>.content_bottom {
+    flex: auto;
+}
+
+.image-cropper .img {
+    z-index: 2;
+    top: 0;
+    left: 0;
+    position: absolute;
+    border: none;
+    width: 100%;
+    backface-visibility: hidden;
+    transform-origin: center;
+}
+
+.image-cropper .image-cropper-canvas {
+    position: fixed;
+    background: white;
+    width: 150px;
+    height: 150px;
+    z-index: 10;
+    top: -200%;
+    pointer-events: none;
+}
+
+.image-cropper .border {
+    background: white;
+    pointer-events: auto;
+    position: absolute;
+}
+
+.image-cropper .border-top-left {
+    left: -2.5px;
+    top: -2.5px;
+    height: 2.5px;
+    width: 33rpx;
+}
+
+.image-cropper .border-top-right {
+    right: -2.5px;
+    top: -2.5px;
+    height: 2.5px;
+    width: 33rpx;
+}
+
+.image-cropper .border-right-top {
+    top: -1px;
+    width: 2.5px;
+    height: 30rpx;
+    right: -2.5px;
+}
+
+.image-cropper .border-right-bottom {
+    width: 2.5px;
+    height: 30rpx;
+    right: -2.5px;
+    bottom: -1px;
+}
+
+.image-cropper .border-bottom-left {
+    height: 2.5px;
+    width: 33rpx;
+    bottom: -2.5px;
+    left: -2.5px;
+}
+
+.image-cropper .border-bottom-right {
+    height: 2.5px;
+    width: 33rpx;
+    bottom: -2.5px;
+    right: -2.5px;
+}
+
+.image-cropper .border-left-top {
+    top: -1px;
+    width: 2.5px;
+    height: 30rpx;
+    left: -2.5px;
+}
+
+.image-cropper .border-left-bottom {
+    width: 2.5px;
+    height: 30rpx;
+    left: -2.5px;
+    bottom: -1px;
+}
\ No newline at end of file

demo/cropper/cropper.js

+//获取应用实例
+const app = getApp()
+Page({
+    data: {
+        src: '',
+        width: 250, //宽度
+        height: 200, //高度
+        max_width: 300,
+        max_height: 300,
+        disable_rotate: true, //是否禁用旋转
+        disable_ratio: false, //锁定比例
+        limit_move: true, //是否限制移动
+    },
+    onLoad: function (options) {
+            this.cropper = this.selectComponent("#image-cropper");
+            this.setData({
+                src: options.imgSrc
+            });
+            this.cropper.upload(); //上传图片
+        },
+        cropperload(e) {
+            console.log('cropper加载完成');
+        },
+        loadimage(e) {
+            wx.hideLoading();
+            console.log('图片');
+            this.cropper.imgReset();
+        },
+        clickcut(e) {
+            console.log(e.detail);
+            //图片预览
+            wx.previewImage({
+                current: e.detail.url, // 当前显示图片的http链接
+                urls: [e.detail.url] // 需要预览的图片http链接列表
+            })
+        },
+        upload() {
+            let that = this;
+            wx.chooseImage({
+                count: 1,
+                sizeType: ['original', 'compressed'],
+                sourceType: ['album', 'camera'],
+                success(res) {
+                    wx.showLoading({
+                        title: '加载中',
+                    })
+                    const tempFilePaths = res.tempFilePaths[0];
+                    //重置图片角度、缩放、位置
+                    that.cropper.imgReset();
+                    that.setData({
+                        src: tempFilePaths
+                    });
+                }
+            })
+        },
+        setWidth(e) {
+            this.setData({
+                width: e.detail.value < 10 ? 10 : e.detail.value
+            });
+            this.setData({
+                cut_left: this.cropper.data.cut_left
+            });
+        },
+        setHeight(e) {
+            this.setData({
+                height: e.detail.value < 10 ? 10 : e.detail.value
+            });
+            this.setData({
+                cut_top: this.cropper.data.cut_top
+            });
+        },
+        switchChangeDisableRatio(e) {
+            //设置宽度之后使剪裁框居中
+            this.setData({
+                disable_ratio: e.detail.value
+            });
+        },
+        setCutTop(e) {
+            this.setData({
+                cut_top: e.detail.value
+            });
+            this.setData({
+                cut_top: this.cropper.data.cut_top
+            });
+        },
+        setCutLeft(e) {
+            this.setData({
+                cut_left: e.detail.value
+            });
+            this.setData({
+                cut_left: this.cropper.data.cut_left
+            });
+        },
+        switchChangeDisableRotate(e) {
+            //开启旋转的同时不限制移动
+            if (!e.detail.value) {
+                this.setData({
+                    limit_move: false,
+                    disable_rotate: e.detail.value
+                });
+            } else {
+                this.setData({
+                    disable_rotate: e.detail.value
+                });
+            }
+        },
+        switchChangeLimitMove(e) {
+            //限制移动的同时锁定旋转
+            if (e.detail.value) {
+                this.setData({
+                    disable_rotate: true
+                });
+            }
+            this.cropper.setLimitMove(e.detail.value);
+        },
+        switchChangeDisableWidth(e) {
+            this.setData({
+                disable_width: e.detail.value
+            });
+        },
+        switchChangeDisableHeight(e) {
+            this.setData({
+                disable_height: e.detail.value
+            });
+        },
+        submit() {
+            this.cropper.getImg((obj) => {
+                app.globalData.imgSrc = obj.url;
+                wx.navigateBack({
+                    delta: -1
+                })
+            });
+        },
+        rotate() {
+            //在用户旋转的基础上旋转90°
+            this.cropper.setAngle(this.cropper.data.angle += 90);
+        },
+        top() {
+            this.data.top = setInterval(() => {
+                this.cropper.setTransform({
+                    y: -3
+                });
+            }, 1000 / 60)
+        },
+        bottom() {
+            this.data.bottom = setInterval(() => {
+                this.cropper.setTransform({
+                    y: 3
+                });
+            }, 1000 / 60)
+        },
+        left() {
+            this.data.left = setInterval(() => {
+                this.cropper.setTransform({
+                    x: -3
+                });
+            }, 1000 / 60)
+        },
+        right() {
+            this.data.right = setInterval(() => {
+                this.cropper.setTransform({
+                    x: 3
+                });
+            }, 1000 / 60)
+        },
+        narrow() {
+            this.data.narrow = setInterval(() => {
+                this.cropper.setTransform({
+                    scale: -0.02
+                });
+            }, 1000 / 60)
+        },
+        enlarge() {
+            this.data.enlarge = setInterval(() => {
+                this.cropper.setTransform({
+                    scale: 0.02
+                });
+            }, 1000 / 60)
+        },
+        end(e) {
+            clearInterval(this.data[e.currentTarget.dataset.type]);
+        },
+})
\ No newline at end of file

demo/cropper/cropper.json

+{
+    "navigationBarTitleText": "image-cropper",
+    "disableScroll": true,
+    "navigationBarBackgroundColor": "#292929",
+    "navigationBarTextStyle": "white",
+    "backgroundColor": "#292929",
+    "usingComponents": {
+        "image-cropper": "../component/image-cropper/image-cropper"
+    }
+}
\ No newline at end of file

demo/cropper/cropper.wxml

+<view style="width:100%;height:500rpx;">
+    <image-cropper id="image-cropper" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut" limit_move="{{limit_move}}" disable_rotate="{{disable_rotate}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" angle="{{angle}}" disable_width="{{disable_width}}" max_width="{{max_width}}" max_height="{{max_height}}" disable_height="{{disable_height}}" disable_ratio="{{disable_ratio}}">
+    </image-cropper>
+</view>
+<text class="hint">点击中间裁剪框可查看裁剪后的图片</text>
+<view class='bottom'>
+    <text style='color:white;margin-right:5rpx;'>锁定裁剪框宽</text>
+    <switch checked='{{disable_width?true:false}}' bindchange="switchChangeDisableWidth" />
+    <text style='color:white;margin-right:5rpx;'>锁定裁剪框高</text>
+    <switch checked='{{disable_height?true:false}}' bindchange="switchChangeDisableHeight" />
+    <button bindtap='submit'>确定</button>
+    <text style='color:white;margin-right:5rpx;'>锁定比例</text>
+    <switch checked='{{disable_ratio?true:false}}' bindchange="switchChangeDisableRatio" />
+    <text></text>
+    <text style='color:white;margin-right:5rpx;'>锁定旋转</text>
+    <switch checked='{{disable_rotate?true:false}}' bindchange="switchChangeDisableRotate" />
+    <text style='color:white;margin-right:5rpx;'>限制移动</text>
+    <switch checked='{{limit_move?true:false}}' bindchange="switchChangeLimitMove" />
+    <button class="button" catchtouchstart='top' catchtouchend='end' data-type="top">上</button>
+    <button class="button" catchtouchstart='bottom' catchtouchend='end' data-type="bottom">下</button>
+    <button class="button" catchtouchstart='left' catchtouchend='end' data-type="left">左</button>
+    <button class="button" catchtouchstart='right' catchtouchend='end' data-type="right">右</button>
+    <button class="button" catchtouchstart='enlarge' catchtouchend='end' data-type="enlarge">放大</button>
+    <button class="button" catchtouchstart='narrow' catchtouchend='end' data-type="narrow">缩小</button>
+    <button class="button" catchtouchstart='rotate' catchtouchend='end' data-type="rotate">旋转</button>
+    <button class="button" catchtap='upload'>上传</button>
+</view>
\ No newline at end of file

demo/cropper/cropper.wxss

+.image-cropper {
+    background: rgba(14, 13, 13, .8);
+    position: fixed;
+
+    .top {
+        position: absolute;
+        width: 100%;
+        top: 10rpx;
+        display: flex;
+        flex-flow: wrap;
+        z-index: 10;
+        color: white;
+        justify-content: space-around;
+    }
+
+    .hint {
+        position: absolute;
+        top: 10rpx;
+        width: 100%;
+        font-size: 33rpx;
+        text-align: center;
+        color: white;
+        z-index: 10;
+    }
+
+    page {
+        background: white;
+    }
+
+    view {
+        font-size: 30rpx;
+    }
+
+    .bottom {
+        position: absolute;
+        width: 100%;
+        bottom: 50rpx;
+        display: flex;
+        z-index: 10;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        height: 210rpx;
+    }
+
+    button {
+        font-size: 27rpx;
+        z-index: 2;
+        padding: 0 20rpx;
+        height: 60rpx;
+        min-width: 70rpx;
+        margin: 0 4rpx;
+    }
+
+    .input {
+        display: flex;
+        height: 50rpx;
+        width: 50%;
+    }
+
+    .input>.label {
+        min-width: 150rpx;
+        font-size: 30rpx;
+        height: 50rpx;
+        line-height: 50rpx;
+    }
+
+    .input>input {
+        margin-left: 10rpx;
+        text-align: center;
+        max-width: 160rpx;
+        border: 1px solid rgb(255, 255, 255);
+        height: 50rpx;
+        line-height: 50rpx;
+        min-height: 50rpx;
+        box-sizing: border-box;
+    }
+
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1;
+}
+
+.image-cropper .main {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.image-cropper .content {
+    z-index: 9;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    pointer-events: none;
+}
+
+.image-cropper .bg_black {
+    background: rgba(0, 0, 0, 0.8) !important;
+}
+
+.image-cropper .bg_gray {
+    background: rgba(0, 0, 0, 0.45);
+    transition-duration: .35s;
+}
+
+.image-cropper .content>.content_top {
+    pointer-events: none;
+}
+
+.image-cropper .content>.content_middle {
+    display: flex;
+    height: 200px;
+    width: 100%;
+}
+
+.image-cropper .content_middle_middle {
+    width: 200px;
+    box-sizing: border-box;
+    position: relative;
+    transition-duration: .3s;
+}
+
+.image-cropper .content_middle_right {
+    flex: auto;
+}
+
+.image-cropper .content>.content_bottom {
+    flex: auto;
+}
+
+.image-cropper .img {
+    z-index: 2;
+    top: 0;
+    left: 0;
+    position: absolute;
+    border: none;
+    width: 100%;
+    backface-visibility: hidden;
+    transform-origin: center;
+}
+
+.image-cropper .image-cropper-canvas {
+    position: fixed;
+    background: white;
+    width: 150px;
+    height: 150px;
+    z-index: 10;
+    top: -200%;
+    pointer-events: none;
+}
+
+.image-cropper .border {
+    background: white;
+    pointer-events: auto;
+    position: absolute;
+}
+
+.image-cropper .border-top-left {
+    left: -2.5px;
+    top: -2.5px;
+    height: 2.5px;
+    width: 33rpx;
+}
+
+.image-cropper .border-top-right {
+    right: -2.5px;
+    top: -2.5px;
+    height: 2.5px;
+    width: 33rpx;
+}
+
+.image-cropper .border-right-top {
+    top: -1px;
+    width: 2.5px;
+    height: 30rpx;
+    right: -2.5px;
+}
+
+.image-cropper .border-right-bottom {
+    width: 2.5px;
+    height: 30rpx;
+    right: -2.5px;
+    bottom: -1px;
+}
+
+.image-cropper .border-bottom-left {
+    height: 2.5px;
+    width: 33rpx;
+    bottom: -2.5px;
+    left: -2.5px;
+}
+
+.image-cropper .border-bottom-right {
+    height: 2.5px;
+    width: 33rpx;
+    bottom: -2.5px;
+    right: -2.5px;
+}
+
+.image-cropper .border-left-top {
+    top: -1px;
+    width: 2.5px;
+    height: 30rpx;
+    left: -2.5px;
+}
+
+.image-cropper .border-left-bottom {
+    width: 2.5px;
+    height: 30rpx;
+    left: -2.5px;
+    bottom: -1px;
+}
\ No newline at end of file

demo/index/index.js

+const app = getApp()
+
+Page({
+    data: {
+        src: ''
+    },
+    toCropper() {
+        let url = 'https://pubser-res.zhenai.com/activity/202007/30/21480199030108.png';
+        url = '';
+        wx.navigateTo({
+            url: `/cropper/cropper?imgSrc=${url}`
+        })
+    },
+    onShow() {
+        if (app.globalData.imgSrc) {
+            this.setData({
+                src: app.globalData.imgSrc
+            })
+        }
+    },
+    onLoad: function () {
+        console.log('代码片段是一种迷你、可分享的小程序或小游戏项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档：')
+        console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html')
+    },
+})
\ No newline at end of file

demo/index/index.json

+{
+    "usingComponents": {},
+    "navigationBarTitleText": "image-cropper",
+    "navigationBarBackgroundColor": "#292929",
+    "navigationBarTextStyle": "white",
+    "backgroundColor": "#292929"
+}
\ No newline at end of file

demo/index/index.wxml

+<view class="intro">
+    <view class="head" bindtap="toCropper">
+        <block wx:if="{{src}}">
+            <image mode="widthFix" src="{{src}}"></image>
+        </block>
+        <block wx:else>
+            点击裁剪
+        </block>
+    </view>
+</view>
\ No newline at end of file

demo/index/index.wxss

+.intro {
+    background: #292929;
+    height: 100%;
+    width: 100%;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.head {
+    margin-top: -20%;
+    overflow: hidden;
+    border-radius: 100%;
+    width: 200rpx;
+    height: 200rpx;
+    border: 4rpx solid #fff5f7;
+    line-height: 200rpx;
+    color: #fff5f7;
+}
+
+.head>image {
+    width: 100%;
+}
\ No newline at end of file

demo/project.config.json

+{
+  "description": "项目配置文件",
+  "packOptions": {
+    "ignore": []
+  },
+  "setting": {
+    "urlCheck": true,
+    "scopeDataCheck": false,
+    "coverView": true,
+    "es6": true,
+    "postcss": true,
+    "compileHotReLoad": false,
+    "preloadBackgroundData": false,
+    "minified": true,
+    "autoAudits": false,
+    "newFeature": false,
+    "uglifyFileName": false,
+    "uploadWithSourceMap": true,
+    "useIsolateContext": true,
+    "nodeModules": false,
+    "enhance": false,
+    "useCompilerModule": true,
+    "userConfirmedUseCompilerModuleSwitch": false,
+    "useMultiFrameRuntime": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "showShadowRootInWxmlPanel": true,
+    "packNpmManually": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": true,
+    "bundle": false
+  },
+  "compileType": "miniprogram",
+  "libVersion": "2.15.0",
+  "appid": "wxef81ad8a767198db",
+  "projectname": "image-cropper",
+  "debugOptions": {
+    "hidedInDevtools": []
+  },
+  "simulatorType": "wechat",
+  "simulatorPluginLibVersion": {},
+  "condition": {
+    "search": {
+      "list": []
+    },
+    "conversation": {
+      "list": []
+    },
+    "plugin": {
+      "list": []
+    },
+    "game": {
+      "currentL": -1,
+      "list": []
+    },
+    "gamePlugin": {
+      "list": []
+    },
+    "miniprogram": {
+      "list": [
+        {
+          "id": -1,
+          "name": "cropper/cropper",
+          "pathName": "cropper/cropper",
+          "scene": null
+        }
+      ]
+    }
+  }
+}
\ No newline at end of file

demo/sitemap.json

+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}
\ No newline at end of file

src/image-cropper.json

 {
-  "component": true
+	"component": true
 }
\ No newline at end of file

src/image-cropper.wxml

-  <view class='image-cropper' catchtouchmove='_preventTouchMove'>
+<view class='image-cropper' catchtouchmove='_preventTouchMove'>
     <view class='main' bindtouchend="_cutTouchEnd" bindtouchstart="_cutTouchStart" bindtouchmove="_cutTouchMove" bindtap="_click">
-      <view class='content'>
-        <view class='content_top bg_gray {{_flag_bright?"":"bg_black"}}' style="height:{{cut_top}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
-        <view class='content_middle' style="height:{{height}}px;">
-          <view class='content_middle_left bg_gray {{_flag_bright?"":"bg_black"}}' style="width:{{cut_left}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
-          <view class='content_middle_middle' style="width:{{width}}px;height:{{height}}px;transition-duration: .3s;transition-property:{{_cut_animation?'':'background'}};">
-            <view class="border border-top-left"></view>
-            <view class="border border-top-right"></view>
-            <view class="border border-right-top"></view>
-            <view class="border border-right-bottom"></view>
-            <view class="border border-bottom-right"></view>
-            <view class="border border-bottom-left"></view>
-            <view class="border border-left-bottom"></view>
-            <view class="border border-left-top"></view>
-          </view>
-          <view class='content_middle_right bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
+        <view class='content'>
+            <view class='content_top bg_gray {{_flag_bright?"":"bg_black"}}' style="height:{{cut_top}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
+            <view class='content_middle' style="height:{{height}}px;">
+                <view class='content_middle_left bg_gray {{_flag_bright?"":"bg_black"}}' style="width:{{cut_left}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
+                <view class='content_middle_middle' style="width:{{width}}px;height:{{height}}px;transition-duration: .3s;transition-property:{{_cut_animation?'':'background'}};">
+                    <view class="border border-top-left"></view>
+                    <view class="border border-top-right"></view>
+                    <view class="border border-right-top"></view>
+                    <view class="border border-right-bottom"></view>
+                    <view class="border border-bottom-right"></view>
+                    <view class="border border-bottom-left"></view>
+                    <view class="border border-left-bottom"></view>
+                    <view class="border border-left-top"></view>
+                </view>
+                <view class='content_middle_right bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
+            </view>
+            <view class='content_bottom bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
         </view>
-        <view class='content_bottom bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
-      </view>
-      <image bindload="imageLoad" bindtouchstart="_start" bindtouchmove="_move" bindtouchend="_end" style="width:{{img_width ? img_width + 'px' : 'auto'}};height:{{img_height ? img_height + 'px' : 'auto'}};transform:translate3d({{_img_left-img_width/2}}px,{{_img_top-img_height/2}}px,0) scale({{scale}}) rotate({{angle}}deg);transition-duration:{{_cut_animation?.4:0}}s;" class='img' src='{{imgSrc}}'></image>
+        <image bindload="imageLoad" bindtouchstart="_start" bindtouchmove="_move" bindtouchend="_end" style="width:{{img_width ? img_width + 'px' : 'auto'}};height:{{img_height ? img_height + 'px' : 'auto'}};transform:translate3d({{_img_left-img_width/2}}px,{{_img_top-img_height/2}}px,0) scale({{scale}}) rotate({{angle}}deg);transition-duration:{{_cut_animation?.4:0}}s;" class='img' src='{{imgSrc}}'></image>
     </view>
     <canvas canvas-id='image-cropper' disable-scroll="true" style="width:{{_canvas_width * export_scale}}px;height:{{_canvas_height * export_scale}}px;left:{{canvas_left}}px;top:{{canvas_top}}px" class='image-cropper-canvas'></canvas>
-  </view>
+</view>

src/image-cropper.wxss

-.image-cropper{
-  background:rgba(14, 13, 13,.8);
-  position: fixed;
-  top:0;
-  left:0;
-  width:100vw;
-  height:100vh;
-  z-index: 1;
-}
-.image-cropper .main{
-  position: absolute;
-  width:100vw;
-  height:100vh;
-  overflow: hidden;
-}
-.image-cropper .content{
-  z-index: 9;
-  position: absolute;
-  width:100vw;
-  height:100vh;
-  display: flex;
-  flex-direction:column;
-  pointer-events:none;
-}
-.image-cropper .bg_black{
-  background: rgba(0, 0, 0, 0.8)!important;
-}
-.image-cropper .bg_gray{
-  background: rgba(0, 0, 0, 0.45);
-  transition-duration: .35s;
-}
-.image-cropper .content>.content_top{
-  pointer-events:none;
-}
-.image-cropper .content>.content_middle{
-  display: flex;
-  height: 200px;
-  width:100%;
-}
-.image-cropper .content_middle_middle{
-  width:200px;
-  box-sizing:border-box;
-  position: relative;
-  transition-duration: .3s;
-}
-.image-cropper .content_middle_right{
-  flex: auto;
-}
-.image-cropper .content>.content_bottom{
-  flex: auto;
-}
-.image-cropper .img{
-  z-index: 2;
-  top:0;
-  left:0;
-  position: absolute;
-  border:none;
-  width:100%;
-  backface-visibility: hidden;
-  transform-origin:center;
-}
-.image-cropper .image-cropper-canvas{
-  position: fixed;
-  background: white;
-  width:150px;
-  height:150px;
-  z-index: 10;
-  top:-200%;
-  pointer-events:none;
-}
-.image-cropper .border{
-  background: white;
-  pointer-events:auto;
-  position:absolute;
-}
-.image-cropper .border-top-left{
-  left:-2.5px;
-  top:-2.5px;
-  height:2.5px;
-  width:33rpx;
-}
-.image-cropper .border-top-right{
-  right:-2.5px;
-  top:-2.5px;
-  height:2.5px;
-  width:33rpx;
-}
-.image-cropper .border-right-top{
-  top:-1px;
-  width:2.5px;
-  height:30rpx;
-  right:-2.5px;
-}
-.image-cropper .border-right-bottom{
-  width:2.5px;
-  height:30rpx;
-  right:-2.5px;
-  bottom:-1px;
-}
-.image-cropper .border-bottom-left{
-  height:2.5px;
-  width:33rpx;
-  bottom:-2.5px;
-  left:-2.5px;
-}
-.image-cropper .border-bottom-right{
-  height:2.5px;
-  width:33rpx;
-  bottom:-2.5px;
-  right:-2.5px;
-}
-.image-cropper .border-left-top{
-  top:-1px;
-  width:2.5px;
-  height:30rpx;
-  left:-2.5px;
-}
-.image-cropper .border-left-bottom{
-  width:2.5px;
-  height:30rpx;
-  left:-2.5px;
-  bottom:-1px;
+.image-cropper {
+    background: rgba(14, 13, 13, .8);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1;
+}
+
+.image-cropper .main {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.image-cropper .content {
+    z-index: 9;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    pointer-events: none;
+}
+
+.image-cropper .bg_black {
+    background: rgba(0, 0, 0, 0.8) !important;
+}
+
+.image-cropper .bg_gray {
+    background: rgba(0, 0, 0, 0.45);
+    transition-duration: .35s;
+}
+
+.image-cropper .content>.content_top {
+    pointer-events: none;
+}
+
+.image-cropper .content>.content_middle {
+    display: flex;
+    height: 200px;
+    width: 100%;
+}
+
+.image-cropper .content_middle_middle {
+    width: 200px;
+    box-sizing: border-box;
+    position: relative;
+    transition-duration: .3s;
+}
+
+.image-cropper .content_middle_right {
+    flex: auto;
+}
+
+.image-cropper .content>.content_bottom {
+    flex: auto;
+}
+
+.image-cropper .img {
+    z-index: 2;
+    top: 0;
+    left: 0;
+    position: absolute;
+    border: none;
+    width: 100%;
+    backface-visibility: hidden;
+    transform-origin: center;
+}
+
+.image-cropper .image-cropper-canvas {
+    position: fixed;
+    background: white;
+    width: 150px;
+    height: 150px;
+    z-index: 10;
+    top: -200%;
+    pointer-events: none;
+}
+
+.image-cropper .border {
+    background: white;
+    pointer-events: auto;
+    position: absolute;
+}
+
+.image-cropper .border-top-left {
+    left: -2.5px;
+    top: -2.5px;
+    height: 2.5px;
+    width: 33rpx;
+}
+
+.image-cropper .border-top-right {
+    right: -2.5px;
+    top: -2.5px;
+    height: 2.5px;
+    width: 33rpx;
+}
+
+.image-cropper .border-right-top {
+    top: -1px;
+    width: 2.5px;
+    height: 30rpx;
+    right: -2.5px;
+}
+
+.image-cropper .border-right-bottom {
+    width: 2.5px;
+    height: 30rpx;
+    right: -2.5px;
+    bottom: -1px;
+}
+
+.image-cropper .border-bottom-left {
+    height: 2.5px;
+    width: 33rpx;
+    bottom: -2.5px;
+    left: -2.5px;
+}
+
+.image-cropper .border-bottom-right {
+    height: 2.5px;
+    width: 33rpx;
+    bottom: -2.5px;
+    right: -2.5px;
+}
+
+.image-cropper .border-left-top {
+    top: -1px;
+    width: 2.5px;
+    height: 30rpx;
+    left: -2.5px;
+}
+
+.image-cropper .border-left-bottom {
+    width: 2.5px;
+    height: 30rpx;
+    left: -2.5px;
+    bottom: -1px;
 }