cropimg.vue

<template>
    <div class="crop-wrapper">
        <!-- 示例图片 -->
        <div class="crop-left">
            <div class="crop-preview-wrapper">
                <div class="crop-preview">
                    <img :src="demoImg" class="preview-img" />
                </div>
                <span>示例图片</span>
            </div>
        </div>
        <!-- 图片容器 -->
        <div class="crop-right">
            <div class="crop-img-container"
                draggable="false"
                @mousewheel="scaleImg"
                @drag="preventDefault"
                @dragstart="preventDefault"
                @dragend="preventDefault"
                @dragleave="preventDefault"
                @dragover="preventDefault"
                @dragenter="preventDefault"
                @drop="preventDefault"
                @mousedown="imgStartMove"
                @mousemove="imgMove"
                @mouseup="createImg"
                @mouseout="createImg"
                @touchstart="imgStartMove"
                @touchmove="imgMove"
                @touchend="createImg"
                @touchcancel="createImg">
                <img :src="sourceImgUrl" alt="" :style="sourceImgStyle" class="crop-img"
                    ref="img"/>
                <span class="crop-dash dashed-h"></span>
                <span class="crop-dash dashed-v"></span>
                <div class="crop-img-shade crop-img-shade-1" :style="sourceImgShadeStyle"></div>
                <div class="crop-img-shade crop-img-shade-2" :style="sourceImgShadeStyle"></div>
            </div>
            <div class="crop-range">
                <!-- <input type="range" :value="scale.range" step="1" min="0" max="100" @mousemove="zoomChange" :disabled="isLimW" />
                <i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" class="crop-icon crop-icon-minus"></i>
                <i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="crop-icon crop-icon-plus"></i>
                <i @click="rotateImg" class="crop-icon-rotate">↻</i> -->
                <!-- rotate -->
                <input type="range" :value="scale.range" step="1" min="0" max="100" @mousemove="zoomChange" v-show="false" :disabled="isLimW" />
                <i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="crop-feature-icon crop-zoomin"></i><!-- el-icon-zoom-in -->
                <i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" class="crop-feature-icon crop-zoomout"></i><!-- el-icon-zoom-out -->
                <i @click="rotateImg" class="crop-feature-icon crop-rorate"></i>
            </div>
            <canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
        </div>
    </div>
</template>

