基于vue的vue-cropper 图片裁剪插件开发与遇到的问题
2020-08-27 本文已影响0人
diviner_杨
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{
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>
