image-cropper.wxml:

<view class="imageCropper">

    <canvas class="canvas" canvas-id="myCanvas" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px">

        <movable-area class="movableArea" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;">

            <movable-view wx:if="{{src}}" style="width:{{cut1Width}}px;height:{{cut1Height}}px" class="movableBox" x="{{x}}" y="{{y}}" direction="all" bindchange="movableChange"></movable-view>

            <image src="{{src}}" id="photo" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px"></image>

        </movable-area>

    </canvas>

    <view class="footBox flex_around f30" style="background: none;"><view class="cf p30 box_b" bindtap="hide">取消</view><view class="cf p30 box_b" bindtap="cut">确定</view></view>

</view>

image-cropper.js

let common = getApp().globalData.commonFun

let util = getApp().globalData.utilFun

Component({

    options: {},

    properties: {},

    options: {styleIsolation: "apply-shared"},

    data: {

        canvasHeight: 0,

        canvasWidth: 0,

        x: 0,

        y: 0,

        src: '',

        cutWidth: 0,

        cut1Width: 0,

        cutHeight: 0,

        cut1Height: 0,

        aspectRatio: 0,

    },

    attached: function () {},

    methods: {

        async setPageData(res) {

            //console.log(res)

            let imgWidth = res.imgWidth,imgHeight = res.imgHeight,w = Number(imgWidth) / 2 * 0.7,h = Number(imgHeight) / 2 * 0.7,imgInfo = await this.singleImgInfo(res.imgSrc),ch = 0,cw = 0,x = this.data.x,y = this.data.y;

            if (imgWidth == imgHeight) {

                if (imgInfo.width >= imgWidth && imgInfo.height >= imgHeight) {

                    if (imgInfo.width > imgInfo.height) {

                        ch = Number(h) + 4;cw = Number(h) / Number(imgInfo.height) * Number(imgInfo.width);x = (cw - w) / 2 - 2;

                    } else {

                        cw = Number(w) + 4;ch = Number(w) / Number(imgInfo.width) * Number(imgInfo.height);y = (ch - h) / 2 - 2;

                    }

                } else {

                    if (imgInfo.width < imgWidth && imgInfo.height >= imgHeight) {

                        if (imgInfo.width > imgInfo.height) {

                            ch = Number(res.imgHeight) + 4;cw = Number(res.imgHeight) / Number(imgInfo.height) * Number(imgInfo.width);x = (cw - w) / 2 / 2 - 42;

                        } else {

                            cw = Number(w) + 4;ch = Number(w) / Number(imgInfo.width) * Number(imgInfo.height);y = (ch - h) / 2 - 2;

                        }

                    } else if (imgInfo.width >= imgWidth && imgInfo.height < imgHeight) {

                        if (imgInfo.width > imgInfo.height) {

                            ch = Number(h) + 4;cw = Number(h) / Number(imgInfo.height) * Number(imgInfo.width);x = (cw - w) / 2 - 2;

                        } else {

                            cw = Number(w) + 4;ch = Number(w) / Number(imgInfo.width) * Number(imgInfo.height);y = (ch - h) / 2 - 2;

                        }

                    } else {

                        if (imgInfo.width > imgInfo.height) {

                            ch = Number(h) + 4;cw = Number(h) / Number(imgInfo.height) * Number(imgInfo.width);x = (cw - w) / 2 - 2;

                        } else {

                            cw = Number(w) + 4;ch = Number(w) / Number(imgInfo.width) * Number(imgInfo.height);y = (ch - h) / 2 - 2;

                        }

                    }

                }

            } else {

                if (imgInfo.width >= imgWidth && imgInfo.height >= imgHeight) {

                    if (imgInfo.width > imgInfo.height) {

                        ch = Number(h) + 4;cw = Number(imgHeight / 2) / Number(imgInfo.height) * Number(imgInfo.width) + 8x = (cw - w) / 2 - 2;

                    } else {

                        cw = Number(w) + 4;ch = Number(w) / Number(imgInfo.width) * Number(imgInfo.height) + 8y = (ch - h) / 2 - 2;

                    }

                } else {

                    if (imgInfo.width < imgWidth && imgInfo.height >= imgHeight) {

                        if (imgInfo.width > imgInfo.height) {

                            ch = Number(h) + 4;cw = Number(imgHeight / 2) / Number(imgInfo.height) * Number(imgInfo.width) + 8x = (cw - w) / 2 - 2;

                        } else {

                            cw = Number(w) + 4;ch = Number(w) / Number(imgInfo.width) * Number(imgInfo.height) + 8y = (ch - h) / 2 - 2;

                        }

                    } else if (imgInfo.width >= imgWidth && imgInfo.height < imgHeight) {

                        if (imgInfo.width > imgInfo.height) {

                            ch = Number(h) + 4;cw = Number(imgHeight / 2) / Number(imgInfo.height) * Number(imgInfo.width) + 8x = (cw - w) / 2 - 2;

                        } else {

                            cw = Number(w) + 4;ch = Number(w) / Number(imgInfo.width) * Number(imgInfo.height) + 8y = (ch - h) / 2 - 2;

                        }

                    } else {

                        if (imgInfo.width > imgInfo.height) {

                            ch = Number(h) + 4;cw = Number(imgHeight / 2) / Number(imgInfo.height) * Number(imgInfo.width) + 8x = (cw - w) / 2 - 2;

                        } else {

                            cw = Number(w) + 4;ch = Number(w) / Number(imgInfo.width) * Number(imgInfo.height) + 8y = (ch - h) / 2 - 2;

                        }

                    }

                }

            }

            this.setData({

                x,

                y,

                canvasHeight: ch,

                canvasWidth: cw,

                cutWidth: res.imgWidth,

                cutHeight: res.imgHeight,

                cut1Width: w,

                cut1Height: h,

                src: res.imgSrc,

                aspectRatio: res.imgWidth / res.imgHeight

            });

            let that = this;

            const ctx = wx.createCanvasContext('myCanvas', this)

            setTimeout(function () {

                wx.createSelectorQuery().in(that).select('#photo').boundingClientRect(function (rect) {

                    ctx.drawImage(res.imgSrc, 0, 0, cw, ch)

                    ctx.draw();

                    //确保不同大小的图片，切图不会变形

                    that.setData({

                        x: x,

                        y: y

                    });

                }).exec()

            }, 100)

        },

singleImgInfo(res) {

    return new Promise((resolve, reject)=>{

        getImageInfo({

            src: res,

            complete(rs) {

                resolve(rs)

            }

        });

    })

},

        hide() {

            this.triggerEvent('myevent', {

                type: "hide"

            })

        },

        //裁剪框移动事件

        movableChange: function (e) {

            console.log(e.detail);

            this.setData({

                x: e.detail.x,

                y: e.detail.y

            })

        },

        //截图

        cut: function () {

            const that = this;

            wx.canvasToTempFilePath({

                x: that.data.x,

                y: that.data.y,

                width: that.data.cut1Width,

                height: that.data.cut1Height,

                destWidth: that.data.cutWidth,

                destHeight: that.data.cutHeight,

                canvasId: 'myCanvas',

                success(res) {

                    that.triggerEvent('myevent', { cut_src: res.tempFilePath,cutWidth: that.data.cutWidth, cutHeight: that.data.cutHeight,type: "confirm" })

                }

            }, this)

        },

    }

})