<script>
    import mimes from '../../../utils/mimes'
    import data2blob from '../../../utils/data2blob'
    import demoImg from '@/assets/img/manage/demo.png'
    export default {
        props: {
            profiles: {
                'default': null
            },
            // 域，上传文件name，触发事件会带上（如果一个页面多个图片上传控件，可以做区分
            field: {
                type: String,
                'default': 'avatar'
            },
            // 显示该控件与否
            value: {
                'default': true
            },
            // 剪裁图片的宽
            width: {
                type: Number,
                default: 240
            },
            // 剪裁图片的高
            height: {
                type: Number,
                default: 240
            },
            // 不显示旋转功能
            noRotate: {
                type: Boolean,
                default: true
            },
            // 图片上传格式
            imgFormat: {
                type: String,
                'default': 'png'
            },
            // 图片背景 jpg情况下生效
            imgBgc: {
                type: String,
                'default': '#fff'
            },
        },
        data() {
            let that = this,
                {
                    imgFormat,
                    langType,
                    width,
                    height
                } = that,
                isSupported = true,
                allowImgFormat = [
                    'jpg',
                    'png'
                ],
                tempImgFormat = allowImgFormat.indexOf(imgFormat) === -1 ? 'jpg' : imgFormat,
                mime = mimes[tempImgFormat];
            // 规范图片格式
            that.imgFormat = tempImgFormat;

            if (typeof FormData != 'function') {
                isSupported = false;
            }
            return {
                isLimW: false,
                // 图片的mime
                mime,

                // 浏览器是否支持该控件
                isSupported,

                // 浏览器是否支持触屏事件
                isSupportTouch: document.hasOwnProperty("ontouchstart"),

                // 需求图宽高比
                ratio: width / height,

                // 原始图片
                originImg: '',
                originProps: {
                    width: 0,
                    height: 0
                },
                // 原图地址、生成图片地址
                sourceImg: null,
                sourceImgUrl: '',
                createImgUrl: '',

                // 原图片拖动事件初始值
                sourceImgMouseDown: {
                    on: false,
                    mX: 0, //鼠标按下的坐标
                    mY: 0,
                    x: 0, //scale原图坐标
                    y: 0
                },

                // 生成图片预览的容器大小
                previewContainer: {
                    width: 100,
                    height: 100
                },

                // 原图容器宽高
                sourceImgContainer: { // sic
                    width: 288,
                    height: 244 // 如果生成图比例与此一致会出现bug，先改成特殊的格式吧，哈哈哈
                },

                // 原图展示属性
                scale: {
                    zoomAddOn: false, //按钮缩放事件开启
                    zoomSubOn: false, //按钮缩放事件开启
                    range: 1, //最大100

                    x: 0,
                    y: 0,
                    width: 0,
                    height: 0,
                    maxWidth: 0,
                    maxHeight: 0,
                    minWidth: 0, //最宽
                    minHeight: 0,
                    naturalWidth: 0, //原宽
                    naturalHeight: 0
                },
                newScale: 0,
                demoImg: demoImg
            }
        },
        computed: {
            // 进度条样式
            progressStyle() {
                let {
                    progress
                } = this;
                return {
                    width: progress + '%'
                }
            },
            // 原图样式
            sourceImgStyle() {
                let {
                        scale,
                        sourceImgMasking,
                        width,
                        height
                    } = this,
                    top = scale.y + sourceImgMasking.y + 'px',
                    left = scale.x + sourceImgMasking.x + 'px';
                this.isLimW = false;
                if(scale.naturalWidth <= width || scale.naturalWidth - width <= 4) {
                    this.isLimW = true;
                }
                return {
                    top,
                    left,
                    width: scale.width + 'px',
                    height: scale.height + 'px',// 兼容 Opera
                }
            },
            // 原图蒙版属性
            sourceImgMasking() {
                let {
                        width,
                        height,
                        ratio,
                        sourceImgContainer
                    } = this,
                    sic = sourceImgContainer,
                    sicRatio = sic.width / sic.height, // 原图容器宽高比
                    x = 0,
                    y = 0,
                    w = sic.width,
                    h = sic.height,
                    scale = 1;
                if (ratio < sicRatio) {
                    scale = sic.height / height;
                    w = sic.height * ratio;
                    x = (sic.width - w) / 2;
                }
                if (ratio > sicRatio) {
                    scale = sic.width / width;
                    h = sic.width / ratio;
                    y = (sic.height - h) / 2;
                }
                return {
                    scale, // 蒙版相对需求宽高的缩放
                    x,
                    y,
                    width: w,
                    height: h
                };
            },
            // 原图遮罩样式
            sourceImgShadeStyle() {
                let {
                        sourceImgMasking,
                        sourceImgContainer
                    } = this,
                    sic = sourceImgContainer,
                    sim = sourceImgMasking,
                    w = sim.width == sic.width ? sim.width : (sic.width - sim.width) / 2,
                    h = sim.height == sic.height ? sim.height : (sic.height - sim.height) / 2;
                return {
                    width: w + 'px',
                    height: h + 'px'
                };
            },
            previewStyle() {
                let {
                        width,
                        height,
                        ratio,
                        previewContainer
                    } = this,
                    pc = previewContainer,
                    w = pc.width,
                    h = pc.height,
                    pcRatio = w / h;
                if (ratio < pcRatio) {
                    w = pc.height * ratio;
                }
                if (ratio > pcRatio) {
                    h = pc.width / ratio;
                }
                return {
                    width: w + 'px',
                    height: h + 'px'
                };
            }
        },
        watch: {
            profiles: {
                handler: 'setSourceImg',
                immediate: true
            }
        },
        created() {
            
        },
        mounted() {
        },
        methods: {
            /* 图片选择区域函数绑定
            ---------------------------------------------------------------*/
            preventDefault(e) {
                e.preventDefault();
                return false;
            },
            limTip() {
                // this.$message({
                //     type: 'info',
                //     message: ''
                // })
            },
            // 设置图片源
            setSourceImg(file) {
                if(!file) return this.$emit('src-file-set', null, null, null);
                let that = this;
                that.$emit('cropedImg', that.isSupported);
                if(!that.isSupported) return;
                that.sourceImgUrl = '';
                that.createImgUrl = '';
                if(typeof file === 'string') {
                    let image = new Image();
                        image.crossOrigin = 'Anonymous';
                        image.src = file;
                        image.onload = function() {
                            let formatFile = that.converBase64(image);
                            that.$emit('src-file-set', formatFile.name, formatFile.type, formatFile.size);
                            let fr = new FileReader();
                                fr.onload = function(e) {
                                    that.sourceImgUrl = fr.result;
                                    that.startCrop();
                                }
                                fr.readAsDataURL(formatFile);
                        }
                } else {
                    that.$emit('src-file-set', file.name, file.type, file.size);
                    let fr = new FileReader();
                        fr.onload = function(e) {
                            that.sourceImgUrl = fr.result;
                            that.startCrop();
                        }
                        fr.readAsDataURL(file);
                    
                }
            },
            // img 地址转换为 blob 对象
            convertBase64UrlToBlob(dataurl, imgName){
                var arr = dataurl.split(',');
                var mime = arr[0].match(/:(.*?);/)[1];
                var bstr = atob(arr[1]);
                var n = bstr.length; 
                var u8arr = new Uint8Array(n);
                while(n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                //转换成file对象
                return new File([u8arr], imgName, {type:mime});
            },
            // img 对象转化为base64
            converBase64(img) {
                let canvas = document.createElement("canvas");
                    canvas.width = img.width;
                    canvas.height = img.height;
                let ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                let ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
                let imgName = img.src.substring(img.src.lastIndexOf('/') + 1, img.src.length);
                let dataURL = canvas.toDataURL("image/" + ext);
                let newFileInstance = this.convertBase64UrlToBlob(dataURL, imgName);
               return newFileInstance;
            },
            // 剪裁前准备工作
            startCrop() {
                let that = this,
                    {
                        width,
                        height,
                        ratio,
                        scale,
                        sourceImgUrl,
                        originProps,
                        sourceImgMasking,
                    } = that,
                    sim = sourceImgMasking,
                    img = new Image(),
                    isUnnormal = false;
                img.src = sourceImgUrl;
                img.onload = function() {
                    let nWidth = img.naturalWidth,
                        nHeight = img.naturalHeight,
                        nRatio = nWidth / nHeight,
                        w = sim.width,
                        h = sim.height,
                        x = 0,
                        y = 0;
                    // 图片像素不达标
                    if (nWidth < (width - 80) || nHeight < (height - 80)) {
                        // that.hasError = true;
                        // that.errorMsg = '图片像素不达标' + width + '*' + height;
                        that.sourceImgUrl = '';
                        that.createImgUrl = '';
                        that.$message.info(that.$t('message.dpiNotNormal') + width + '*' + height)
                        isUnnormal = true;
                    }
                    if(isUnnormal) return;
                    if (ratio > nRatio) {
                        h = w / nRatio;
                        y = (sim.height - h) / 2;
                    }
                    if (ratio < nRatio) {
                        w = h * nRatio;
                        x = (sim.width - w) / 2;
                    }
                    originProps.width = img.width;
                    originProps.height = img.height;
                    scale.range = 0;
                    scale.x = x;
                    scale.y = y;
                    scale.width = w;
                    scale.height = h;
                    scale.minWidth = w;
                    scale.minHeight = h;
                    scale.maxWidth = nWidth * sim.scale;
                    scale.maxHeight = nHeight * sim.scale;
                    scale.naturalWidth = nWidth;
                    scale.naturalHeight = nHeight;
                    that.sourceImg = img;
                    that.originImg = img;
                    that.zoomImg(scale.range)
                    // that.createImg();
                };
                img.onerror = function() {
                    that.$message.info(that.$t('message.imgloaderror'))
                }
            },
            // 鼠标按下图片准备移动
            imgStartMove(e) {
                e.preventDefault();
                // 支持触摸事件，则鼠标事件无效
                if(this.isSupportTouch && !e.targetTouches){
                    return false;
                }
                let et = e.targetTouches ? e.targetTouches[0] : e,
                    {
                        sourceImgMouseDown,
                        scale
                    } = this,
                    simd = sourceImgMouseDown;
                simd.mX = et.screenX;
                simd.mY = et.screenY;
                simd.x = scale.x;
                simd.y = scale.y;
                simd.on = true;
            },
            // 鼠标按下状态下移动，图片移动
            imgMove(e) {
                e.preventDefault();
                // 支持触摸事件，则鼠标事件无效
                if(this.isSupportTouch && !e.targetTouches){
                    return false;
                }
                let et = e.targetTouches ? e.targetTouches[0] : e,
                    {
                        sourceImgMouseDown: {
                            on,
                            mX,
                            mY,
                            x,
                            y
                        },
                        scale,
                        sourceImgMasking
                    } = this,
                    sim = sourceImgMasking,
                    nX = et.screenX,
                    nY = et.screenY,
                    dX = nX - mX,
                    dY = nY - mY,
                    rX = x + dX,
                    rY = y + dY;
                if (!on) return;
                if (rX > 0) {
                    rX = 0;
                }
                if (rY > 0) {
                    rY = 0;
                }
                if (rX < sim.width - scale.width) {
                    rX = sim.width - scale.width;
                }
                if (rY < sim.height - scale.height) {
                    rY = sim.height - scale.height;
                }
                scale.x = rX;
                scale.y = rY;
            },
            // 顺时针旋转图片
            rotateImg(e) {
                let {
                        mime,
                        sourceImg,
                        scale: {
                            naturalWidth,
                            naturalHeight,
                        }
                    } = this,
                    width = naturalHeight,
                    height = naturalWidth,
                    canvas = this.$refs.canvas,
                    ctx = canvas.getContext('2d');
                canvas.width = width;
                canvas.height = height;
                ctx.clearRect(0, 0, width, height);

                ctx.fillStyle = 'rgba(0,0,0,0)';
                ctx.fillRect(0, 0, width, height);

                ctx.translate(width, 0);
                ctx.rotate(Math.PI * 90 / 180);

                ctx.drawImage(sourceImg, 0, 0, naturalWidth, naturalHeight);
                let imgUrl = canvas.toDataURL(mime);

                this.sourceImgUrl = imgUrl;
                this.startCrop();
            },

            // 按钮按下开始放大
            startZoomAdd(e) {
                if(this.isLimW) return;
                let that = this,
                    {
                        scale
                    } = that;
                scale.zoomAddOn = true;

                function zoom() {
                    if (scale.zoomAddOn) {
                        let range = scale.range >= 100 ? 100 : ++scale.range;
                        that.zoomImg(range);
                        setTimeout(function() {
                            zoom();
                        }, 60);
                    }
                }
                zoom();
            },
            // 按钮松开或移开取消放大
            endZoomAdd(e) {
                this.scale.zoomAddOn = false;
            },
            // 按钮按下开始缩小
            startZoomSub(e) {
                if(this.isLimW) return;
                let that = this,
                    {
                        scale
                    } = that;
                scale.zoomSubOn = true;

                function zoom() {
                    if (scale.zoomSubOn) {
                        let range = scale.range <= 0 ? 0 : --scale.range;
                        that.zoomImg(range);
                        setTimeout(function() {
                            zoom();
                        }, 60);
                    }
                }
                zoom();
            },
            // 按钮松开或移开取消缩小
            endZoomSub(e) {
                let {
                    scale
                } = this;
                scale.zoomSubOn = false;
            },
            zoomChange(e) {
                this.zoomImg(e.target.value);
            },
            scaleImg(e) {
                if(this.isLimW) return;
                // 判断ie
                if(e.wheelDelta) {
                    if(e.wheelDelta > 0) {  // 滚轮向上 放
                        this.scale.range += 1;
                        this.startZoomAdd();
                        this.endZoomAdd();
                    } 
                    if(e.wheelDelta < 0) {  // 滚轮向下 缩
                        this.scale.range -= 1;
                        this.startZoomSub();
                        this.endZoomSub();
                    }
                } else if(e.detail) {
                    if(e.detail > 0) {
                        this.scale.range += 1;
                        this.startZoomAdd();
                        this.endZoomAdd();
                    }
                    if(e.detail < 0) {
                        this.scale.range -= 1;
                        this.startZoomSub();
                        this.endZoomSub();
                    }
                }
            },
            // 缩放原图
            zoomImg(newRange) {
                let that = this,
                    {
                        sourceImgMasking,
                        sourceImgMouseDown,
                        scale
                    } = this,
                    {
                        maxWidth,
                        maxHeight,
                        minWidth,
                        minHeight,
                        width,
                        height,
                        x,
                        y,
                        range
                    } = scale,
                    sim = sourceImgMasking,
                    // 蒙版宽高
                    sWidth = sim.width,
                    sHeight = sim.height,
                    // 新宽高
                    nWidth = minWidth + (maxWidth - minWidth) * newRange / 100,
                    nHeight = minHeight + (maxHeight - minHeight) * newRange / 100,
                    // 新坐标（根据蒙版中心点缩放）
                    nX = sWidth / 2 - (nWidth / width) * (sWidth / 2 - x),
                    nY = sHeight / 2 - (nHeight / height) * (sHeight / 2 - y);
                // 判断新坐标是否超过蒙版限制
                if (nX > 0) {
                    nX = 0;
                }
                if (nY > 0) {
                    nY = 0;
                }
                if (nX < sWidth - nWidth) {
                    nX = sWidth - nWidth;
                }
                if (nY < sHeight - nHeight) {
                    nY = sHeight - nHeight;
                }

                // 赋值处理
                scale.x = nX;
                scale.y = nY;
                scale.width = nWidth;
                scale.height = nHeight;
                scale.range = newRange;
                that.newScale = nWidth / that.originProps.width;
                setTimeout(function() {
                    if (scale.range == newRange) {
                        that.createImg();
                    }
                }, 300);
            },
            // 生成需求图片
            createImg(e) {
                let that = this,
                    {
                        isSupported,
                        imgFormat,
                        imgBgc,
                        mime,
                        originImg,
                        originProps,
                        newScale,
                        sourceImg,
                        scale: {
                            x,
                            y,
                            width,
                            height,
                        },
                        sourceImgMasking: {
                            scale
                        }
                    } = that,
                    canvas = that.$refs.canvas,
                    ctx = canvas.getContext('2d');
                if (e) {
                    // 取消鼠标按下移动状态
                    that.sourceImgMouseDown.on = false;
                }
                // canvas.width = that.width;
                // canvas.height = that.height;
                // ctx.clearRect(0, 0, that.width, that.height);
                // console.log('nwidth----------------------------------->>>', that.scale.minWidth, that.scale.maxWidth, that.scale.range, that.scale.minWidth + (that.scale.maxWidth - that.scale.minWidth) * that.scale.range / 100)
                // 重新计算比例
                if(newScale == 0) {
                    newScale = (that.scale.minWidth + (that.scale.maxWidth - that.scale.minWidth) * that.scale.range / 100) / originProps.width;
                    newScale = that.width / newScale < 160 ? that.width / 160 : newScale;
                }
                canvas.width = that.width / newScale;
                canvas.height = that.height / newScale;
                ctx.clearRect(0, 0, that.width / newScale, that.height / newScale);

                // canvas.width = originProps.width;
                // canvas.height = originProps.height;
                // ctx.clearRect(0, 0, originProps.width, originProps.height);

                if(imgFormat == 'png'){
                    ctx.fillStyle = 'rgba(0,0,0,0)';
                } else{
                    // 如果jpg 为透明区域设置背景，默认白色
                    ctx.fillStyle = imgBgc;
                }
                // ctx.fillRect(0, 0, that.width, that.height);

                ctx.fillRect(0, 0, that.width / newScale, that.height / newScale);

                // ctx.fillRect(0, 0, originProps.width, originProps.height);

                // ctx.drawImage(sourceImg, x / scale, y / scale, width / scale, height / scale);

                // 处理原始位置
                let _x = (typeof(newScale) === 'number' && newScale > 0) ? Math.abs(x / newScale) : 0;
                let _y = (typeof(newScale) === 'number' && newScale > 0) ? Math.abs(y / newScale) : 0;

                ctx.drawImage(originImg, _x, _y, that.width / newScale, that.height / newScale, 0, 0, that.width / newScale, that.height / newScale);
                // ctx.drawImage(originImg, -100, -100, 240,240);
                that.createImgUrl = canvas.toDataURL(mime);

                // 提交父级文件对象
                let blobUrl = '',
                    fmData = new FormData();
                    blobUrl = data2blob(that.createImgUrl, mime)
                    fmData.append(that.field, blobUrl, that.field + '.' + imgFormat);
                this.$emit('cropedImg', isSupported, fmData, URL.createObjectURL(blobUrl));
            },
        }
    }
</script>

<style scoped>
    @-webkit-keyframes vicp_progress {
        0% {
            background-position-y: 0;
        }
        100% {
            background-position-y: 40px;
        }
    }
    @keyframes vicp_progress {
        0% {
            background-position-y: 0;
        }
        100% {
            background-position-y: 40px;
        }
    }

    @-webkit-keyframes vicp {
        0% {
            opacity: 0;
            -webkit-transform: scale(0) translatey(-60px);
                    transform: scale(0) translatey(-60px);
        }
        100% {
            opacity: 1;
            -webkit-transform: scale(1) translatey(0);
                    transform: scale(1) translatey(0);
        }
    }

    @keyframes vicp {
        0% {
            opacity: 0;
            -webkit-transform: scale(0) translatey(-60px);
                    transform: scale(0) translatey(-60px);
        }
        100% {
            opacity: 1;
            -webkit-transform: scale(1) translatey(0);
                    transform: scale(1) translatey(0);
        }
    }

    .crop-wrapper {
        overflow: hidden;
    }

    .crop-left {
        float: left;
        width: 48%;
    }

    .crop-right {
        float: right;
        text-align: center;
        overflow: hidden;
        width: 50%;
    }

    .crop-preview-wrapper {
        text-align: center;
    }

    .crop-preview-wrapper span {
        display: inline-block;
        font-size: 18px;
        margin-top: 8px;
    }

    .crop-preview {
        width: 244px;
        height: 244px;
        margin: 0 auto;
        position: relative;
    }

    .crop-dash {
        border: 0 dashed #eee;
        display: block;
        opacity: .7;
        position: absolute;
    }

    .dashed-h {
        border-bottom-width: 1px;
        border-top-width: 1px;
        height: 33.3333333333%;
        left: 0;
        top: 33.3333333333%;
        width: 100%;
    }

    .dashed-v {
        border-left-width: 1px;
        border-right-width: 1px;
        height: 100%;
        left: 33.3333333333%;
        top: 0;
        width: 33.3333333333%;
    }

    .preview-img {
        max-width: 100%;
        max-height: 100%;
        width: 100% !important;
        height: 100% !important;
    }

    .crop-img-container {
        position: relative;
        display: block;
        width: 288px;
        height: 244px;
        background-color: #fff;
        margin: 0 auto;
        overflow: hidden;
        cursor: move;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .crop-img {
        position: absolute;
        display: block;
        /* cursor: move;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none; */
    }

    .crop-img-shade  {
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
        position: absolute;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .crop-img-shade-1 {
        top: 0;
        left: 0;
    }

    .crop-img-shade-2 {
        bottom: 0;
        right: 0;
    }

    .crop-range {
        position: relative;
        margin: 10px auto 20px auto;
        /* width: 288px; */
        height: 18px;
        text-align: right;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .crop-range input[type=range] {
        display: block;
        padding-top: 5px;
        margin: 0 auto;
        width: 208px;
        height: 8px;
        vertical-align: top;
        position: relative;
        left: -12px;
        background: transparent;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
    }

    .crop-icon {
        position: absolute;
        top: 0;
        width: 18px;
        height: 18px;
        border-radius: 100%;
        background-color: rgb(112, 99, 99);
        cursor: pointer;
    }

    .crop-icon:before {
        position: absolute;
        content: '';
        display: block;
        left: 3px;
        top: 8px;
        width: 12px;
        height: 2px;
        background-color: #fff;
    }

    .crop-icon-minus {
        left: 0;
    }

    .crop-icon-plus {
        right: 24px;
    }

    .crop-icon-plus:after {
        position: absolute;
        content: '';
        display: block;
        top: 3px;
        left: 8px;
        width: 2px;
        height: 12px;
        background-color: #fff;
    }

    .crop-icon-rotate {
        position: absolute;
        right: 0;
        top: 0;
        width: 18px;
        height: 18px;
        line-height: 16px;
        font-weight: bold;
        font-style: normal;
        text-align: center;
        color: #fff;
        border-radius: 100%;
        background-color: rgb(112, 99, 99);
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

    .crop-feature-icon {
        display: inline-block;
        width: 18px;
        height: 18px;
        /* font-size: 18px; */
        margin-left: 20px;
        cursor: pointer;
    }

    .crop-feature-icon:first-of-type {
        margin-left: 0;
    }

    .crop-zoomin {
        background: url(~@/assets/img/manage/zoomin.png);
        background-size: cover;
    }

    .crop-zoomout {
        background: url(~@/assets/img/manage/zoomout.png);
        background-size: cover;
    }

    .crop-rorate {
        background: url(~@/assets/img/manage/rorate.png);
        background-size: cover;
    }

    .crop-rorate img {
        max-width: 100%;
        max-height: 100%;
        width: 100%;
    }

    .crop-range input[type=range]:focus {
        outline: none;
    }

    .crop-range input[type=range]::-webkit-slider-thumb {
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
        -webkit-appearance: none;
            appearance: none;
        margin-top: -3px;
        width: 12px;
        height: 12px;
        background-color: #3bb8ff;
        border-radius: 100%;
        border: none;
        -webkit-transition: 0.2s;
            transition: 0.2s;
    }

    .crop-range input[type=range]::-moz-range-thumb {
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
        -moz-appearance: none;
            appearance: none;
        width: 12px;
        height: 12px;
        background-color: #3bb8ff;
        border-radius: 100%;
        border: none;
        -webkit-transition: 0.2s;
            transition: 0.2s;
    }

    .crop-range input[type=range]::-ms-thumb {
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
        appearance: none;
        width: 12px;
        height: 12px;
        background-color: #3bb8ff;
        border: none;
        border-radius: 100%;
        -webkit-transition: 0.2s;
            transition: 0.2s;
    }

    .crop-range input[type=range]:active::-moz-range-thumb,
    .crop-range input[type=range]:active::-ms-thumb {
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
        width: 14px;
        height: 14px;
    }

    .crop-range input[type=range]:active::-webkit-slider-thumb {
        -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
        margin-top: -4px;
        width: 14px;
        height: 14px;
    }
    .crop-range input[type=range]::-webkit-slider-runnable-track {
        -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
        width: 100%;
        height: 6px;
        cursor: pointer;
        border-radius: 2px;
        border: none;
        background-color: rgba(59, 184, 255, 0.3);
    }
    .crop-range input[type=range]::-moz-range-track {
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
        width: 100%;
        height: 6px;
        cursor: pointer;
        border-radius: 2px;
        border: none;
        background-color: rgba(59, 184, 255, 0.3);
    }
    .crop-range input[type=range]::-ms-track {
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
        width: 100%;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        color: transparent;
        height: 6px;
        border-radius: 2px;
        border: none;
    }
    .crop-range input[type=range]::-ms-fill-lower {
        background-color: rgba(59, 184, 255, 0.3);
    }
    .crop-range input[type=range]::-ms-fill-upper {
        background-color: rgba(59, 184, 255, 0.15);
    }
    .crop-range input[type=range]:focus::-webkit-slider-runnable-track {
        background-color: rgba(59, 184, 255, 0.5);
    }
    .crop-range input[type=range]:focus::-moz-range-track {
        background-color: rgba(59, 184, 255, 0.5);
    }
    .crop-range input[type=range]:focus::-ms-fill-lower {
        background-color: rgba(59, 184, 255, 0.45);
    }
    .crop-range input[type=range]:focus::-ms-fill-upper {
        background-color: rgba(59, 184, 255, 0.25);
    }
</style>