You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
578 lines
15 KiB
578 lines
15 KiB
<template>
|
|
<el-row>
|
|
<el-col :span=20>
|
|
<div id="boxDiv" :class="boxSize">
|
|
<vue-cropper
|
|
ref="cropper"
|
|
:img="option.img"
|
|
:outputSize="option.size"
|
|
:outputType="option.outputType"
|
|
:info="true"
|
|
:full="option.full"
|
|
:canMove="option.canMove"
|
|
:canMoveBox="option.canMoveBox"
|
|
:fixedBox="option.fixedBox"
|
|
:original="option.original"
|
|
:autoCrop="option.autoCrop"
|
|
:autoCropWidth="option.autoCropWidth"
|
|
:autoCropHeight="option.autoCropHeight"
|
|
@img-load="imgLoad"
|
|
></vue-cropper>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span=4>
|
|
<el-row>
|
|
<el-col :span=24>
|
|
<label>等比缩放裁剪边框 </label>
|
|
<br>
|
|
<el-button icon="el-icon-circle-plus-outline" circle @click="plusCjbk"></el-button><el-button icon="el-icon-remove-outline" circle @click="reduceCjbk"></el-button>
|
|
<br>
|
|
<el-button @click="recoveryCjbk">恢复{{defaultImgWidth +' X '+ defaultImgHeight}}</el-button>
|
|
</el-col>
|
|
|
|
<el-col :span=24>
|
|
<br>
|
|
<label>调整画布大小</label>
|
|
<br>
|
|
<el-button @click="changeCanvasSize('s1')">800 X 600</el-button>
|
|
<br>
|
|
<el-button @click="changeCanvasSize('s2')">800 X 700</el-button>
|
|
<br>
|
|
<el-button @click="changeCanvasSize('s3')">800 X 800</el-button>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
<div class="test-button">
|
|
<!-- <el-button class="bu_bg" type="primary" @click="startCrop" v-if="!crap">开始剪切</el-button>
|
|
<el-button class="bu_bg" type="primary" @click="stopCrop" v-else>停止剪切</el-button> -->
|
|
<el-tooltip class="item" effect="dark" content="清除裁剪后，可以移动图片" placement="top-start">
|
|
<el-button class="bu_bg" v-if="crap==true" type="primary" @click="clearCrop">清除裁剪</el-button>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" effect="dark" content="为了良好的客户体验，app图片建议控制在50Kb左右，宽400，高300上限，如果是兼容pc的图片，建议宽800，高600为上线" placement="top-start">
|
|
<el-button class="bu_bg" v-if="crap==false" type="primary" @click="startCrop">开始裁剪</el-button>
|
|
</el-tooltip>
|
|
<el-button class="bu_bg" type="primary" @click="rotateLeft">左旋</el-button>
|
|
<el-button class="bu_bg" type="primary" @click="rotateRight">右旋</el-button>
|
|
<!-- <el-button class="bu_bg" type="primary" @click="finish('base64')">浏览(base64)</el-button>
|
|
<el-button class="bu_bg" type="primary" @click="finish('blob')">浏览(blob)</el-button> -->
|
|
<el-button class="bu_bg" type="primary" @click="upload('base64')">完成并上传图片</el-button>
|
|
<el-tag> 有时候由于网络原因，加载图片会需要3-5秒钟,请耐心等候 </el-tag>
|
|
</div>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script>
|
|
//import vueCropper from 'vue-cropper'
|
|
import config from '@/common/config';//全局公共库import
|
|
import { uploadBase64 } from '@/api/mdp/arc/image';
|
|
import screenfull from 'screenfull'
|
|
|
|
export default {
|
|
props:['branchId','image','categoryId','remark','imgWidth','imgHeight','deptid','visible','storedb','fullscreen'],
|
|
watch:{
|
|
'imgWidth':function(val){
|
|
this.option.autoCropWidth = val;
|
|
},
|
|
'imgHeight':function(val){
|
|
this.option.autoCropHeight = val;
|
|
},
|
|
'visible':function(val){
|
|
if(val==true){
|
|
|
|
}
|
|
},
|
|
'image':function(image) {
|
|
this.selectImg = image;
|
|
this.option.img=this.converUrl(image.url);
|
|
this.option.autoCropWidth=this.defaultImgWidth
|
|
this.option.autoCropHeight=this.defaultImgHeight
|
|
//this.imgLoading=true
|
|
//this.$refs.cropper.reload()
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
model: false,
|
|
modelSrc: '',
|
|
crap: false,
|
|
previews: {},
|
|
lists: [
|
|
{
|
|
/* img: 'http://ofyaji162.bkt.clouddn.com/touxiang.jpg' */
|
|
},
|
|
{
|
|
/* img: 'https://o90cnn3g2.qnssl.com/0C3ABE8D05322EAC3120DDB11F9D1F72.png' */
|
|
}
|
|
],
|
|
boxSize:"s1",
|
|
option: {
|
|
img: '',
|
|
size: 1,
|
|
full: false,
|
|
outputType: 'png',
|
|
canMove: true,
|
|
fixedBox: false,
|
|
original: false,
|
|
canMoveBox: true,
|
|
autoCrop: true,
|
|
autoCropWidth: this.imgWidth,
|
|
autoCropHeight: this.imgHeight,
|
|
},
|
|
downImg: '#',
|
|
selectImg:{categoryId:''},
|
|
imgLoading: false
|
|
}
|
|
},
|
|
methods: {
|
|
converUrl(url){
|
|
if(url!='' && url!=null && !url.indexOf('http')==0 && !url.indexOf('www')==0 && !url.indexOf('data:image/')==0){
|
|
return config.getArcImagePath()+"/"+url;
|
|
}
|
|
return url;
|
|
},
|
|
changeImg () {
|
|
this.option.img = this.lists[~~(Math.random() * this.lists.length)].img
|
|
},
|
|
startCrop (reload) {
|
|
// start
|
|
this.crap = true
|
|
if(this.imgWidth== undefined ){
|
|
this.option.autoCropWidth=600
|
|
}else{
|
|
this.option.autoCropWidth=this.imgWidth
|
|
}
|
|
if(this.imgHeight== undefined ){
|
|
this.option.autoCropHeight=600
|
|
}else{
|
|
this.option.autoCropHeight=this.imgHeight
|
|
}
|
|
this.$refs.cropper.startCrop()
|
|
if(reload!=false){
|
|
this.$refs.cropper.reload()
|
|
}
|
|
|
|
},
|
|
stopCrop () {
|
|
// stop
|
|
this.crap = false
|
|
this.$refs.cropper.stopCrop()
|
|
},
|
|
clearCrop () {
|
|
// clear
|
|
this.$refs.cropper.clearCrop()
|
|
this.stopCrop ()
|
|
},
|
|
refreshCrop () {
|
|
// clear
|
|
this.$refs.cropper.refresh()
|
|
},
|
|
changeScale (num) {
|
|
num = num || 1
|
|
this.$refs.cropper.changeScale(num)
|
|
},
|
|
rotateLeft () {
|
|
this.$refs.cropper.rotateLeft()
|
|
},
|
|
rotateRight () {
|
|
this.$refs.cropper.rotateRight()
|
|
},
|
|
finish (type) {
|
|
// 输出
|
|
// var test = window.open('about:blank')
|
|
// test.document.body.innerHTML = '图片生成中..'
|
|
if (type === 'blob') {
|
|
this.$refs.cropper.getCropBlob((data) => {
|
|
var img = window.URL.createObjectURL(data)
|
|
this.model = true
|
|
this.modelSrc = img
|
|
})
|
|
} else {
|
|
this.$refs.cropper.getCropData((data) => {
|
|
this.model = true
|
|
this.modelSrc = data
|
|
})
|
|
}
|
|
},
|
|
//调整画布大小
|
|
changeCanvasSize(val){
|
|
this.boxSize=val
|
|
},
|
|
// 实时预览函数
|
|
realTime (data) {
|
|
this.previews = data
|
|
},
|
|
plusCjbk(){
|
|
if(this.crap==false){
|
|
this.$message({ message: "请先开始裁剪", type: "warning" });
|
|
return;
|
|
}
|
|
if(this.option.autoCropWidth+this.defaultImgHeight*0.1>800){
|
|
this.$message({ message: "不能再放大", type: "warning" });
|
|
return;
|
|
}
|
|
if(this.option.autoCropHeight+this.defaultImgHeight*0.1>800){
|
|
this.$message({ message: "不能再放大", type: "warning" });
|
|
return;
|
|
}
|
|
|
|
this.option.autoCropWidth=this.option.autoCropWidth+this.defaultImgWidth*0.1
|
|
this.option.autoCropHeight=this.option.autoCropHeight+this.defaultImgHeight*0.1
|
|
this.$refs.cropper.reload()
|
|
},
|
|
reduceCjbk(){
|
|
if(this.crap==false){
|
|
this.$message({ message: "请先开始裁剪", type: "warning" });
|
|
return;
|
|
}
|
|
|
|
if(this.option.autoCropWidth-this.defaultImgWidth*0.1<=0){
|
|
this.$message({ message: "不能再缩小", type: "warning" });
|
|
return;
|
|
}
|
|
if(this.option.autoCropHeight-this.defaultImgHeight*0.1<=0){
|
|
this.$message({ message: "不能再缩小", type: "warning" });
|
|
return;
|
|
}
|
|
this.option.autoCropWidth=this.option.autoCropWidth-this.defaultImgWidth*0.1
|
|
this.option.autoCropHeight=this.option.autoCropHeight-this.defaultImgHeight*0.1
|
|
this.$refs.cropper.reload()
|
|
},
|
|
recoveryCjbk(){
|
|
if(this.crap==false){
|
|
this.$message({ message: "请先开始裁剪", type: "warning" });
|
|
return;
|
|
}
|
|
|
|
|
|
this.option.autoCropWidth=this.defaultImgWidth
|
|
this.option.autoCropHeight=this.defaultImgHeight
|
|
this.$refs.cropper.reload()
|
|
},
|
|
finish2 (type) {
|
|
this.$refs.cropper2.getCropData((data) => {
|
|
this.model = true
|
|
this.modelSrc = data
|
|
})
|
|
},
|
|
finish3 (type) {
|
|
this.$refs.cropper3.getCropData((data) => {
|
|
this.model = true
|
|
this.modelSrc = data
|
|
})
|
|
},
|
|
upload (type) {
|
|
// event.preventDefault()
|
|
/* var aLink = document.createElement('a')
|
|
aLink.download = 'demo' */
|
|
// 输出
|
|
var params={branchId:this.branchId ,categoryId: this.categoryId, fileData: '', remark: this.remark,name:'',deptid:this.deptid}
|
|
if(this.storedb){
|
|
params.storedb=this.storedb
|
|
}else{
|
|
if(this.selectImg.storedb){
|
|
params.storedb=this.selectImg.storedb
|
|
}
|
|
}
|
|
//var parm= this.$options.computed.uploadParams();
|
|
if(params.categoryId==''||params.categoryId==undefined){
|
|
this.$message({ message: "分类不能为空", type: "warning" });
|
|
return;
|
|
}
|
|
if (type === 'blob') {
|
|
this.$refs.cropper.getCropBlob((data) => {
|
|
/* this.downImg = window.URL.createObjectURL(data)
|
|
aLink.href = window.URL.createObjectURL(data)
|
|
aLink.click() */
|
|
alert("请上传64base");
|
|
})
|
|
} else {
|
|
this.$refs.cropper.getCropData((data) => {
|
|
params.fileData=data;
|
|
var baseStr=data.substring(data.indexOf('base64,')+'base64,'.length);
|
|
var eqTagIndex=baseStr.indexOf("=");
|
|
baseStr=eqTagIndex!=-1?baseStr.substring(0,eqTagIndex):baseStr;
|
|
var strLen=baseStr.length;
|
|
var fileSize=parseInt((strLen-(strLen/8)*2)/1024);
|
|
if(fileSize>110 && fileSize<1100){
|
|
this.$confirm('图片大小为'+fileSize+'kb,超出建议值, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
params.name=this.selectImg.name+this.selectImg.fileSuffix;
|
|
uploadBase64(params).then(res=>{
|
|
if(res.data.tips.isOk){
|
|
//返回触发父组件的方法
|
|
//this.clearCrop ();
|
|
var image = res.data.data;
|
|
//this.refreshCrop ();
|
|
this.$emit('upload-success',image);
|
|
}else{
|
|
this.$message({ message: "上传错误", type: "warning" });
|
|
}
|
|
}).catch(()=>{
|
|
this.$message.warning("上传失败");
|
|
});
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消'
|
|
});
|
|
});
|
|
}else{
|
|
if(fileSize<=110){
|
|
params.name=this.selectImg.name+this.selectImg.fileSuffix;
|
|
uploadBase64(params).then(res=>{
|
|
if(res.data.tips.isOk){
|
|
//返回触发父组件的方法
|
|
//this.clearCrop ();
|
|
var image = res.data.data;
|
|
//this.refreshCrop ();
|
|
this.$emit('upload-success',image);
|
|
}else{
|
|
this.$message({ message: "上传错误", type: "warning" });
|
|
}
|
|
}).catch(()=>{
|
|
this.$message.warning("上传失败");
|
|
});
|
|
}else{
|
|
this.$message({ message: "图片太大,不允许上传，请重新裁剪后上传", type: "warning" });
|
|
}
|
|
|
|
}
|
|
|
|
//this.$emit('getInfo',this.params);
|
|
/* this.downImg = data
|
|
aLink.href = data
|
|
aLink.click() */
|
|
});
|
|
}
|
|
},
|
|
imgLoad(info){
|
|
this.imgLoading=false
|
|
if(info=='success'){
|
|
this.$message({ message: "加载图片成功", type: "success" });
|
|
}else{
|
|
this.$message({ message: "加载图片失败", type: "error" });
|
|
}
|
|
|
|
},
|
|
uploadImg (e, num) {
|
|
//上传图片
|
|
// this.option.img
|
|
var file = e.target.files[0]
|
|
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
|
|
alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
|
|
return false
|
|
}
|
|
var reader = new FileReader()
|
|
reader.onload = (e) => {
|
|
let data
|
|
if (typeof e.target.result === 'object') {
|
|
// 把Array Buffer转化为blob 如果是base64不需要
|
|
data = window.URL.createObjectURL(new Blob([e.target.result]))
|
|
} else {
|
|
data = e.target.result
|
|
}
|
|
if (num === 1) {
|
|
this.option.img = data
|
|
} else if (num === 2) {
|
|
this.example2.img = data
|
|
}
|
|
}
|
|
// 转化为base64
|
|
// reader.readAsDataURL(file)
|
|
// 转化为blob
|
|
reader.readAsArrayBuffer(file)
|
|
},
|
|
fuselect(){
|
|
this.$emit('confirmSelect');
|
|
},
|
|
imgLoad (msg) {
|
|
console.log(msg)
|
|
},
|
|
handleSuccess(res,file) {
|
|
//var jsonData = JSON.stringify(res, null, 4);
|
|
//alert(jsonData);
|
|
/* var tips= res.tips;
|
|
if(tips.isOk){
|
|
this.$message({ message: '上传成功', type: 'info' });
|
|
|
|
}else{
|
|
if(tips.msg=='该图片不支持'){
|
|
this.$message({ message: '该图片不支持', type: 'info' });
|
|
}else{
|
|
this.$message({ message: '未知异常', type: 'info' });
|
|
}
|
|
} */
|
|
|
|
}
|
|
},
|
|
components: {
|
|
//'vue-cropper':vueCropper,
|
|
},
|
|
mounted () {
|
|
//this.changeImg()
|
|
// hljs.configure({useBR: true})
|
|
/* var list = [].slice.call(document.querySelectorAll('pre code'))
|
|
list.forEach((val, index) => {
|
|
hljs.highlightBlock(val)
|
|
}) */
|
|
this.selectImg = this.image;
|
|
this.option.img=this.converUrl(this.image.url);
|
|
this.startCrop(false);
|
|
this.imgLoading=true
|
|
},
|
|
computed:{
|
|
defaultImgWidth: function(){
|
|
let defaultImgWidth=600;
|
|
if(this.imgWidth== undefined ){
|
|
defaultImgWidth=600
|
|
}else{
|
|
defaultImgWidth=this.imgWidth
|
|
}
|
|
return defaultImgWidth;
|
|
},
|
|
defaultImgHeight: function(){
|
|
let defaultImgHeight=600;
|
|
if(this.imgHeight== undefined ){
|
|
defaultImgHeight=600
|
|
}else{
|
|
defaultImgHeight=this.imgHeight
|
|
}
|
|
return defaultImgHeight;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.content {
|
|
margin: auto;
|
|
max-width: 1200px;
|
|
margin-bottom: 100px;
|
|
}
|
|
|
|
.test-button {
|
|
padding-top: 30px;
|
|
clear: both;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
background: #fff;
|
|
border: 1px solid #c0ccda;
|
|
color: #1f2d3d;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
margin:20px 10px 0px 0px;
|
|
padding: 9px 15px;
|
|
font-size: 14px;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
background-color: #50bfff;
|
|
border-color: #50bfff;
|
|
transition: all .2s ease;
|
|
text-decoration: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.des {
|
|
line-height: 30px;
|
|
}
|
|
|
|
.show-info {
|
|
margin-bottom: 50px;
|
|
text-align: left;
|
|
}
|
|
|
|
.show-info h2 {
|
|
line-height: 50px;
|
|
}
|
|
|
|
/*.title, .title:hover, .title-focus, .title:visited {
|
|
color: black;
|
|
}*/
|
|
|
|
|
|
|
|
.s1 {
|
|
height: 600px;
|
|
width:800px;
|
|
float: left;
|
|
}
|
|
.s2 {
|
|
height: 700px;
|
|
width:800px;
|
|
float: left;
|
|
}
|
|
.s3 {
|
|
height: 800px;
|
|
width:800px;
|
|
float: left;
|
|
}
|
|
.app {
|
|
height: 300px;
|
|
width:400px;
|
|
float: left;
|
|
}
|
|
.show-preview{
|
|
float: left;
|
|
}
|
|
|
|
.model {
|
|
position: fixed;
|
|
z-index: 10;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: auto;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.model-show {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
.model img {
|
|
display: block;
|
|
margin: auto;
|
|
max-width: 80%;
|
|
user-select: none;
|
|
background-position: 0px 0px, 10px 10px;
|
|
background-size: 20px 20px;
|
|
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
|
|
}
|
|
|
|
.c-item {
|
|
display: block;
|
|
padding: 10px 0;
|
|
user-select: none;
|
|
}
|
|
.bu_bg{
|
|
color: #ffffff;
|
|
background-color: #50c0fe;
|
|
border-color: #50c0fe;
|
|
height: 32px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
|
|
</style>
|