image-cropper.wxss

.movableArea {width: 100%;height: auto;position: relative;background: rgba(0, 0, 0, 0.3)}

.movableBox {border: 2px dashed #fff}

.imageCropper {background: rgba(14, 13, 13, .8);position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;z-index: 1;}

.canvas {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -60%);}

 .footBox {position: fixed;left: 50%;transform: translateX(-50%);z-index: 10;width: 750rpx;bottom: 0;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);background: #ffffff;}

 .p30 {padding: 30rpx}

 .flex_around {display: -webkit-flex;display: flex;justify-content: space-around;}

 .cf {color: #fff;}

 .box_b {box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}

page.json

{

    "navigationBarTitleText": "选择照片",

    "usingComponents": {"image-cropper": "/pages/image-cropper/image-cropper"}

}

page.wxml

  <image-cropper id="cutImg" bindgetTempFilePath="getCutsrc"></image-cropper>

  <view wx:if="{{cut_src}}" class="fyj_cutDiv text-center"><image style="width:{{cutWidth}}px;height:{{cutHeight}}px" src="{{cut_src}}" mode="widthFix"></image></view>

</view>

page.js

Page({

  data: {cut_src:'',cutWidth:0,cutHeight:0,},

  onLoad: function (options) {

let that = this;

wx.chooseImage({

    count: 1,

    sizeType: ['original', 'compressed'],

    sourceType: ['album', 'camera'],

    success(res) {

        let val = {cropScale: "1:1",imgHeight: "750",imgSrc: res.tempFilePaths[0],imgWidth: "750",}

        if (that.selectComponent("#cutImg")) {that.selectComponent("#cutImg").setPageData(val)}

    }

})

  },

  getCutsrc:function(e){

        console.log(e);

        this.setData({cut_src: e.detail.cut_src,cutWidth: e.detail.cutWidth,cutHeight: e.detail.cutHeight})}

})