Skip to content

Commit fe2a31a

Browse files
JackPuJackPu
committed
add new crop
1 parent 7bdaad8 commit fe2a31a

File tree

3 files changed

+71
-54
lines changed

3 files changed

+71
-54
lines changed

‎site/src/crop.vue‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="g-crop-image-principal">
33
<div class="image-wrap" :style="{ width:width + 'px',height: height + 'px' }">
4-
<img :src="src" :style="{ width:width + 'px',height: height + 'px' }">
4+
<img ref="crop-image" :src="src" :style="{ width:width + 'px',height: height + 'px' }">
55
</div>
66
<div class="image-mask">
77
<div class="mask top" :style="{ top:0, height: cropCSS.top + 'px', left: 0, width: '100%'}"></div>
@@ -15,7 +15,6 @@
1515
<a class="g-resize" v-on:touchstart.self="resize" v-on:mousedown.self="resize"></a>
1616
</div>
1717
</div>
18-
1918
</template>
2019

2120
<style scoped>
@@ -173,6 +172,20 @@ export default {
173172
this.cropCSS = CSSObj;
174173
},
175174
175+
getCropData() {
176+
// keep compatible with old api
177+
return {
178+
toCropImgX: this.cropCSS.left / this.imgChangeRatio,
179+
toCropImgY: this.cropCSS.top / this.imgChangeRatio,
180+
toCropImgW: this.cropCSS.width / this.imgChangeRatio,
181+
toCropImgH: this.cropCSS.height / this.imgChangeRatio,
182+
};
183+
},
184+
185+
getCropImage() {
186+
return this.$refs['crop-image'];
187+
},
188+
176189
__find(str) {
177190
let dq = document.querySelector('#vciu-modal-' + this.formId);
178191
return dq.querySelector(str);

‎site/src/lib/canvas-helper.js‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,23 @@
44
**/
55

66
export default {
7+
_getImageType(str) {
8+
let mimeType = 'image/jpeg';
9+
const outputType = str.match(/(image\/[\w]+)\.*/)[0];
10+
if (typeof outputType !== 'undefined'){
11+
mimeType = outputType;
12+
}
13+
return mimeType;
14+
},
15+
716
compress (src, quality, callback) {
817
const reader = new FileReader();
918
const self = this;
1019
reader.onload = function(event) {
1120
let image = new Image();
1221
image.src = event.target.result;
1322
image.onload = function() {
14-
const outputType = getImageType(src.type);
15-
let mimeType = 'image/jpeg';
16-
if (typeof outputType !== 'undefined' && outputType === 'png'){
17-
mimeType = 'image/png';
18-
}
23+
const outputType = self._getImageType(src.type);
1924
const cvs = self._getCanvas(image.naturalWidth, image.naturalHeight);
2025
const ctx = cvs.getContext("2d").drawImage(image, 0, 0);
2126
const newImageData = cvs.toDataURL(mimeType, quality/100);
@@ -30,8 +35,11 @@ export default {
3035
* crop image via canvas and generate data
3136
**/
3237
crop(image, options, callback) {
38+
const checkNumber = function(num) {
39+
return (typeof num === 'number');
40+
};
3341
// check crop options
34-
if(Number.isNumber(options.toCropImgX)&& Number.isNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
42+
if(checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
3543
let w = options.toCropImgW;
3644
let h = options.toCropImgH;
3745
if(options.maxWidth && options.maxWidth < w) {
@@ -42,18 +50,16 @@ export default {
4250
h = options.maxHeight
4351
}
4452
const cvs = this._getCanvas(w, h);
45-
const ctx = cvs.drawImage(image, options.toCropImgX, options.toCropImgY, options.toCropImgW, options.toCropImgH, 0 , 0, w, h);
46-
const data = cvs.toDataURL(options.mimeType, options.compress/100);
53+
const ctx = cvs.getContext('2d').drawImage(image, options.toCropImgX, options.toCropImgY, options.toCropImgW, options.toCropImgH, 0 , 0, w, h);
54+
const mimeType = this._getImageType(image.src);
55+
const data = cvs.toDataURL(mimeType, options.compress/100);
56+
console.log(data);
4757
const targetImage = new Image();
4858
targetImage.src = data;
4959
return targetImage;
5060
} else {
5161
callback();
5262
}
53-
54-
55-
56-
5763
},
5864

5965
_loadImage(data, callback) {

‎site/src/vue-core-image-upload.vue‎

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,19 @@
55
<input v-bind:disabled="uploading" v-bind:id="'g-core-upload-input-' + formID" v-bind:name="name" v-bind:multiple="multiple" type="file" v-bind:accept="inputAccept" v-on:change="change" style="width: 100%; height: 100%;">
66
</form>
77
<div class="g-core-image-corp-container" v-bind:id="'vciu-modal-' + formID" v-show="hasImage">
8-
<div class="image-aside">
9-
<div class="g-crop-image-box">
10-
<crop :form-id="formID" ref="cropBox" :ratio="cropRatio"></crop>
8+
<div class="image-aside">
9+
<div class="g-crop-image-box">
10+
<crop :form-id="formID" ref="cropBox" :ratio="cropRatio"></crop>
11+
</div>
12+
</div>
13+
<div class="info-aside">
14+
<p class="btn-groups">
15+
<button type="button" v-on:click="doCrop" class="btn btn-upload">{{cropBtn.ok}}</button>
16+
<button type="button" v-on:click="cancel()" class="btn btn-cancel">{{cropBtn.cancel}}</button>
17+
</p>
1118
</div>
12-
</div>
13-
<div class="info-aside">
14-
<p class="btn-groups">
15-
<button type="button" v-on:click="doCrop" class="btn btn-upload">{{cropBtn.ok}}</button>
16-
<button type="button" v-on:click="cancel()" class="btn btn-cancel">{{cropBtn.cancel}}</button>
17-
</p>
18-
</div>
19-
</div>
2019
</div>
21-
22-
20+
</div>
2321
</template>
2422

2523
<style src="./style/style.css">
@@ -99,7 +97,6 @@
9997
if(this.crop) {
10098
this.__showImage();
10199
return;
102-
103100
}
104101
this. __dispatch('imagechanged',this.files[0]);
105102
this.tryAjaxUpload();
@@ -137,21 +134,37 @@
137134
let btn = e.target;
138135
btn.value = btn.value + '...';
139136
btn.disabled = true;
140-
if(typeof this.data !== 'object') {
137+
if (typeof this.data !== 'object') {
141138
this.data = {};
142139
}
143-
144-
let $selectCrop = this.__find('.select-recorte');
145140
this.data["request"] = "crop";
141+
const cropBox = this.$refs.cropBox;
142+
const newCSSObj = cropBox.getCropData();
146143
147-
this.data["toCropImgX"] = parseInt(window.getComputedStyle($selectCrop).left) * this.imgChangeRatio;
148-
this.data["toCropImgY"] = parseInt(window.getComputedStyle($selectCrop).top) * this.imgChangeRatio;
149-
this.data["toCropImgW"] = parseInt(window.getComputedStyle($selectCrop).width) * this.imgChangeRatio;
150-
this.data["toCropImgH"] = parseInt(window.getComputedStyle($selectCrop).height) * this.imgChangeRatio;
151-
this.tryAjaxUpload(function() {
152-
btn.value = btn.value.replace('...','');
153-
btn.disabled = false;
154-
});
144+
for (const k of Object.keys(newCSSObj)) {
145+
console.log(k);
146+
this.data[k] = newCSSObj[k];
147+
}
148+
if (this.maxWidth) {
149+
this.data['maxWidth'] = this.maxWidth;
150+
}
151+
if (this.maxHeight) {
152+
this.data['maxHeight'] = this.maxHeight;
153+
}
154+
const upload = () => {
155+
this.tryAjaxUpload(() => {
156+
btn.value = btn.value.replace('...','');
157+
btn.disabled = false;
158+
});
159+
};
160+
if (this.crop === 'local') {
161+
const targetImage = cropBox.getCropImage();
162+
this.data.compress = 100 - this.compress;
163+
return canvasHelper.crop(targetImage, this.data, () => {
164+
// upload();
165+
})
166+
}
167+
upload();
155168
156169
},
157170
cancel() {
@@ -175,7 +188,6 @@
175188
data.append(self.inputOfFile, this.files[i]);
176189
}
177190
if (typeof this.data === 'object') {
178-
179191
for(let k in this.data) {
180192
if(this.data[k] !== undefined) {
181193
data.append(k,this.data[k]);
@@ -194,20 +206,6 @@
194206
self.__dispatch('imageuploaded',res);
195207
});
196208
},
197-
// resize and drag move
198-
resize(e) {
199-
e.stopPropagation();
200-
let $el = e.target.parentElement;
201-
let $container = this.__find('.g-crop-image-principal');
202-
let resizedObj = new Resize($el,$container,this.cropRatio,e);
203-
},
204-
205-
drag(e) {
206-
e.preventDefault();
207-
let $el = e.target;
208-
let $container = this.__find('.g-crop-image-principal');
209-
let dragObj = new Drag($el,$container,e);
210-
}
211209
},
212210
213211
};

0 commit comments

Comments
 (0)