uni-app(图片裁剪插件)

<template>
    <view class="page page-fill">
        <view class="page-body uni-content-info">
            <view class='cropper-content'>
                <view v-if="isShowImg" class="uni-corpper myDistance" :style="'width:'+cropperInitW+'px;height:'+cropperInitH+'px;background:#000'">
                    <view class="uni-corpper-content" :style="'width:'+cropperW+'px;height:'+cropperH+'px;left:'+cropperL+'px;top:'+cropperT+'px'">
                        <image :src="imageSrc" class="myImage" :style="'width:'+cropperW+'px;height:'+cropperH+'px'"></image>
                        <view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove" @touchmove.stop="contentMoveing"
                         @touchend.stop="contentTouchEnd" :style="'left:'+cutL+'px;top:'+cutT+'px;right:'+cutR+'px;bottom:'+cutB+'px'">
                            <view class="uni-cropper-view-box">
                                <view class="uni-cropper-dashed-h"></view>
                                <view class="uni-cropper-dashed-v"></view>
                                <view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
                                <view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
                                <view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
                                <view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
                                <view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
                                <view class="uni-cropper-point point-tr" data-drag="topTight"></view>
                                <view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
                                <view class="uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
                                <view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"
                                 @touchend.stop="dragEnd"></view>
                                <view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view>
                                <view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
                                <view class="uni-cropper-point point-lt" data-drag="leftTop"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- <view class='cropper-config'>
                <button type="primary reverse" @click="getImage" style='margin-top: 30upx;'> 选择图片 </button>
                <button type="warn" @click="getImageInfo" style='margin-top: 30upx;'> 点击生成图片 </button>
            </view> -->
            <view class="footer-opertor">
                <view class="opertor-words" @click="getImage">
                    重新选择
                </view>
                <view class="opertor-words" @click="getImageInfo">
                    确认上传
                </view>
            </view>
            <canvas canvas-id="myCanvas" :style="'position:absolute;border: 1px solid red; width:'+imageW+'px;height:'+imageH+'px;top:-9999px;left:-9999px;'"></canvas>
        </view>
        <!-- <page-foot :name="name"></page-foot> -->
    </view>
</template>

