diff --git a/src/components/ImageCropper/index.vue b/src/components/ImageCropper/index.vue
index c33f6ec9..2bd22c59 100644
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
@@ -1,697 +1,1415 @@
<template>
- <div class="vue-image-crop-upload" v-show="show">
- <div class="vicp-wrap">
- <div class="vicp-close" @click="off">
- <i class="vicp-icon4"></i>
- </div>
+<div class="vue-image-crop-upload" v-show="value">
+ <div class="vicp-wrap">
+ <div class="vicp-close" @click="off">
+ <i class="vicp-icon4"></i>
+ </div>
- <div class="vicp-step1" v-show="step == 1">
- <div class="vicp-drop-area"
- @dragleave="preventDefault"
- @dragover="preventDefault"
- @dragenter="preventDefault"
- @click="handleClick"
- @drop="handleChange">
- <i class="vicp-icon1" v-show="loading != 1">
- <i class="vicp-icon1-arrow"></i>
- <i class="vicp-icon1-body"></i>
- <i class="vicp-icon1-bottom"></i>
- </i>
- <span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</span>
- <span class="vicp-no-supported-hint" v-show="!isSupported">{{ lang.noSupported }}</span>
- <input type="file" v-show="false" @change="handleChange" ref="fileinput">
- </div>
- <div class="vicp-error" v-show="hasError">
- <i class="vicp-icon2"></i> {{ errorMsg }}
- </div>
- <div class="vicp-operate">
- <a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
- </div>
- </div>
+ <div class="vicp-step1" v-show="step == 1">
+ <div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
+ <i class="vicp-icon1" v-show="loading != 1">
+ <i class="vicp-icon1-arrow"></i>
+ <i class="vicp-icon1-body"></i>
+ <i class="vicp-icon1-bottom"></i>
+ </i>
+ <span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</span>
+ <span class="vicp-no-supported-hint" v-show="!isSupported">{{ lang.noSupported }}</span>
+ <input type="file" v-show="false" v-if="step == 1" @change="handleChange" ref="fileinput">
+ </div>
+ <div class="vicp-error" v-show="hasError">
+ <i class="vicp-icon2"></i> {{ errorMsg }}
+ </div>
+ <div class="vicp-operate">
+ <a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
+ </div>
+ </div>
- <div class="vicp-step2" v-if="step == 2">
- <div class="vicp-crop">
- <div class="vicp-crop-left" v-show="true">
- <div class="vicp-img-container">
- <img :src="sourceImgUrl"
- :style="sourceImgStyle"
- class="vicp-img"
- draggable="false"
- @drag="preventDefault"
- @dragstart="preventDefault"
- @dragend="preventDefault"
- @dragleave="preventDefault"
- @dragover="preventDefault"
- @dragenter="preventDefault"
- @drop="preventDefault"
- @mousedown="imgStartMove"
- @mousemove="imgMove"
- @mouseup="createImg"
- @mouseout="createImg"
- ref="img">
- <div class="vicp-img-shade vicp-img-shade-1" :style="sourceImgShadeStyle"></div>
- <div class="vicp-img-shade vicp-img-shade-2" :style="sourceImgShadeStyle"></div>
- </div>
- <div class="vicp-range">
- <input type="range" :value="scale.range" step="1" min="0" max="100" @change="zoomChange">
- <i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub"
- class="vicp-icon5"></i>
- <i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd"
- class="vicp-icon6"></i>
- </div>
- </div>
- <div class="vicp-crop-right" v-show="true">
- <div class="vicp-preview">
- <div class="vicp-preview-item">
- <img :src="createImgUrl" :style="previewStyle">
- <span>{{ lang.preview }}</span>
- </div>
- <div class="vicp-preview-item">
- <img :src="createImgUrl" :style="previewStyle" v-if="!noCircle">
- <span>{{ lang.preview }}</span>
- </div>
- </div>
- </div>
- </div>
- <div class="vicp-operate">
- <a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
- <a class="vicp-operate-btn" @click="upload" @mousedown="ripple">{{ lang.btn.save }}</a>
- </div>
- </div>
+ <div class="vicp-step2" v-if="step == 2">
+ <div class="vicp-crop">
+ <div class="vicp-crop-left" v-show="true">
+ <div class="vicp-img-container">
+ <img :src="sourceImgUrl" :style="sourceImgStyle" class="vicp-img" draggable="false"
+ @drag="preventDefault"
+ @dragstart="preventDefault"
+ @dragend="preventDefault"
+ @dragleave="preventDefault"
+ @dragover="preventDefault"
+ @dragenter="preventDefault"
+ @drop="preventDefault"
+ @touchstart="imgStartMove"
+ @touchmove="imgMove"
+ @touchend="createImg"
+ @touchcancel="createImg"
+ @mousedown="imgStartMove"
+ @mousemove="imgMove"
+ @mouseup="createImg"
+ @mouseout="createImg"
+ ref="img">
+ <div class="vicp-img-shade vicp-img-shade-1" :style="sourceImgShadeStyle"></div>
+ <div class="vicp-img-shade vicp-img-shade-2" :style="sourceImgShadeStyle"></div>
+ </div>
- <div class="vicp-step3" v-if="step == 3">
- <div class="vicp-upload">
- <span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span>
- <div class="vicp-progress-wrap">
- <span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span>
+ <div class="vicp-range">
+ <input type="range" :value="scale.range" step="1" min="0" max="100" @input="zoomChange">
+ <i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" class="vicp-icon5"></i>
+ <i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="vicp-icon6"></i>
+ </div>
+
+ <div class="vicp-rotate" v-if="!noRotate">
+ <i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i>
+ <i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i>
</div>
- <div class="vicp-error" v-show="hasError">
- <i class="vicp-icon2"></i> {{ errorMsg }}
- </div>
- <div class="vicp-success" v-show="loading === 2">
- <i class="vicp-icon3"></i> {{ lang.success }}
- </div>
- </div>
- <div class="vicp-operate">
- <a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
- <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
- </div>
- </div>
- <canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
- </div>
- </div>
+ </div>
+ <div class="vicp-crop-right" v-show="true">
+ <div class="vicp-preview">
+ <div class="vicp-preview-item" v-if="!noSquare">
+ <img :src="createImgUrl" :style="previewStyle">
+ <span>{{ lang.preview }}</span>
+ </div>
+ <div class="vicp-preview-item vicp-preview-item-circle" v-if="!noCircle">
+ <img :src="createImgUrl" :style="previewStyle">
+ <span>{{ lang.preview }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="vicp-operate">
+ <a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
+ <a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
+ </div>
+ </div>
+
+ <div class="vicp-step3" v-if="step == 3">
+ <div class="vicp-upload">
+ <span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span>
+ <div class="vicp-progress-wrap">
+ <span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span>
+ </div>
+ <div class="vicp-error" v-show="hasError">
+ <i class="vicp-icon2"></i> {{ errorMsg }}
+ </div>
+ <div class="vicp-success" v-show="loading === 2">
+ <i class="vicp-icon3"></i> {{ lang.success }}
+ </div>
+ </div>
+ <div class="vicp-operate">
+ <a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
+ <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
+ </div>
+ </div>
+ <canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
+ </div>
+</div>
</template>
<script>
- /* eslint-disable */
- import {effectRipple, data2blob} from './utils';
- import request from '@/utils/request';
- import langBag from './lang';
- const mimes = {
- 'jpg': 'image/jpeg',
- 'png': 'image/png',
- 'gif': 'image/gif',
- 'svg': 'image/svg+xml',
- 'psd': 'image/photoshop'
- };
-
- export default {
- props: {
- // 域，上传文件name，触发事件会带上（如果一个页面多个图片上传控件，可以做区分
- field: {
- type: String,
- default: 'avatar'
- },
- // 上传地址
- url: {
- type: String,
- default: ''
- },
- // 其他要上传文件附带的数据，对象格式
- params: {
- type: Object,
- default: null
- },
- // 剪裁图片的宽
- width: {
- type: Number,
- default: 200
- },
- // 剪裁图片的高
- height: {
- type: Number,
- default: 200
- },
- // 不预览圆形图片
- noCircle: {
- type: Boolean,
- default: false
- },
- // 单文件大小限制
- maxSize: {
- type: Number,
- default: 10240
- },
- // 语言类型
- langType: {
- type: String,
- 'default': 'zh'
- },
-
- },
- data() {
- let that = this,
- {
- langType,
- width,
- height
- } = that,
- isSupported = true,
- lang = langBag[langType] ? langBag[langType] : lang['zh'];
-
- if (typeof FormData != 'function') {
- isSupported = false;
- }
- return {
- show: true,
- // 图片的mime
- mime:mimes['jpg'],
- // 语言包
- lang,
- // 浏览器是否支持该控件
- isSupported,
- // 步骤
- step: 1, //1选择文件 2剪裁 3上传
- // 上传状态及进度
- loading: 0, //0未开始 1正在 2成功 3错误
- progress: 0,
- // 是否有错误及错误信息
- hasError: false,
- errorMsg: '',
- // 需求图宽高比
- ratio: width / height,
- // 原图地址、生成图片地址
- sourceImg: null,
- sourceImgUrl: '',
- createImgUrl: '',
- // 原图片拖动事件初始值
- sourceImgMouseDown: {
- on: false,
- mX: 0, //鼠标按下的坐标
- mY: 0,
- x: 0, //scale原图坐标
- y: 0
- },
- // 生成图片预览的容器大小
- previewContainer: {
- width: 100,
- height: 100
- },
- // 原图容器宽高
- sourceImgContainer: { // sic
- width: 240,
- height: 180
- },
- // 原图展示属性
- 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
- }
- }
- },
- computed: {
- // 进度条样式
- progressStyle() {
- let {
- progress
- } = this;
- return {
- width: progress + '%'
- }
- },
- // 原图样式
- sourceImgStyle() {
- let {
- scale,
- sourceImgMasking
- } = this;
- return {
- top: scale.y + sourceImgMasking.y + 'px',
- left: scale.x + sourceImgMasking.x + 'px',
- width: scale.width + 'px',
- height: scale.height + 'px'
- }
- },
- // 原图蒙版属性
- 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 sic = this.sourceImgContainer,
- sim = this.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'
- };
- }
- },
- methods: {
- // 点击波纹效果
- ripple(e) {
- effectRipple(e);
- },
- // 关闭控件
- off() {
- this.show = false;
- this.$emit('close');
- },
- // 设置步骤
- setStep(step) {
- let that = this;
- setTimeout(function () {
- that.step = step;
- }, 200);
- },
- /* 图片选择区域函数绑定
- ---------------------------------------------------------------*/
- preventDefault(e) {
- e.preventDefault();
- return false;
- },
- handleClick(e) {
- if (this.loading !== 1) {
- if (e.target !== this.$refs.fileinput) {
- e.preventDefault();
- if (document.activeElement !== this.$refs) {
- this.$refs.fileinput.click();
- }
- }
- }
- },
- handleChange(e) {
- e.preventDefault();
- if (this.loading !== 1) {
- let files = e.target.files || e.dataTransfer.files;
- this.reset();
- if (this.checkFile(files[0])) {
- this.setSourceImg(files[0]);
- }
- }
- },
- /* ---------------------------------------------------------------*/
- // 检测选择的文件是否合适
- checkFile(file) {
- let that = this,
- {
- lang,
- maxSize
- } = that;
- // 仅限图片
- if (file.type.indexOf('image') === -1) {
- that.hasError = true;
- that.errorMsg = lang.error.onlyImg;
- return false;
- }
- this.mime=file.type;
- // 超出大小
- if (file.size / 1024 > maxSize) {
- that.hasError = true;
- that.errorMsg = lang.error.outOfSize + maxSize + 'kb';
- return false;
- }
- return true;
- },
- // 重置控件
- reset() {
- let that = this;
- that.step = 1;
- that.loading = 0;
- that.hasError = false;
- that.errorMsg = '';
- that.progress = 0;
- },
- // 设置图片源
- setSourceImg(file) {
- let that = this,
- fr = new FileReader();
- fr.onload = function (e) {
- that.sourceImgUrl = fr.result;
- that.startCrop();
- };
- fr.readAsDataURL(file);
- },
- // 剪裁前准备工作
- startCrop() {
- let that = this,
- {
- width,
- height,
- ratio,
- scale,
- sourceImgUrl,
- sourceImgMasking,
- lang
- } = that,
- sim = sourceImgMasking,
- img = new Image();
- 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 || nHeight < height) {
-// that.hasError = true;
-// that.errorMsg = lang.error.lowestPx + width + '*' + height;
-// return false;
-// }
- if (ratio > nRatio) {
- h = w / nRatio;
- y = (sim.height - h) / 2;
- }
- if (ratio < nRatio) {
- w = h * nRatio;
- x = (sim.width - w) / 2;
- }
- 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.createImg();
- that.setStep(2);
- };
- },
- // 鼠标按下图片准备移动
- imgStartMove(e) {
- let {
- sourceImgMouseDown,
- scale
- } = this,
- simd = sourceImgMouseDown;
- simd.mX = e.screenX;
- simd.mY = e.screenY;
- simd.x = scale.x;
- simd.y = scale.y;
- simd.on = true;
- },
- // 鼠标按下状态下移动，图片移动
- imgMove(e) {
- let {
- sourceImgMouseDown: {
- on,
- mX,
- mY,
- x,
- y
- },
- scale,
- sourceImgMasking
- } = this,
- sim = sourceImgMasking,
- nX = e.screenX,
- nY = e.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;
- },
- // 按钮按下开始放大
- startZoomAdd(e) {
- 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) {
- 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);
- },
- // 缩放原图
- 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;
- setTimeout(function () {
- if (scale.range == newRange) {
- that.createImg();
- }
- }, 300);
- },
- // 生成需求图片
- createImg(e) {
- let that = this,
- {
- mime,
- sourceImg,
- scale: {
- x,
- y,
- width,
- height
- },
- sourceImgMasking: {
- scale
- }
- } = that,
- canvas = that.$refs.canvas,
- ctx = canvas.getContext('2d');
- if (e) {
- // 取消鼠标按下移动状态
- that.sourceImgMouseDown.on = false;
- }
- ctx.drawImage(sourceImg, x / scale, y / scale, width / scale, height / scale);
- that.createImgUrl = canvas.toDataURL(mime);
- },
- // 上传图片
- upload() {
- let that = this,
- {
- lang,
- imgFormat,
- mime,
- url,
- params,
- headers,
- field,
- ki,
- createImgUrl
- } = this,
- fmData = new FormData();
- fmData.append(field, data2blob(createImgUrl, mime), field + '.' + imgFormat);
- // 添加其他参数
- if (typeof params == 'object' && params) {
- Object.keys(params).forEach((k) => {
- fmData.append(k, params[k]);
- })
- }
- // 监听进度回调
- function uploadProgress (event) {
- console.log(event)
- if (event.lengthComputable) {
- that.progress = 100 * Math.round(event.loaded) / event.total;
- }
- };
- // 上传文件
- that.reset();
- that.loading = 1;
- that.setStep(3);
- that.$emit('crop-success', createImgUrl, field, ki);
- request({
- url,
- method: 'post',
- data: fmData
- }).then(resData=>{
- that.loading = 2;
- that.$emit('crop-upload-success', resData.data);
- }).catch(err=>{
- if (that.value) {
- that.loading = 3;
- that.hasError = true;
- that.errorMsg = lang.fail;
- that.$emit('crop-upload-fail', err, field, ki);
- }
- });
- }
- }
+ /* eslint-disable */
+'use strict'
+import request from '@/utils/request'
+import language from './utils/language.js'
+import mimes from './utils/mimes.js'
+import data2blob from './utils/data2blob.js'
+import effectRipple from './utils/effectRipple.js'
+export default {
+ props: {
+ // 域，上传文件name，触发事件会带上（如果一个页面多个图片上传控件，可以做区分
+ field: {
+ type: String,
+ 'default': 'avatar'
+ },
+ // 原名key，类似于id，触发事件会带上（如果一个页面多个图片上传控件，可以做区分
+ ki: {
+ 'default': 0
+ },
+ // 显示该控件与否
+ value: {
+ 'default': true
+ },
+ // 上传地址
+ url: {
+ type: String,
+ 'default': ''
+ },
+ // 其他要上传文件附带的数据，对象格式
+ params: {
+ type: Object,
+ 'default': null
+ },
+ // Add custom headers
+ headers: {
+ type: Object,
+ 'default': null
+ },
+ // 剪裁图片的宽
+ width: {
+ type: Number,
+ default: 200
+ },
+ // 剪裁图片的高
+ height: {
+ type: Number,
+ default: 200
+ },
+ // 不显示旋转功能
+ noRotate: {
+ type: Boolean,
+ default: true
+ },
+ // 不预览圆形图片
+ noCircle: {
+ type: Boolean,
+ default: false
+ },
+ // 不预览方形图片
+ noSquare: {
+ type: Boolean,
+ default: false
+ },
+ // 单文件大小限制
+ maxSize: {
+ type: Number,
+ 'default': 10240
+ },
+ // 语言类型
+ langType: {
+ type: String,
+ 'default': 'zh'
+ },
+ // 语言包
+ langExt: {
+ type: Object,
+ 'default': null
+ },
+ // 图片上传格式
+ imgFormat: {
+ type: String,
+ 'default': 'png'
+ },
+ // 是否支持跨域
+ withCredentials: {
+ type: Boolean,
+ 'default': false
}
+ },
+ data() {
+ const that = this
+ const {
+ imgFormat,
+ langType,
+ langExt,
+ width,
+ height
+ } = that
+ let isSupported = true
+ const allowImgFormat = [
+ 'jpg',
+ 'png'
+ ]
+ const tempImgFormat = allowImgFormat.indexOf(imgFormat) === -1 ? 'jpg' : imgFormat
+ const lang = language[langType] ? language[langType] : language['en']
+ const mime = mimes[tempImgFormat]
+ // 规范图片格式
+ that.imgFormat = tempImgFormat
+ if (langExt) {
+ Object.assign(lang, langExt)
+ }
+ if (typeof FormData !== 'function') {
+ isSupported = false
+ }
+ return {
+ // 图片的mime
+ mime,
+ // 语言包
+ lang,
+ // 浏览器是否支持该控件
+ isSupported,
+ // 浏览器是否支持触屏事件
+ isSupportTouch: document.hasOwnProperty('ontouchstart'),
+ // 步骤
+ step: 1, // 1选择文件 2剪裁 3上传
+ // 上传状态及进度
+ loading: 0, // 0未开始 1正在 2成功 3错误
+ progress: 0,
+ // 是否有错误及错误信息
+ hasError: false,
+ errorMsg: '',
+ // 需求图宽高比
+ ratio: width / height,
+ // 原图地址、生成图片地址
+ sourceImg: null,
+ sourceImgUrl: '',
+ createImgUrl: '',
+ // 原图片拖动事件初始值
+ sourceImgMouseDown: {
+ on: false,
+ mX: 0, // 鼠标按下的坐标
+ mY: 0,
+ x: 0, // scale原图坐标
+ y: 0
+ },
+ // 生成图片预览的容器大小
+ previewContainer: {
+ width: 100,
+ height: 100
+ },
+ // 原图容器宽高
+ sourceImgContainer: { // sic
+ width: 240,
+ height: 184 // 如果生成图比例与此一致会出现bug，先改成特殊的格式吧，哈哈哈
+ },
+ // 原图展示属性
+ scale: {
+ zoomAddOn: false, // 按钮缩放事件开启
+ zoomSubOn: false, // 按钮缩放事件开启
+ range: 1, // 最大100
+ rotateLeft: false, // 按钮向左旋转事件开启
+ rotateRight: false, // 按钮向右旋转事件开启
+ degree: 0, // 旋转度数
+ x: 0,
+ y: 0,
+ width: 0,
+ height: 0,
+ maxWidth: 0,
+ maxHeight: 0,
+ minWidth: 0, // 最宽
+ minHeight: 0,
+ naturalWidth: 0, // 原宽
+ naturalHeight: 0
+ }
+ }
+ },
+ computed: {
+ // 进度条样式
+ progressStyle() {
+ const {
+ progress
+ } = this
+ return {
+ width: progress + '%'
+ }
+ },
+ // 原图样式
+ sourceImgStyle() {
+ const {
+ scale,
+ sourceImgMasking
+ } = this
+ const top = scale.y + sourceImgMasking.y + 'px'
+ const left = scale.x + sourceImgMasking.x + 'px'
+ return {
+ top,
+ left,
+ width: scale.width + 'px',
+ height: scale.height + 'px',
+ transform: 'rotate(' + scale.degree + 'deg)', // 旋转时 左侧原始图旋转样式
+ '-ms-transform': 'rotate(' + scale.degree + 'deg)', // 兼容IE9
+ '-moz-transform': 'rotate(' + scale.degree + 'deg)', // 兼容FireFox
+ '-webkit-transform': 'rotate(' + scale.degree + 'deg)', // 兼容Safari 和 chrome
+ '-o-transform': 'rotate(' + scale.degree + 'deg)' // 兼容 Opera
+ }
+ },
+ // 原图蒙版属性
+ sourceImgMasking() {
+ const {
+ width,
+ height,
+ ratio,
+ sourceImgContainer
+ } = this
+ const sic = sourceImgContainer
+ const sicRatio = sic.width / sic.height // 原图容器宽高比
+ let x = 0
+ let y = 0
+ let w = sic.width
+ let h = sic.height
+ let 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() {
+ const {
+ sourceImgMasking,
+ sourceImgContainer
+ } = this
+ const sic = sourceImgContainer
+ const sim = sourceImgMasking
+ const w = sim.width == sic.width ? sim.width : (sic.width - sim.width) / 2
+ const h = sim.height == sic.height ? sim.height : (sic.height - sim.height) / 2
+ return {
+ width: w + 'px',
+ height: h + 'px'
+ }
+ },
+ previewStyle() {
+ const {
+ width,
+ height,
+ ratio,
+ previewContainer
+ } = this
+ const pc = previewContainer
+ let w = pc.width
+ let h = pc.height
+ const 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: {
+ value(newValue) {
+ if (newValue && this.loading != 1) {
+ this.reset()
+ }
+ }
+ },
+ methods: {
+ // 点击波纹效果
+ ripple(e) {
+ effectRipple(e)
+ },
+ // 关闭控件
+ off() {
+ setTimeout(() => {
+ this.$emit('input', false)
+ if (this.step == 3 && this.loading == 2) {
+ this.setStep(1)
+ }
+ }, 200)
+ },
+ // 设置步骤
+ setStep(no) {
+ // 延时是为了显示动画效果呢，哈哈哈
+ setTimeout(() => {
+ this.step = no
+ }, 200)
+ },
+ /* 图片选择区域函数绑定
+ ---------------------------------------------------------------*/
+ preventDefault(e) {
+ e.preventDefault()
+ return false
+ },
+ handleClick(e) {
+ if (this.loading !== 1) {
+ if (e.target !== this.$refs.fileinput) {
+ e.preventDefault()
+ if (document.activeElement !== this.$refs) {
+ this.$refs.fileinput.click()
+ }
+ }
+ }
+ },
+ handleChange(e) {
+ e.preventDefault()
+ if (this.loading !== 1) {
+ const files = e.target.files || e.dataTransfer.files
+ this.reset()
+ if (this.checkFile(files[0])) {
+ this.setSourceImg(files[0])
+ }
+ }
+ },
+ /* ---------------------------------------------------------------*/
+ // 检测选择的文件是否合适
+ checkFile(file) {
+ let that = this,
+ {
+ lang,
+ maxSize
+ } = that
+ // 仅限图片
+ if (file.type.indexOf('image') === -1) {
+ that.hasError = true
+ that.errorMsg = lang.error.onlyImg
+ return false
+ }
+ // 超出大小
+ if (file.size / 1024 > maxSize) {
+ that.hasError = true
+ that.errorMsg = lang.error.outOfSize + maxSize + 'kb'
+ return false
+ }
+ return true
+ },
+ // 重置控件
+ reset() {
+ const that = this
+ that.loading = 0
+ that.hasError = false
+ that.errorMsg = ''
+ that.progress = 0
+ },
+ // 设置图片源
+ setSourceImg(file) {
+ let that = this,
+ fr = new FileReader()
+ fr.onload = function(e) {
+ that.sourceImgUrl = fr.result
+ that.startCrop()
+ }
+ fr.readAsDataURL(file)
+ },
+ // 剪裁前准备工作
+ startCrop() {
+ let that = this,
+ {
+ width,
+ height,
+ ratio,
+ scale,
+ sourceImgUrl,
+ sourceImgMasking,
+ lang
+ } = that,
+ sim = sourceImgMasking,
+ img = new Image()
+ 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 || nHeight < height) {
+ that.hasError = true
+ that.errorMsg = lang.error.lowestPx + width + '*' + height
+ return false
+ }
+ if (ratio > nRatio) {
+ h = w / nRatio
+ y = (sim.height - h) / 2
+ }
+ if (ratio < nRatio) {
+ w = h * nRatio
+ x = (sim.width - w) / 2
+ }
+ scale.range = 0
+ scale.x = x
+ scale.y = y
+ scale.width = w
+ scale.height = h
+ scale.degree = 0
+ 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.createImg()
+ that.setStep(2)
+ }
+ },
+ // 鼠标按下图片准备移动
+ 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
+ },
+ // 按钮按下开始向右旋转
+ startRotateRight(e) {
+ let that = this,
+ {
+ scale
+ } = that
+ scale.rotateRight = true
+ function rotate() {
+ if (scale.rotateRight) {
+ const degree = ++scale.degree
+ that.createImg(degree)
+ setTimeout(function() {
+ rotate()
+ }, 60)
+ }
+ }
+ rotate()
+ },
+ // 按钮按下开始向右旋转
+ startRotateLeft(e) {
+ let that = this,
+ {
+ scale
+ } = that
+ scale.rotateLeft = true
+ function rotate() {
+ if (scale.rotateLeft) {
+ const degree = --scale.degree
+ that.createImg(degree)
+ setTimeout(function() {
+ rotate()
+ }, 60)
+ }
+ }
+ rotate()
+ },
+ // 停止旋转
+ endRotate() {
+ const {
+ scale
+ } = this
+ scale.rotateLeft = false
+ scale.rotateRight = false
+ },
+ // 按钮按下开始放大
+ startZoomAdd(e) {
+ let that = this,
+ {
+ scale
+ } = that
+ scale.zoomAddOn = true
+ function zoom() {
+ if (scale.zoomAddOn) {
+ const range = scale.range >= 100 ? 100 : ++scale.range
+ that.zoomImg(range)
+ setTimeout(function() {
+ zoom()
+ }, 60)
+ }
+ }
+ zoom()
+ },
+ // 按钮松开或移开取消放大
+ endZoomAdd(e) {
+ this.scale.zoomAddOn = false
+ },
+ // 按钮按下开始缩小
+ startZoomSub(e) {
+ let that = this,
+ {
+ scale
+ } = that
+ scale.zoomSubOn = true
+ function zoom() {
+ if (scale.zoomSubOn) {
+ const range = scale.range <= 0 ? 0 : --scale.range
+ that.zoomImg(range)
+ setTimeout(function() {
+ zoom()
+ }, 60)
+ }
+ }
+ zoom()
+ },
+ // 按钮松开或移开取消缩小
+ endZoomSub(e) {
+ const {
+ scale
+ } = this
+ scale.zoomSubOn = false
+ },
+ zoomChange(e) {
+ this.zoomImg(e.target.value)
+ },
+ // 缩放原图
+ zoomImg(newRange) {
+ const that = this
+ const {
+ sourceImgMasking,
+ sourceImgMouseDown,
+ scale
+ } = this
+ const {
+ maxWidth,
+ maxHeight,
+ minWidth,
+ minHeight,
+ width,
+ height,
+ x,
+ y,
+ range
+ } = scale
+ const sim = sourceImgMasking
+ // 蒙版宽高
+ const sWidth = sim.width
+ const sHeight = sim.height
+ // 新宽高
+ const nWidth = minWidth + (maxWidth - minWidth) * newRange / 100
+ const nHeight = minHeight + (maxHeight - minHeight) * newRange / 100
+ // 新坐标（根据蒙版中心点缩放）
+ let nX = sWidth / 2 - (nWidth / width) * (sWidth / 2 - x)
+ let 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
+ setTimeout(function() {
+ if (scale.range == newRange) {
+ that.createImg()
+ }
+ }, 300)
+ },
+ // 生成需求图片
+ createImg(e) {
+ let that = this,
+ {
+ mime,
+ sourceImg,
+ scale: {
+ x,
+ y,
+ width,
+ height,
+ degree
+ },
+ 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)
+ // 将透明区域设置为白色底边
+ ctx.fillStyle = '#fff'
+ ctx.fillRect(0, 0, that.width, that.height)
+ ctx.translate(that.width * 0.5, that.height * 0.5)
+ ctx.rotate(Math.PI * degree / 180)
+ ctx.translate(-that.width * 0.5, -that.height * 0.5)
+ ctx.drawImage(sourceImg, x / scale, y / scale, width / scale, height / scale)
+ that.createImgUrl = canvas.toDataURL(mime)
+ },
+ prepareUpload() {
+ const {
+ url,
+ createImgUrl,
+ field,
+ ki
+ } = this
+ this.$emit('crop-success', createImgUrl, field, ki)
+ if (typeof url === 'string' && url) {
+ this.upload()
+ } else {
+ this.off()
+ }
+ },
+ // 上传图片
+ upload() {
+ let that = this,
+ {
+ lang,
+ imgFormat,
+ mime,
+ url,
+ params,
+ headers,
+ field,
+ ki,
+ createImgUrl,
+ withCredentials
+ } = this,
+ fmData = new FormData()
+ fmData.append(field, data2blob(createImgUrl, mime), field + '.' + imgFormat)
+ // 添加其他参数
+ if (typeof params === 'object' && params) {
+ Object.keys(params).forEach((k) => {
+ fmData.append(k, params[k])
+ })
+ }
+ // 监听进度回调
+ const uploadProgress = function(event) {
+ if (event.lengthComputable) {
+ that.progress = 100 * Math.round(event.loaded) / event.total
+ }
+ }
+ // 上传文件
+ that.reset()
+ that.loading = 1
+ that.setStep(3)
+ request({
+ url,
+ method: 'post',
+ data: fmData
+ }).then(resData => {
+ that.loading = 2
+ that.$emit('crop-upload-success', resData.data)
+ }).catch(err => {
+ if (that.value) {
+ that.loading = 3
+ that.hasError = true
+ that.errorMsg = lang.fail
+ that.$emit('crop-upload-fail', err, field, ki)
+ }
+ })
+ }
+ },
+ created() {
+ // 绑定按键esc隐藏此插件事件
+ document.addEventListener('keyup', (e) => {
+ if (this.value && (e.key == 'Escape' || e.keyCode == 27)) {
+ this.off()
+ }
+ })
+ }
+}
</script>
-<style scoped>
- @import "./upload.css";
+<!--
+<style lang='sass' src="./scss/upload.scss">
+</style> -->
+
+<style>
+@charset "UTF-8";
+@-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); } }
+.vue-image-crop-upload {
+ position: fixed;
+ display: block;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ z-index: 10000;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.65);
+ -webkit-tap-highlight-color: transparent;
+ -moz-tap-highlight-color: transparent; }
+ .vue-image-crop-upload .vicp-wrap {
+ -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);
+ position: fixed;
+ display: block;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ z-index: 10000;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ width: 600px;
+ height: 330px;
+ padding: 25px;
+ background-color: #fff;
+ border-radius: 2px;
+ -webkit-animation: vicp 0.12s ease-in;
+ animation: vicp 0.12s ease-in; }
+ .vue-image-crop-upload .vicp-wrap .vicp-close {
+ position: absolute;
+ right: -30px;
+ top: -30px; }
+ .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4 {
+ position: relative;
+ display: block;
+ width: 30px;
+ height: 30px;
+ cursor: pointer;
+ -webkit-transition: -webkit-transform 0.18s;
+ transition: -webkit-transform 0.18s;
+ transition: transform 0.18s;
+ transition: transform 0.18s, -webkit-transform 0.18s;
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0); }
+ .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after, .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::before {
+ -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);
+ content: '';
+ position: absolute;
+ top: 12px;
+ left: 4px;
+ width: 20px;
+ height: 3px;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ background-color: #fff; }
+ .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after {
+ -webkit-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg); }
+ .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4:hover {
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg); }
+ .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area {
+ position: relative;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 35px;
+ height: 170px;
+ background-color: rgba(0, 0, 0, 0.03);
+ text-align: center;
+ border: 1px dashed rgba(0, 0, 0, 0.08);
+ overflow: hidden; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 {
+ display: block;
+ margin: 0 auto 6px;
+ width: 42px;
+ height: 42px;
+ overflow: hidden; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-arrow {
+ display: block;
+ margin: 0 auto;
+ width: 0;
+ height: 0;
+ border-bottom: 14.7px solid rgba(0, 0, 0, 0.3);
+ border-left: 14.7px solid transparent;
+ border-right: 14.7px solid transparent; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-body {
+ display: block;
+ width: 12.6px;
+ height: 14.7px;
+ margin: 0 auto;
+ background-color: rgba(0, 0, 0, 0.3); }
+ .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-bottom {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ display: block;
+ height: 12.6px;
+ border: 6px solid rgba(0, 0, 0, 0.3);
+ border-top: none; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-hint {
+ display: block;
+ padding: 15px;
+ font-size: 14px;
+ color: #666;
+ line-height: 30px; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-no-supported-hint {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 30px;
+ width: 100%;
+ height: 60px;
+ line-height: 30px;
+ background-color: #eee;
+ text-align: center;
+ color: #666;
+ font-size: 14px; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area:hover {
+ cursor: pointer;
+ border-color: rgba(0, 0, 0, 0.1);
+ background-color: rgba(0, 0, 0, 0.05); }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop {
+ overflow: hidden; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left {
+ float: left; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container {
+ position: relative;
+ display: block;
+ width: 240px;
+ height: 180px;
+ background-color: #e5e5e0;
+ overflow: hidden; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img {
+ position: absolute;
+ display: block;
+ cursor: move;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade {
+ -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);
+ position: absolute;
+ background-color: rgba(241, 242, 243, 0.8); }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-1 {
+ top: 0;
+ left: 0; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-2 {
+ bottom: 0;
+ right: 0; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate {
+ position: relative;
+ width: 240px;
+ height: 18px; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i {
+ display: block;
+ width: 18px;
+ height: 18px;
+ border-radius: 100%;
+ line-height: 18px;
+ text-align: center;
+ font-size: 12px;
+ font-weight: bold;
+ background-color: rgba(0, 0, 0, 0.08);
+ color: #fff;
+ overflow: hidden; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i:hover {
+ -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);
+ cursor: pointer;
+ background-color: rgba(0, 0, 0, 0.14); }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i:first-child {
+ float: left; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i:last-child {
+ float: right; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range {
+ position: relative;
+ margin: 30px 0 10px 0;
+ width: 240px;
+ height: 18px; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5,
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
+ position: absolute;
+ top: 0;
+ width: 18px;
+ height: 18px;
+ border-radius: 100%;
+ background-color: rgba(0, 0, 0, 0.08); }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5:hover,
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6:hover {
+ -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);
+ cursor: pointer;
+ background-color: rgba(0, 0, 0, 0.14); }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5 {
+ left: 0; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5::before {
+ position: absolute;
+ content: '';
+ display: block;
+ left: 3px;
+ top: 8px;
+ width: 12px;
+ height: 2px;
+ background-color: #fff; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
+ right: 0; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::before {
+ position: absolute;
+ content: '';
+ display: block;
+ left: 3px;
+ top: 8px;
+ width: 12px;
+ height: 2px;
+ background-color: #fff; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::after {
+ position: absolute;
+ content: '';
+ display: block;
+ top: 3px;
+ left: 8px;
+ width: 2px;
+ height: 12px;
+ background-color: #fff; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range] {
+ display: block;
+ padding-top: 5px;
+ margin: 0 auto;
+ width: 180px;
+ height: 8px;
+ vertical-align: top;
+ background: transparent;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ cursor: pointer;
+ /* 滑块
+ ---------------------------------------------------------------*/
+ /* 轨道
+ ---------------------------------------------------------------*/ }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
+ outline: none; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-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: #61c091;
+ border-radius: 100%;
+ border: none;
+ -webkit-transition: 0.2s;
+ transition: 0.2s; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-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: #61c091;
+ border-radius: 100%;
+ border: none;
+ -webkit-transition: 0.2s;
+ transition: 0.2s; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-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: #61c091;
+ border: none;
+ border-radius: 100%;
+ -webkit-transition: 0.2s;
+ transition: 0.2s; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-moz-range-thumb {
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+ width: 14px;
+ height: 14px; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-ms-thumb {
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
+ width: 14px;
+ height: 14px; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-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; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-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(68, 170, 119, 0.3); }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-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(68, 170, 119, 0.3); }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-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; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-lower {
+ background-color: rgba(68, 170, 119, 0.3); }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-upper {
+ background-color: rgba(68, 170, 119, 0.15); }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-webkit-slider-runnable-track {
+ background-color: rgba(68, 170, 119, 0.5); }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-moz-range-track {
+ background-color: rgba(68, 170, 119, 0.5); }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-lower {
+ background-color: rgba(68, 170, 119, 0.45); }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-upper {
+ background-color: rgba(68, 170, 119, 0.25); }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right {
+ float: right; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview {
+ height: 150px;
+ overflow: hidden; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item {
+ position: relative;
+ padding: 5px;
+ width: 100px;
+ height: 100px;
+ float: left;
+ margin-right: 16px; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item span {
+ position: absolute;
+ bottom: -30px;
+ width: 100%;
+ font-size: 14px;
+ color: #bbb;
+ display: block;
+ text-align: center; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item img {
+ position: absolute;
+ display: block;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ padding: 3px;
+ background-color: #fff;
+ border: 1px solid rgba(0, 0, 0, 0.15);
+ overflow: hidden;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item.vicp-preview-item-circle {
+ margin-right: 0; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item.vicp-preview-item-circle img {
+ border-radius: 100%; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload {
+ position: relative;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 35px;
+ height: 170px;
+ background-color: rgba(0, 0, 0, 0.03);
+ text-align: center;
+ border: 1px dashed #ddd; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-loading {
+ display: block;
+ padding: 15px;
+ font-size: 16px;
+ color: #999;
+ line-height: 30px; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap {
+ margin-top: 12px;
+ background-color: rgba(0, 0, 0, 0.08);
+ border-radius: 3px; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress {
+ position: relative;
+ display: block;
+ height: 5px;
+ border-radius: 3px;
+ background-color: #4a7;
+ -webkit-box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
+ box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
+ -webkit-transition: width 0.15s linear;
+ transition: width 0.15s linear;
+ background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+ background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+ background-size: 40px 40px;
+ -webkit-animation: vicp_progress 0.5s linear infinite;
+ animation: vicp_progress 0.5s linear infinite; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress::after {
+ content: '';
+ position: absolute;
+ display: block;
+ top: -3px;
+ right: -3px;
+ width: 9px;
+ height: 9px;
+ border: 1px solid rgba(245, 246, 247, 0.7);
+ -webkit-box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
+ box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
+ border-radius: 100%;
+ background-color: #4a7; }
+ .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-error,
+ .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-success {
+ height: 100px;
+ line-height: 100px; }
+ .vue-image-crop-upload .vicp-wrap .vicp-operate {
+ position: absolute;
+ right: 20px;
+ bottom: 20px; }
+ .vue-image-crop-upload .vicp-wrap .vicp-operate a {
+ position: relative;
+ float: left;
+ display: block;
+ margin-left: 10px;
+ width: 100px;
+ height: 36px;
+ line-height: 36px;
+ text-align: center;
+ cursor: pointer;
+ font-size: 14px;
+ color: #4a7;
+ border-radius: 2px;
+ overflow: hidden;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none; }
+ .vue-image-crop-upload .vicp-wrap .vicp-operate a:hover {
+ background-color: rgba(0, 0, 0, 0.03); }
+ .vue-image-crop-upload .vicp-wrap .vicp-error,
+ .vue-image-crop-upload .vicp-wrap .vicp-success {
+ display: block;
+ font-size: 14px;
+ line-height: 24px;
+ height: 24px;
+ color: #d10;
+ text-align: center;
+ vertical-align: top; }
+ .vue-image-crop-upload .vicp-wrap .vicp-success {
+ color: #4a7; }
+ .vue-image-crop-upload .vicp-wrap .vicp-icon3 {
+ position: relative;
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ top: 4px; }
+ .vue-image-crop-upload .vicp-wrap .vicp-icon3::after {
+ position: absolute;
+ top: 3px;
+ left: 6px;
+ width: 6px;
+ height: 10px;
+ border-width: 0 2px 2px 0;
+ border-color: #4a7;
+ border-style: solid;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ content: ''; }
+ .vue-image-crop-upload .vicp-wrap .vicp-icon2 {
+ position: relative;
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ top: 4px; }
+ .vue-image-crop-upload .vicp-wrap .vicp-icon2::after, .vue-image-crop-upload .vicp-wrap .vicp-icon2::before {
+ content: '';
+ position: absolute;
+ top: 9px;
+ left: 4px;
+ width: 13px;
+ height: 2px;
+ background-color: #d10;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg); }
+ .vue-image-crop-upload .vicp-wrap .vicp-icon2::after {
+ -webkit-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg); }
+.e-ripple {
+ position: absolute;
+ border-radius: 100%;
+ background-color: rgba(0, 0, 0, 0.15);
+ background-clip: padding-box;
+ pointer-events: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -webkit-transform: scale(0);
+ -ms-transform: scale(0);
+ transform: scale(0);
+ opacity: 1; }
+ .e-ripple.z-active {
+ opacity: 0;
+ -webkit-transform: scale(2);
+ -ms-transform: scale(2);
+ transform: scale(2);
+ -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+ transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+ transition: opacity 1.2s ease-out, transform 0.6s ease-out;
+ transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out; }
</style>
diff --git a/src/components/ImageCropper/lang.js b/src/components/ImageCropper/lang.js
deleted file mode 100644
index 264f914c..00000000
--- a/src/components/ImageCropper/lang.js
+++ /dev/null
@@ -1,41 +0,0 @@
-const langBag = {
- zh: {
- hint: '点击，或拖动图片至此处',
- loading: '正在上传……',
- noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
- success: '上传成功',
- fail: '图片上传失败',
- preview: '头像预览',
- btn: {
- off: '取消',
- close: '关闭',
- back: '上一步',
- save: '保存'
- },
- error: {
- onlyImg: '仅限图片格式',
- outOfSize: '单文件大小不能超过 ',
- lowestPx: '图片最低像素为（宽*高）：'
- }
- },
- en: {
- hint: 'Click, or drag the file here',
- loading: 'Uploading……',
- noSupported: 'Browser does not support, please use IE10+ or other browsers',
- success: 'Upload success',
- fail: 'Upload failed',
- preview: 'Preview',
- btn: {
- off: 'Cancel',
- close: 'Close',
- back: 'Back',
- save: 'Save'
- },
- error: {
- onlyImg: 'Image only',
- outOfSize: 'Image exceeds size limit: ',
- lowestPx: 'The lowest pixel in the image: '
- }
- }
-}
-export default langBag
diff --git a/src/components/ImageCropper/upload.css b/src/components/ImageCropper/upload.css
deleted file mode 100644
index d01dc40c..00000000
--- a/src/components/ImageCropper/upload.css
+++ /dev/null
@@ -1,691 +0,0 @@
-@charset "UTF-8";
-@-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);
- }
-}
-
-.vue-image-crop-upload {
- position: fixed;
- display: block;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- z-index: 10000;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.65);
- -webkit-tap-highlight-color: transparent;
- -moz-tap-highlight-color: transparent;
-}
-
-.vue-image-crop-upload .vicp-wrap {
- -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);
- position: fixed;
- display: block;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- z-index: 10000;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- width: 600px;
- height: 330px;
- padding: 25px;
- background-color: #fff;
- border-radius: 2px;
- -webkit-animation: vicp 0.12s ease-in;
- animation: vicp 0.12s ease-in;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-close {
- position: absolute;
- right: -30px;
- top: -30px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4 {
- position: relative;
- display: block;
- width: 30px;
- height: 30px;
- cursor: pointer;
- -webkit-transition: -webkit-transform 0.18s;
- transition: -webkit-transform 0.18s;
- transition: transform 0.18s;
- transition: transform 0.18s, -webkit-transform 0.18s;
- -webkit-transform: rotate(0);
- -ms-transform: rotate(0);
- transform: rotate(0);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after, .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::before {
- -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);
- content: '';
- position: absolute;
- top: 12px;
- left: 4px;
- width: 20px;
- height: 3px;
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
- background-color: #fff;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after {
- -webkit-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4:hover {
- -webkit-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- transform: rotate(90deg);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area {
- position: relative;
- padding: 35px;
- height: 200px;
- background-color: rgba(0, 0, 0, 0.03);
- text-align: center;
- border: 1px dashed rgba(0, 0, 0, 0.08);
- overflow: hidden;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 {
- display: block;
- margin: 0 auto 6px;
- width: 42px;
- height: 42px;
- overflow: hidden;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-arrow {
- display: block;
- margin: 0 auto;
- width: 0;
- height: 0;
- border-bottom: 14.7px solid rgba(0, 0, 0, 0.3);
- border-left: 14.7px solid transparent;
- border-right: 14.7px solid transparent;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-body {
- display: block;
- width: 12.6px;
- height: 14.7px;
- margin: 0 auto;
- background-color: rgba(0, 0, 0, 0.3);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-bottom {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- display: block;
- height: 12.6px;
- border: 6px solid rgba(0, 0, 0, 0.3);
- border-top: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-hint {
- display: block;
- padding: 15px;
- font-size: 14px;
- color: #666;
- line-height: 30px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-no-supported-hint {
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- padding: 30px;
- width: 100%;
- height: 60px;
- line-height: 30px;
- background-color: #eee;
- text-align: center;
- color: #666;
- font-size: 14px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area:hover {
- cursor: pointer;
- border-color: rgba(0, 0, 0, 0.1);
- background-color: rgba(0, 0, 0, 0.05);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop {
- overflow: hidden;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left {
- float: left;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container {
- position: relative;
- display: block;
- width: 240px;
- height: 180px;
- background-color: #e5e5e0;
- overflow: hidden;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img {
- position: absolute;
- display: block;
- cursor: move;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade {
- -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);
- position: absolute;
- background-color: rgba(241, 242, 243, 0.8);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-1 {
- top: 0;
- left: 0;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-2 {
- bottom: 0;
- right: 0;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range {
- position: relative;
- margin: 30px 0;
- width: 240px;
- height: 18px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5,
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
- position: absolute;
- top: 0;
- width: 18px;
- height: 18px;
- border-radius: 100%;
- background-color: rgba(0, 0, 0, 0.08);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5:hover,
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6:hover {
- -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);
- cursor: pointer;
- background-color: rgba(0, 0, 0, 0.14);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5 {
- left: 0;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5::before {
- position: absolute;
- content: '';
- display: block;
- left: 3px;
- top: 8px;
- width: 12px;
- height: 2px;
- background-color: #fff;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
- right: 0;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::before {
- position: absolute;
- content: '';
- display: block;
- left: 3px;
- top: 8px;
- width: 12px;
- height: 2px;
- background-color: #fff;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::after {
- position: absolute;
- content: '';
- display: block;
- top: 3px;
- left: 8px;
- width: 2px;
- height: 12px;
- background-color: #fff;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range] {
- display: block;
- padding-top: 5px;
- margin: 0 auto;
- width: 180px;
- height: 8px;
- vertical-align: top;
- background: transparent;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- cursor: pointer;
- /* 滑块
- ---------------------------------------------------------------*/
- /* 轨道
- ---------------------------------------------------------------*/
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
- outline: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-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: #61c091;
- border-radius: 100%;
- border: none;
- -webkit-transition: 0.2s;
- transition: 0.2s;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-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: #61c091;
- border-radius: 100%;
- border: none;
- -webkit-transition: 0.2s;
- transition: 0.2s;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-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: #61c091;
- border: none;
- border-radius: 100%;
- -webkit-transition: 0.2s;
- transition: 0.2s;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-moz-range-thumb {
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
- width: 14px;
- height: 14px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-ms-thumb {
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
- width: 14px;
- height: 14px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-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;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-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(68, 170, 119, 0.3);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-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(68, 170, 119, 0.3);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-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;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-lower {
- background-color: rgba(68, 170, 119, 0.3);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-upper {
- background-color: rgba(68, 170, 119, 0.15);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-webkit-slider-runnable-track {
- background-color: rgba(68, 170, 119, 0.5);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-moz-range-track {
- background-color: rgba(68, 170, 119, 0.5);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-lower {
- background-color: rgba(68, 170, 119, 0.45);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-upper {
- background-color: rgba(68, 170, 119, 0.25);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right {
- float: right;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview {
- height: 150px;
- overflow: hidden;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item {
- position: relative;
- padding: 5px;
- width: 100px;
- height: 100px;
- float: left;
- margin-right: 16px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item span {
- position: absolute;
- bottom: -30px;
- width: 100%;
- font-size: 14px;
- color: #bbb;
- display: block;
- text-align: center;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item img {
- position: absolute;
- display: block;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- padding: 3px;
- background-color: #fff;
- border: 1px solid rgba(0, 0, 0, 0.15);
- overflow: hidden;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item:last-child {
- margin-right: 0;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item:last-child img {
- border-radius: 100%;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload {
- position: relative;
- padding: 35px;
- height: 200px;
- background-color: rgba(0, 0, 0, 0.03);
- text-align: center;
- border: 1px dashed #ddd;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-loading {
- display: block;
- padding: 15px;
- font-size: 16px;
- color: #999;
- line-height: 30px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap {
- margin-top: 12px;
- background-color: rgba(0, 0, 0, 0.08);
- border-radius: 3px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress {
- position: relative;
- display: block;
- height: 5px;
- border-radius: 3px;
- background-color: #4a7;
- -webkit-box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
- box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
- -webkit-transition: width 0.15s linear;
- transition: width 0.15s linear;
- background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
- background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
- background-size: 40px 40px;
- -webkit-animation: vicp_progress 0.5s linear infinite;
- animation: vicp_progress 0.5s linear infinite;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress::after {
- content: '';
- position: absolute;
- display: block;
- top: -3px;
- right: -3px;
- width: 9px;
- height: 9px;
- border: 1px solid rgba(245, 246, 247, 0.7);
- -webkit-box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
- box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
- border-radius: 100%;
- background-color: #4a7;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-error,
-.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-success {
- height: 100px;
- line-height: 100px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-operate {
- position: absolute;
- right: 20px;
- bottom: 20px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-operate a {
- position: relative;
- float: left;
- display: block;
- margin-left: 10px;
- width: 100px;
- height: 36px;
- line-height: 36px;
- text-align: center;
- cursor: pointer;
- font-size: 14px;
- color: #4a7;
- border-radius: 2px;
- overflow: hidden;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-operate a:hover {
- background-color: rgba(0, 0, 0, 0.03);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-error,
-.vue-image-crop-upload .vicp-wrap .vicp-success {
- display: block;
- font-size: 14px;
- line-height: 24px;
- height: 24px;
- color: #d10;
- text-align: center;
- vertical-align: top;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-success {
- color: #4a7;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-icon3 {
- position: relative;
- display: inline-block;
- width: 20px;
- height: 20px;
- top: 4px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-icon3::after {
- position: absolute;
- top: 3px;
- left: 6px;
- width: 6px;
- height: 10px;
- border-width: 0 2px 2px 0;
- border-color: #4a7;
- border-style: solid;
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
- content: '';
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-icon2 {
- position: relative;
- display: inline-block;
- width: 20px;
- height: 20px;
- top: 4px;
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-icon2::after, .vue-image-crop-upload .vicp-wrap .vicp-icon2::before {
- content: '';
- position: absolute;
- top: 9px;
- left: 4px;
- width: 13px;
- height: 2px;
- background-color: #d10;
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
-}
-
-.vue-image-crop-upload .vicp-wrap .vicp-icon2::after {
- -webkit-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg);
-}
-
-.e-ripple {
- position: absolute;
- border-radius: 100%;
- background-color: rgba(0, 0, 0, 0.15);
- background-clip: padding-box;
- pointer-events: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -webkit-transform: scale(0);
- -ms-transform: scale(0);
- transform: scale(0);
- opacity: 1;
-}
-
-.e-ripple.z-active {
- opacity: 0;
- -webkit-transform: scale(2);
- -ms-transform: scale(2);
- transform: scale(2);
- -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
- transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
- transition: opacity 1.2s ease-out, transform 0.6s ease-out;
- transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
-}
\ No newline at end of file
diff --git a/src/components/ImageCropper/utils.js b/src/components/ImageCropper/utils.js
deleted file mode 100644
index 0ccd3af0..00000000
--- a/src/components/ImageCropper/utils.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/* eslint-disable */
-
-/**
- *
- * @param e
- * @param arg_opts
- * @returns {boolean}
- */
-export function effectRipple(e, arg_opts) {
- let opts = Object.assign({
- ele: e.target, // 波纹作用元素
- type: 'hit', // hit点击位置扩散 center中心点扩展
- bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
- }, arg_opts),
- target = opts.ele;
- if (target) {
- let rect = target.getBoundingClientRect(),
- ripple = target.querySelector('.e-ripple');
- if (!ripple) {
- ripple = document.createElement('span');
- ripple.className = 'e-ripple';
- ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
- target.appendChild(ripple);
- } else {
- ripple.className = 'e-ripple';
- }
- switch (opts.type) {
- case 'center':
- ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
- ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
- break;
- default:
- ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
- ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
- }
- ripple.style.backgroundColor = opts.bgc;
- ripple.className = 'e-ripple z-active';
- return false;
- }
-}
-// database64文件格式转换为2进制
-/**
- *
- * @param data
- * @param mime
- * @returns {*}
- */
-export function data2blob(data, mime) {
- // dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
- data = data.split(',')[1];
- data = window.atob(data);
- var ia = new Uint8Array(data.length);
- for (var i = 0; i < data.length; i++) {
- ia[i] = data.charCodeAt(i);
- }
- // canvas.toDataURL 返回的默认格式就是 image/png
- return new Blob([ia], {type: mime});
-};
diff --git a/src/components/ImageCropper/utils/data2blob.js b/src/components/ImageCropper/utils/data2blob.js
new file mode 100755
index 00000000..9c47f8af
--- /dev/null
+++ b/src/components/ImageCropper/utils/data2blob.js
@@ -0,0 +1,19 @@
+/**
+ * database64文件格式转换为2进制
+ *
+ * @param {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
+ * @param {[String]} mime [description]
+ * @return {[blob]} [description]
+ */
+export default function(data, mime) {
+ data = data.split(',')[1]
+ data = window.atob(data)
+ var ia = new Uint8Array(data.length)
+ for (var i = 0; i < data.length; i++) {
+ ia[i] = data.charCodeAt(i)
+ }
+ // canvas.toDataURL 返回的默认格式就是 image/png
+ return new Blob([ia], {
+ type: mime
+ })
+}
diff --git a/src/components/ImageCropper/utils/effectRipple.js b/src/components/ImageCropper/utils/effectRipple.js
new file mode 100755
index 00000000..46a01640
--- /dev/null
+++ b/src/components/ImageCropper/utils/effectRipple.js
@@ -0,0 +1,39 @@
+/**
+ * 点击波纹效果
+ *
+ * @param {[event]} e [description]
+ * @param {[Object]} arg_opts [description]
+ * @return {[bollean]} [description]
+ */
+export default function(e, arg_opts) {
+ var opts = Object.assign({
+ ele: e.target, // 波纹作用元素
+ type: 'hit', // hit点击位置扩散center中心点扩展
+ bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
+ }, arg_opts)
+ var target = opts.ele
+ if (target) {
+ var rect = target.getBoundingClientRect()
+ var ripple = target.querySelector('.e-ripple')
+ if (!ripple) {
+ ripple = document.createElement('span')
+ ripple.className = 'e-ripple'
+ ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
+ target.appendChild(ripple)
+ } else {
+ ripple.className = 'e-ripple'
+ }
+ switch (opts.type) {
+ case 'center':
+ ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'
+ ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
+ break
+ default:
+ ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'
+ ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'
+ }
+ ripple.style.backgroundColor = opts.bgc
+ ripple.className = 'e-ripple z-active'
+ return false
+ }
+}
diff --git a/src/components/ImageCropper/utils/language.js b/src/components/ImageCropper/utils/language.js
new file mode 100755
index 00000000..727872d9
--- /dev/null
+++ b/src/components/ImageCropper/utils/language.js
@@ -0,0 +1,232 @@
+export default {
+ zh: {
+ hint: '点击，或拖动图片至此处',
+ loading: '正在上传……',
+ noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
+ success: '上传成功',
+ fail: '图片上传失败',
+ preview: '头像预览',
+ btn: {
+ off: '取消',
+ close: '关闭',
+ back: '上一步',
+ save: '保存'
+ },
+ error: {
+ onlyImg: '仅限图片格式',
+ outOfSize: '单文件大小不能超过 ',
+ lowestPx: '图片最低像素为（宽*高）：'
+ }
+ },
+ 'zh-tw': {
+ hint: '點擊，或拖動圖片至此處',
+ loading: '正在上傳……',
+ noSupported: '瀏覽器不支持該功能，請使用IE10以上或其他現代瀏覽器！',
+ success: '上傳成功',
+ fail: '圖片上傳失敗',
+ preview: '頭像預覽',
+ btn: {
+ off: '取消',
+ close: '關閉',
+ back: '上一步',
+ save: '保存'
+ },
+ error: {
+ onlyImg: '僅限圖片格式',
+ outOfSize: '單文件大小不能超過 ',
+ lowestPx: '圖片最低像素為（寬*高）：'
+ }
+ },
+ en: {
+ hint: 'Click or drag the file here to upload',
+ loading: 'Uploading…',
+ noSupported: 'Browser is not supported, please use IE10+ or other browsers',
+ success: 'Upload success',
+ fail: 'Upload failed',
+ preview: 'Preview',
+ btn: {
+ off: 'Cancel',
+ close: 'Close',
+ back: 'Back',
+ save: 'Save'
+ },
+ error: {
+ onlyImg: 'Image only',
+ outOfSize: 'Image exceeds size limit: ',
+ lowestPx: 'Image\'s size is too low. Expected at least: '
+ }
+ },
+ ro: {
+ hint: 'Atinge sau trage fișierul aici',
+ loading: 'Se încarcă',
+ noSupported: 'Browser-ul tău nu suportă acest feature. Te rugăm încearcă cu alt browser.',
+ success: 'S-a încărcat cu succes',
+ fail: 'A apărut o problemă la încărcare',
+ preview: 'Previzualizează',
+
+ btn: {
+ off: 'Anulează',
+ close: 'Închide',
+ back: 'Înapoi',
+ save: 'Salvează'
+ },
+
+ error: {
+ onlyImg: 'Doar imagini',
+ outOfSize: 'Imaginea depășește limita de: ',
+ loewstPx: 'Imaginea este prea mică; Minim: '
+ }
+ },
+ ru: {
+ hint: 'Нажмите, или перетащите файл в это окно',
+ loading: 'Загружаю……',
+ noSupported: 'Ваш браузер не поддерживается, пожалуйста, используйте IE10 + или другие браузеры',
+ success: 'Загрузка выполнена успешно',
+ fail: 'Ошибка загрузки',
+ preview: 'Предпросмотр',
+ btn: {
+ off: 'Отменить',
+ close: 'Закрыть',
+ back: 'Назад',
+ save: 'Сохранить'
+ },
+ error: {
+ onlyImg: 'Только изображения',
+ outOfSize: 'Изображение превышает предельный размер: ',
+ lowestPx: 'Минимальный размер изображения: '
+ }
+ },
+ 'pt-br': {
+ hint: 'Clique ou arraste o arquivo aqui para carregar',
+ loading: 'Carregando…',
+ noSupported: 'Browser não suportado, use o IE10+ ou outro browser',
+ success: 'Sucesso ao carregar imagem',
+ fail: 'Falha ao carregar imagem',
+ preview: 'Pré-visualizar',
+ btn: {
+ off: 'Cancelar',
+ close: 'Fechar',
+ back: 'Voltar',
+ save: 'Salvar'
+ },
+ error: {
+ onlyImg: 'Apenas imagens',
+ outOfSize: 'A imagem excede o limite de tamanho: ',
+ lowestPx: 'O tamanho da imagem é muito pequeno. Tamanho mínimo: '
+ }
+ },
+ fr: {
+ hint: 'Cliquez ou glissez le fichier ici.',
+ loading: 'Téléchargement…',
+ noSupported: 'Votre navigateur n\'est pas supporté. Utilisez IE10 + ou un autre navigateur s\'il vous plaît.',
+ success: 'Téléchargement réussit',
+ fail: 'Téléchargement echoué',
+ preview: 'Aperçu',
+ btn: {
+ off: 'Annuler',
+ close: 'Fermer',
+ back: 'Retour',
+ save: 'Enregistrer'
+ },
+ error: {
+ onlyImg: 'Image uniquement',
+ outOfSize: 'L\'image sélectionnée dépasse la taille maximum: ',
+ lowestPx: 'L\'image sélectionnée est trop petite. Dimensions attendues: '
+ }
+ },
+ nl: {
+ hint: 'Klik hier of sleep een afbeelding in dit vlak',
+ loading: 'Uploaden…',
+ noSupported: 'Je browser wordt helaas niet ondersteund. Gebruik IE10+ of een andere browser.',
+ success: 'Upload succesvol',
+ fail: 'Upload mislukt',
+ preview: 'Voorbeeld',
+ btn: {
+ off: 'Annuleren',
+ close: 'Sluiten',
+ back: 'Terug',
+ save: 'Opslaan'
+ },
+ error: {
+ onlyImg: 'Alleen afbeeldingen',
+ outOfSize: 'De afbeelding is groter dan: ',
+ lowestPx: 'De afbeelding is te klein! Minimale afmetingen: '
+ }
+ },
+ tr: {
+ hint: 'Tıkla veya yüklemek istediğini buraya sürükle',
+ loading: 'Yükleniyor…',
+ noSupported: 'Tarayıcı desteklenmiyor, lütfen IE10+ veya farklı tarayıcı kullanın',
+ success: 'Yükleme başarılı',
+ fail: 'Yüklemede hata oluştu',
+ preview: 'Önizle',
+ btn: {
+ off: 'İptal',
+ close: 'Kapat',
+ back: 'Geri',
+ save: 'Kaydet'
+ },
+ error: {
+ onlyImg: 'Sadece resim',
+ outOfSize: 'Resim yükleme limitini aşıyor: ',
+ lowestPx: 'Resmin boyutu çok küçük. En az olması gereken: '
+ }
+ },
+ 'es-MX': {
+ hint: 'Selecciona o arrastra una imagen',
+ loading: 'Subiendo...',
+ noSupported: 'Tu navegador no es soportado, porfavor usa IE10+ u otros navegadores mas recientes',
+ success: 'Subido exitosamente',
+ fail: 'Sucedió un error',
+ preview: 'Vista previa',
+ btn: {
+ off: 'Cancelar',
+ close: 'Cerrar',
+ back: 'Atras',
+ save: 'Guardar'
+ },
+ error: {
+ onlyImg: 'Unicamente imagenes',
+ outOfSize: 'La imagen excede el tamaño maximo:',
+ lowestPx: 'La imagen es demasiado pequeño. Se espera por lo menos:'
+ }
+ },
+ de: {
+ hint: 'Klick hier oder zieh eine Datei hier rein zum Hochladen',
+ loading: 'Hochladen…',
+ noSupported: 'Browser wird nicht unterstützt, bitte verwende IE10+ oder andere Browser',
+ success: 'Upload erfolgreich',
+ fail: 'Upload fehlgeschlagen',
+ preview: 'Vorschau',
+ btn: {
+ off: 'Abbrechen',
+ close: 'Schließen',
+ back: 'Zurück',
+ save: 'Speichern'
+ },
+ error: {
+ onlyImg: 'Nur Bilder',
+ outOfSize: 'Das Bild ist zu groß: ',
+ lowestPx: 'Das Bild ist zu klein. Mindestens: '
+ }
+ },
+ ja: {
+ hint: 'クリック・ドラッグしてファイルをアップロード',
+ loading: 'アップロード中...',
+ noSupported: 'このブラウザは対応されていません。IE10+かその他の主要ブラウザをお使いください。',
+ success: 'アップロード成功',
+ fail: 'アップロード失敗',
+ preview: 'プレビュー',
+ btn: {
+ off: 'キャンセル',
+ close: '閉じる',
+ back: '戻る',
+ save: '保存'
+ },
+ error: {
+ onlyImg: '画像のみ',
+ outOfSize: '画像サイズが上限を超えています。上限: ',
+ lowestPx: '画像が小さすぎます。最小サイズ: '
+ }
+ }
+}
diff --git a/src/components/ImageCropper/utils/mimes.js b/src/components/ImageCropper/utils/mimes.js
new file mode 100755
index 00000000..e20c085c
--- /dev/null
+++ b/src/components/ImageCropper/utils/mimes.js
@@ -0,0 +1,7 @@
+export default {
+ 'jpg': 'image/jpeg',
+ 'png': 'image/png',
+ 'gif': 'image/gif',
+ 'svg': 'image/svg+xml',
+ 'psd': 'image/photoshop'
+}