novelai第二弹，图生图功能对接小程序-----裁剪框的开发

裁剪代码

<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'>

    <button bindtap='submit'>确定</button>
    
    <button class="button" catchtap='upload'>上传</button>
</view>

//获取应用实例
const app = getApp()
Page({
    data: {
        src: '',
        width: 256, //宽度
        height: 384, //高度
        max_width: 256,
        max_height: 256,
        disable_width:true,
        disable_height:true,
        disable_rotate: true, //是否禁用旋转
        disable_ratio: false, //锁定比例
        limit_move: true, //是否限制移动
    },
    onLoad: function (options) {
        console.log(options)
            this.cropper = this.selectComponent("#image-cropper");
            this.setData({
                src: options.imgSrc
            });
            if(!options.imgSrc){
                this.cropper.upload(); //上传图片
            }
            this.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.chooseMedia({
                count: 1,
                sizeType: ['original'],
                sourceType: ['album', 'camera'],
                success(res) {
                    console.log(res)
                    wx.showLoading({
                        title: '加载中',
                    })
                    const tempFilePaths = res.tempFiles[0].tempFilePath
                    //重置图片角度、缩放、位置
                    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]);
        },
})

还可以进行传值操作，可以把需要的裁剪框尺寸输入传过去，完成裁剪框的大小变化