Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@tabzhang001
tabzhang001 committed Feb 16, 2021
1 parent acf4f85 commit 57d24df
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 23 deletions.
7 changes: 4 additions & 3 deletions README-zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

### 演示地址：
----
[https://ihtmlcss.com/demo/dist/#/croptool](https://ihtmlcss.com/demo/dist/#/croptool)
[https://www.ihtmlcss.com/demo/dist/#/croptool](https://www.ihtmlcss.com/demo/dist/#/croptool)


### 项目地址：
Expand Down Expand Up @@ -119,6 +119,7 @@ forIe9:function(){
|saveCutPosition|是否保存上一次裁剪位置及大小|Boolean|否|false|
|scaleAble|是否允许滚轮缩放图片|Boolean|否|true|
|index|自定义参数，将会同结果一起返回|Any|否|null|
|previewMode|裁剪过程中是否返回裁剪结果，如果裁剪出现卡顿时将此项设置为false|Boolean|否|true|
> 支持slot，在组件内部使用带有slot="open"属性的元素即可自定义打开组件的按钮
### 钩子函数：
Expand Down Expand Up @@ -161,8 +162,8 @@ forIe9:function(){

### 捐赠:

![微信](https://ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/weixinpay.png)
![支付宝](https://ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/alipay.png)
![微信](https://www.ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/weixinpay.png)
![支付宝](https://www.ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/alipay.png)

### 更新日志：
----
Expand Down
8 changes: 5 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any

### Demo：
----
[https://ihtmlcss.com/demo/dist/#/croptool](https://ihtmlcss.com/demo/dist/#/croptool)
[https://www.ihtmlcss.com/demo/dist/#/croptool](https://www.ihtmlcss.com/demo/dist/#/croptool)


### Git：
Expand Down Expand Up @@ -120,6 +120,7 @@ ForIE9:function(){
|saveCutPosition|Save last cut position and size|Boolean|No|false|
|scaleAble|Allow scale image|Boolean|No|true|
|index|Return with result|Any|No|null|
|previewMode|Return results at any time,in case of performance problems, set this to false|Boolean|No|true|

### Hook function：
| Attribute | Effect | Type | Require | Return |
Expand Down Expand Up @@ -162,13 +163,14 @@ ForIE9:function(){

### Donation:

![微信](https://ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/weixinpay.png)
![支付宝](https://ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/alipay.png)
![微信](https://www.ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/weixinpay.png)
![支付宝](https://www.ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/alipay.png)

### Update log：
----
#### 2.2.0
- New prop( index )：Return result with index.
- New prop( previewMode )：Return results at any time,in case of performance problems, set this to false.
- Fix Bug：Update style.
#### 2.1.10
- New features:
Expand Down
40 changes: 32 additions & 8 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@
:crossOrigin="params.crossOrigin"
:label="params.label"
:rate="params.rate"
:index="params.index"
:isModal="params.isModal"
:showChooseBtn="params.showChooseBtn"
:lockScroll="params.lockScroll"
Expand All @@ -121,6 +122,7 @@
:moveAble="params.moveAble"
:tool="params.tool"
:originalGraph="params.originalGraph"
:previewMode="params.previewMode"
:WatermarkText="params.WatermarkText"
:WatermarkTextFont="params.WatermarkTextFont"
:WatermarkTextColor="params.WatermarkTextColor"
Expand Down Expand Up @@ -346,15 +348,33 @@
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group custom-control">
<label for="smallToUpload">smallToUpload（If choose image size less then defined Size,return file. sizeChange must be false ）：</label>
<select @change="setData($event)" name="smallToUpload" class="custom-select">
<option value="true">YES</option>
<option value="false" selected>NO</option>
</select>
</div>
<div class="col">
<div class="form-group custom-control">
<label for="index">index（Return result with index）：</label>
<input @input="setData($event)" name="index" type="text" class="form-control"
v-model="params.index">
</div>
</div>
<div class="col">
<div class="form-group custom-control">
<label for="smallToUpload">smallToUpload（If choose image size less then defined Size,return file. sizeChange must be false ）：</label>
<select @change="setData($event)" name="smallToUpload" class="custom-select">
<option value="true">YES</option>
<option value="false" selected>NO</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group custom-control">
<label for="previewMode">previewMode（Return results at any time）：</label>
<select @change="setData($event)" name="previewMode" class="custom-select">
<option value="true" selected>YES</option>
<option value="false">NO</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group custom-control">
<label for="WatermarkText">Watermark（WatermarkText）：</label>
Expand Down Expand Up @@ -520,6 +540,8 @@
WatermarkTextX:0.95,
WatermarkTextY:0.95,
smallToUpload:true,
previewMode: true,
index: '',
},
code1: "",
code2: "\n" +
Expand Down Expand Up @@ -603,6 +625,8 @@
' :smallToUpload="' + this.params.smallToUpload + '"\n' +
' :saveCutPosition="' + this.params.saveCutPosition + '"\n' +
' :scaleAble="' + this.params.scaleAble + '"\n' +
' :previewMode="' + this.params.previewMode + '"\n' +
' :index="' + this.params.index + '"\n' +
' @cutDown="cutDown">\n' +
' <div class="btn btn-primary" slot="open">' + this.params.label + '</div>\n' +
'</ImgCutter>'
Expand Down
33 changes: 24 additions & 9 deletions src/components/ImgCutter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,11 @@
default:true,
required:false
},
previewMode: { // 裁剪过程中是否返回裁剪结果 裁剪原图卡顿时将此项设置为false
type: Boolean,
default: true,
required: false,
},
CuttingOriginal: { // 是否裁剪原图
type: Boolean,
default: false,
Expand Down Expand Up @@ -323,6 +328,10 @@
default:true,
required:false,
},
index: {
default: null,
required: false,
},
DoNotDisplayCopyright: {
type: Boolean,
default: false,
Expand Down Expand Up @@ -465,6 +474,7 @@
$image.onerror = function(e){
console.error('图片加载失败');
_this.$emit('error',{
index: _this.index,
event:e,
msg:'图片加载失败'
});
Expand All @@ -486,7 +496,7 @@
$image.src = img.src;
this.cutImageObj = $image;
document.body.appendChild($image);
this.$emit('onChooseImg',img);
this.$emit('onChooseImg',img, this.index);
} else {
throw new Error('传入参数必须包含：src,name');
}
Expand Down Expand Up @@ -577,6 +587,7 @@
_this.$emit('cutDown', {
filename: file.name,
file: file,
index: _this.index,
});
return;
}
Expand Down Expand Up @@ -614,7 +625,7 @@
}
}, 200);
};
this.$emit('onChooseImg',file);
this.$emit('onChooseImg',file, this.index);
}
},
Expand Down Expand Up @@ -679,7 +690,7 @@
this.drawImg.img = null;
this.turnReset();
this.clearCutImageObj();
this.$emit('onClearAll');
this.$emit('onClearAll', this.index);
},
clearCutImageObj:function(){
if(this.cutImageObj!==null && this.cutImageObj!==undefined) {
Expand Down Expand Up @@ -1113,18 +1124,22 @@
if(!doNotReset) {
_this.handleClose();
_this.$emit('cutDown', {
index: _this.index,
fileName:_this.fileName,
blob: blob,
file:_this.dataURLtoFile(newCanv.toDataURL(),_this.fileName),
dataURL: newCanv.toDataURL(),
})
} else {
_this.$emit('onPrintImg', {
fileName:_this.fileName,
blob: blob,
file:_this.dataURLtoFile(newCanv.toDataURL(),_this.fileName),
dataURL: newCanv.toDataURL(),
})
if (_this.previewMode) {
_this.$emit('onPrintImg', {
index: _this.index,
fileName:_this.fileName,
blob: blob,
file:_this.dataURLtoFile(newCanv.toDataURL(),_this.fileName),
dataURL: newCanv.toDataURL(),
})
}
}
}, 'image/jpeg', 0.95);
}
Expand Down

0 comments on commit 57d24df

Please sign in to comment.