<script>
    let sysInfo = uni.getSystemInfoSync();
    let SCREEN_WIDTH = sysInfo.screenWidth
    let PAGE_X, // 手按下的x位置
        PAGE_Y, // 手按下y的位置 
        PR = sysInfo.pixelRatio, // dpi
        T_PAGE_X, // 手移动的时候x的位置
        T_PAGE_Y, // 手移动的时候Y的位置
        CUT_L, // 初始化拖拽元素的left值
        CUT_T, // 初始化拖拽元素的top值
        CUT_R, // 初始化拖拽元素的
        CUT_B, // 初始化拖拽元素的
        CUT_W, // 初始化拖拽元素的宽度
        CUT_H, //  初始化拖拽元素的高度
        IMG_RATIO, // 图片比例
        IMG_REAL_W, // 图片实际的宽度
        IMG_REAL_H, // 图片实际的高度
        DRAFG_MOVE_RATIO = 1, //移动时候的比例,
        INIT_DRAG_POSITION = 100, // 初始化屏幕宽度和裁剪区域的宽度之差，用于设置初始化裁剪的宽度
        DRAW_IMAGE_W = sysInfo.screenWidth // 设置生成的图片宽度
    import topheader from "../../common/common.js";
    export default {
        data() {
            return {
                imageSrc: '',
                isShowImg: false,
                // 初始化的宽高
                cropperInitW: SCREEN_WIDTH,
                cropperInitH: SCREEN_WIDTH,
                // 动态的宽高
                cropperW: SCREEN_WIDTH,
                cropperH: SCREEN_WIDTH,
                // 动态的left top值
                cropperL: 0,
                cropperT: 0,
                transL: 0,
                transT: 0,
                // 图片缩放值
                scaleP: 0,
                imageW: 0,
                imageH: 0,
                // 裁剪框 宽高
                cutL: 0,
                cutT: 0,
                cutB: SCREEN_WIDTH,
                cutR: '100%',
                qualityWidth: DRAW_IMAGE_W,
                innerAspectRadio: DRAFG_MOVE_RATIO
            }
        },
        onLoad: function(query) {
            var imageSrc = query.imgurl;
            console.log(imageSrc);
            this.imageSrc = imageSrc;
            var globalUser = uni.getStorageSync('userInfo')
            this.globalUser = globalUser;
        },
        mounted: function() {
            this.loadImage();
        },
        methods: {
            setData: function(obj) {
                let that = this;
                Object.keys(obj).forEach(function(key) {
                    that.$set(that.$data, key, obj[key])
                });
            },
            getImage: function() {
                var _this = this
                uni.chooseImage({
                    success: function(res) {
                        _this.setData({
                            imageSrc: res.tempFilePaths[0],
                        })
                        _this.loadImage();
                    },
                })
            },
            loadImage: function() {
                var _this = this
                uni.showLoading({
                    title: '图片加载中...',
                })
                uni.getImageInfo({
                    src: _this.imageSrc,
                    success: function success(res) {
                        IMG_RATIO = res.width / res.height
                        if (IMG_RATIO >= 1) {
                            IMG_REAL_W = SCREEN_WIDTH
                            IMG_REAL_H = SCREEN_WIDTH / IMG_RATIO
                        } else {
                            IMG_REAL_W = SCREEN_WIDTH * IMG_RATIO
                            IMG_REAL_H = SCREEN_WIDTH
                        }
                        let minRange = IMG_REAL_W > IMG_REAL_H ? IMG_REAL_W : IMG_REAL_H
                        INIT_DRAG_POSITION = minRange > INIT_DRAG_POSITION ? INIT_DRAG_POSITION : minRange
                        // 根据图片的宽高显示不同的效果   保证图片可以正常显示
                        if (IMG_RATIO >= 1) {
                            let cutT = Math.ceil((SCREEN_WIDTH / IMG_RATIO - (SCREEN_WIDTH / IMG_RATIO - INIT_DRAG_POSITION)) / 2);
                            let cutB = cutT;
                            let cutL = Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH + INIT_DRAG_POSITION) / 2);
                            let cutR = cutL;
                            _this.setData({
                                cropperW: SCREEN_WIDTH,
                                cropperH: SCREEN_WIDTH / IMG_RATIO,
                                // 初始化left right
                                cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
                                cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2),
                                cutL: cutL,
                                cutT: cutT,
                                cutR: cutR,
                                cutB: cutB,
                                // 图片缩放值
                                imageW: IMG_REAL_W,
                                imageH: IMG_REAL_H,
                                scaleP: IMG_REAL_W / SCREEN_WIDTH,
                                qualityWidth: DRAW_IMAGE_W,
                                innerAspectRadio: IMG_RATIO
                            })
                        } else {
                            let cutL = Math.ceil((SCREEN_WIDTH * IMG_RATIO - (SCREEN_WIDTH * IMG_RATIO)) / 2);
                            let cutR = cutL;
                            let cutT = Math.ceil((SCREEN_WIDTH - INIT_DRAG_POSITION) / 2);
                            let cutB = cutT;
                            _this.setData({
                                cropperW: SCREEN_WIDTH * IMG_RATIO,
                                cropperH: SCREEN_WIDTH,
                                // 初始化left right
                                cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2),
                                cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
                                cutL: cutL,
                                cutT: cutT,
                                cutR: cutR,
                                cutB: cutB,
                                // 图片缩放值
                                imageW: IMG_REAL_W,
                                imageH: IMG_REAL_H,
                                scaleP: IMG_REAL_W / SCREEN_WIDTH,
                                qualityWidth: DRAW_IMAGE_W,
                                innerAspectRadio: IMG_RATIO
                            })
                        }
                        _this.setData({
                            isShowImg: true
                        })
                    },
                    complete() {
                        console.log(123);
                        uni.hideLoading();
                    }
                })
            },
            // 拖动时候触发的touchStart事件
            contentStartMove(e) {
                PAGE_X = e.touches[0].pageX
                PAGE_Y = e.touches[0].pageY
            },
            // 拖动时候触发的touchMove事件
            contentMoveing(e) {
                var _this = this
                var dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
                var dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
                // 左移
                if (dragLengthX > 0) {
                    if (this.cutL - dragLengthX < 0) dragLengthX = this.cutL
                } else {
                    if (this.cutR + dragLengthX < 0) dragLengthX = -this.cutR
                }
                if (dragLengthY > 0) {
                    if (this.cutT - dragLengthY < 0) dragLengthY = this.cutT
                } else {
                    if (this.cutB + dragLengthY < 0) dragLengthY = -this.cutB
                }
                this.setData({
                    cutL: this.cutL - dragLengthX,
                    cutT: this.cutT - dragLengthY,
                    cutR: this.cutR + dragLengthX,
                    cutB: this.cutB + dragLengthY
                })
                PAGE_X = e.touches[0].pageX
                PAGE_Y = e.touches[0].pageY
            },
            contentTouchEnd() {},
            // 获取图片
            getImageInfo() {
                var _this = this;
                uni.showLoading({
                    title: '图片生成中...',
                });

                // 将图片写入画布
                const ctx = uni.createCanvasContext('myCanvas');
                ctx.drawImage(_this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H);
                ctx.draw(true, () => {
                    // 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题 canvasT = (_this.cutT / _this.cropperH) * (_this.imageH / pixelRatio)
                    var canvasW = ((_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW) * IMG_REAL_W;
                    var canvasH = ((_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH) * IMG_REAL_H;
                    var canvasL = (_this.cutL / _this.cropperW) * IMG_REAL_W;
                    var canvasT = (_this.cutT / _this.cropperH) * IMG_REAL_H;
                    uni.canvasToTempFilePath({
                        x: canvasL,
                        y: canvasT,
                        width: canvasW,
                        height: canvasH,
                        destWidth: canvasW,
                        destHeight: canvasH,
                        quality: 0.5,
                        canvasId: 'myCanvas',
                        success: function(res) {
                            uni.hideLoading();
                            // 成功获得地址的地方
                            var tempFacePath = res.tempFilePath;
                            // 截取到新的像以后，就进行上传
                            uni.showLoading({
                                mask: true
                            })
                        
                            uni.uploadFile({
                                url: topheader.urls + '/user/uploadFace' + topheader.qqurls + '&userId=' + _this.globalUser.id,
                                filePath: tempFacePath,
                                header: {
                                    "headerUserId": _this.globalUser.id,
                                    "headerUserToken": _this.globalUser.userUniqueToken
                                },
                                name: 'file',
                                success: (res) => {
                                    // 注意，这里获得是一个string，需要转换一下
                                    console.log(res);
                                    var resDataStr = res.data;
                                    var resData = JSON.parse(resDataStr);

                                    if (resData.status == 200) {
                                        uni.hideLoading();
                                        var userInfo = resData.data;
                                        uni.setStorageSync('userInfo', userInfo);
                                        uni.navigateBack({
                                            delta: 1
                                        });
                                    } else if (resData.status == 500 || resData.status == 502) {
                                        uni.showToast({
                                            title: res.data.msg,
                                            image: "../../static/icos/error.png",
                                            duration: 2000
                                        })
                                    }
                                },
                                complete() {
                                    uni.hideLoading();
                                }
                            });
                        }
                    });
                });
            },
            // 设置大小的时候触发的touchStart事件
            dragStart(e) {
                T_PAGE_X = e.touches[0].pageX
                T_PAGE_Y = e.touches[0].pageY
                CUT_L = this.cutL
                CUT_R = this.cutR
                CUT_B = this.cutB
                CUT_T = this.cutT
            },
            // 设置大小的时候触发的touchMove事件
            dragMove(e) {
                var _this = this
                var dragType = e.target.dataset.drag
                switch (dragType) {
                    case 'right':
                        var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
                        if (CUT_R + dragLength < 0) dragLength = -CUT_R
                        this.setData({
                            cutR: CUT_R + dragLength
                        })
                        break;
                    case 'left':
                        var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
                        if (CUT_L - dragLength < 0) dragLength = CUT_L
                        if ((CUT_L - dragLength) > (this.cropperW - this.cutR)) dragLength = CUT_L - (this.cropperW - this.cutR)
                        this.setData({
                            cutL: CUT_L - dragLength
                        })
                        break;
                    case 'top':
                        var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
                        if (CUT_T - dragLength < 0) dragLength = CUT_T
                        if ((CUT_T - dragLength) > (this.cropperH - this.cutB)) dragLength = CUT_T - (this.cropperH - this.cutB)
                        this.setData({
                            cutT: CUT_T - dragLength
                        })
                        break;
                    case 'bottom':
                        var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
                        if (CUT_B + dragLength < 0) dragLength = -CUT_B
                        this.setData({
                            cutB: CUT_B + dragLength
                        })
                        break;
                    case 'rightBottom':
                        var dragLengthX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
                        var dragLengthY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
                        if (CUT_B + dragLengthY < 0) dragLengthY = -CUT_B
                        if (CUT_R + dragLengthX < 0) dragLengthX = -CUT_R
                        let cutB = CUT_B + dragLengthY;
                        let cutR = CUT_R + dragLengthX;
                        this.setData({
                            cutB: cutB,
                            cutR: cutR
                        })
                        break;
                    default:
                        break;
                }
            }
        }
    }
</script>

<style>
    @import url('./uploadimg.css');
</style>