1.使用目的：实现按照图片原尺寸进行裁剪

2.裁剪弹框效果图，左侧截取区域，右侧显示已截取的图片

裁剪效果图.png

3.遇到的问题

one. 后台给的地址出现跨域问题，后台也要配合允许跨域例如

 //处理跨域1
imgTrick(src) {
    const img = new Image();
    img.crossOrigin = '*';
    img.src = src + '?timeStamp=' + new Date();
    img.onload = function() {};
    return img.src;
},
//处理跨域2
imgTrick2(src) {
    let image = new Image();
    image.src = src + '?timeStamp=' + Math.random();
    image.crossOrigin = 'Anonymous'; // 支持跨域图片
    image.onload = function() {
        let canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        let ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0, image.width, image.height);
        canvas.toDataURL('image/png'); // 可选其他值 image/jpeg
    } ;
}

two. 如何按照原始图片尺寸裁剪，原图像素是8192*4464，截取1/4的不会改变原来的像素的

原图像素是8192*4464.png

1.首先获取到图片的原始宽高
getNaturalSize (url) {
    var natureSize = {};
    if(window.naturalWidth && window.naturalHeight) {
        natureSize.width = url.naturalWidth;
        natureSize.height = url.naturalHeight;
    } else {
        var img = new Image();
        img.src = url;
        img.onload = function() {
            natureSize.width = img.width;
            natureSize.height = img.height;
        };
    }
    return natureSize;
}
使用
this.pictureSize = this.getNaturalSize(img); //8192*4464
2.传给子组件
:pictureSize="pictureSize" //图片尺寸 

4.组件代码

父级使用
import capturePicture from './capturePicture.vue';

components: { 
    capturePicture
},

<capture-picture 
    ref="capturePicture"
    :pictureSize="pictureSize" //图片尺寸 
    :capturePictureProps="capturePictureProps" //图片合弹框显示开关
    @capturePictureEmit="capturePictureEmit"//得到裁剪的图片
></capture-picture>

//裁剪的图片返回
capturePictureEmit(pictureUrl){}

<template>
    <div>
        <kc-modal
            title="图片截取"
            width="80rem"
            top="6vh"
            v-modalDrag
            :visible.sync="capturePictureProps.dialog"
            append-to-body
            @open="openDialog"
            custom-class="kstp-capturePicture">
            <div class="capturePicture-container" v-loading="inloading">
                <div class="capturePicture-left">
                    <div class="capturePicture-box kd-margin-bottom" >
                        <vueCropper
                            ref="cropper"
                            :img="option.img"
                            :full="option.full"
                            :outputSize="option.size"
                            :outputType="option.outputType"
                            :autoCrop="option.autoCrop"
                            :autoCropWidth="option.autoCropWidth"
                            :autoCropHeight="option.autoCropHeight"
                            :infoTrue="option.infoTrue"
                            :maxImgSize="option.maxImgSize"
                            :centerBox="option.centerBox"
                            @realTime="realTime"
                            @imgLoad="imgLoad"
                        ></vueCropper>
                    </div>
                </div>
                <div class="capturePicture-right">
                    <div class="kd-text-center kd-margin-bottom">
                        <div class="capturePicture-downImg kd-margin-bottom">
                            <kd-magnify-three :src="downImg"></kd-magnify-three>
                        </div>
                        
                        <kc-button type="primary" @click="doStartCrop">截取</kc-button>
                        <kc-button type="primary" @click="refreshCrop" plain>重绘</kc-button>
                    </div>
                    
                </div>
            </div>
            <div class="kd-text-center">
                <kc-button type="primary" @click="doSaveClick">保存</kc-button>
            </div>
        </kc-modal>
    </div>
</template>
<script>
import { VueCropper } from 'vue-cropper';
import Util from 'utils/util.js';
export default {
    name: 'kstp-capturePicture',
    data() {
        return {
            inloading: false,
            image: 'submodule/kstp-algorithmicWarehouse/assets/sceneConfiguration/capturePicture.jpg',
            natureSize: {
                width: '',
                height: ''
            },
            // 裁剪组件的基础配置option
            option: {
                img: '',
                size: 1,
                full: true,
                outputType: 'jpeg',
                autoCrop: true,
                autoCropWidth: 400,
                autoCropHeight: 200,
                infoTrue: true,
                centerBox: true,
                maxImgSize: 0
            },
            previews: {},
            //显示裁剪的图片
            downImg: ''
        };
    },
    props: {
        capturePictureProps: {
            type: Object,
            default: () => {
                return {};
            }
        },
        pictureSize: {
            type: Object,
            default: () => { //原始图片尺寸对象
                return {};
            }
        }
    },
    components: {
        VueCropper
    },
    methods: {
        //处理跨域
        imgTrick(src) {
            const img = new Image();
            img.crossOrigin = '*';
            img.src = src + '?timeStamp=' + new Date();
            img.onload = function() {};
            return img.src;
        },
        //图片加载的回调
        imgLoad (msg) { 
            this.inloading = false;
            console.log('imgLoad', msg);
        },
        openDialog(){
            this.downImg = '';
            this.inloading = true;
            this.option.img = this.imgTrick(this.capturePictureProps.Image);
            //给到原图的宽高
            this.option.maxImgSize = this.pictureSize.width;
            console.log('给到原图的宽高', this.option.maxImgSize);
        },
        // 预览
        realTime(data) {
            this.previews = {
                ...data
            };
        },
        refreshCrop() {
            this.downImg = '';
        },
        doStartCrop(){
            this.$refs.cropper.getCropData((data) => {
                this.downImg = data;
            });
        },
        doSaveClick(){
            if(this.downImg == ''){
                Util.warningMessage('请先截取图片');
                return false;
            }
            this.$emit('capturePictureEmit', this.downImg);
        }
    }
};
</script>
<style lang="scss">
.capturePicture-container{![企业微信截图_1598519193892.png](https://img.haomeiwen.com/i8432335/d3e0a75aca1b2e8d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    display: flex;
    .capturePicture-left{
        width:70%;
        .capturePicture-box{
            width: 100%;
            height: 700px;
        }
    }
    .capturePicture-right{
        margin-left: 1%;
        width: 29%;
        .show-preview{
            height: 4rem;
            
        }
        .capturePicture-downImg{
            width: 100%;
            border: 1px solid $--border-color-content-no-selected; 
            height: 12rem;
        }
    }
}
</style>

*注 : 笔记记录