Skip to content

Commit 3c78f2d

Browse files
JackPuJackPu
committed
add new images
1 parent e80bbed commit 3c78f2d

File tree

7 files changed

+44
-28
lines changed

7 files changed

+44
-28
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "a vue plgin for image upload and crop",
55
"main": "dist/vue-core-image-upload.vue",
66
"dependencies": {
7-
"core-image-xhr": "^1.0.1",
7+
"core-image-xhr": "^1.0.3",
88
"vue": "^2.0.5"
99
},
1010
"devDependencies": {

‎site/client/components/doc/en/CropImage.vue

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,12 @@
1212
<img class="avatar" :src="src"/>
1313
</div>
1414
<vue-core-image-upload
15-
crop="local"
16-
resize="local"
17-
@imageuploaded="crpoServerImageUploaded"
18-
:data="imgsrc"
19-
:max-file-size="10485760"
20-
:cropBtn = "btnText"
21-
text="上传图片"
22-
url="/api_school/schools/1/upload/" >
15+
crop="local"
16+
resize="local"
17+
url="http://101.198.151.190/api/upload.php"
18+
@imageuploaded="crpoServerImageUploaded"
19+
:max-file-size="10485760"
20+
text="上传图片" >
2321
</vue-core-image-upload>
2422
</div>
2523
<h4>Server-side crop</h4>
@@ -57,6 +55,7 @@
5755
<th>W</th>
5856
<th>X</th>
5957
<th>Y</th>
58+
<th>Rotate Degree</th>
6059
</tr>
6160
</thead>
6261
<tbody>
@@ -65,6 +64,7 @@
6564
<td>{{cropArgs.toCropImgW}}</td>
6665
<td>{{cropArgs.toCropImgX}}</td>
6766
<td>{{cropArgs.toCropImgY}}</td>
67+
<td>{{cropArgs.toRotateDegree}}</td>
6868
</tr>
6969
</tbody>
7070
</table>
@@ -97,7 +97,8 @@ export default {
9797
toCropImgH: '?',
9898
toCropImgW: '?',
9999
toCropImgX: '?',
100-
toCropImgY: '?'
100+
toCropImgY: '?',
101+
toCropDegrees: '?',
101102
}
102103
};
103104
},
@@ -117,7 +118,8 @@ export default {
117118
toCropImgH: parseInt(res.data.post.toCropImgH),
118119
toCropImgW: parseInt(res.data.post.toCropImgW),
119120
toCropImgX: parseInt(res.data.post.toCropImgX),
120-
toCropImgY: parseInt(res.data.post.toCropImgY)
121+
toCropImgY: parseInt(res.data.post.toCropImgY),
122+
toCropDegrees: parseInt(res.data.post.toCropDegrees),
121123
}
122124
this.cropSrc = 'http://img1.vued.vanthink.cn/vued41b900045d6d44f3b32e06049621b415.png';
123125
}

‎site/src/crop.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
</div>
1919
</div>
2020
<resize-bar v-if="resize" ref="resizeBar" @resize="resizeImage"></resize-bar>
21-
<rotate-bar @rotate="rotateImage"></rotate-bar>
21+
<rotate-bar v-if="isRotate" @rotate="rotateImage"></rotate-bar>
2222
</div>
2323
</div>
2424
</template>
@@ -160,6 +160,10 @@ export default {
160160
isResize: {
161161
type: [Boolean],
162162
default: false,
163+
},
164+
isRotate: {
165+
type: [Boolean],
166+
default: true,
163167
}
164168
},
165169
@@ -225,9 +229,7 @@ export default {
225229
},
226230
227231
rotateImage(degress) {
228-
console.log(degress);
229232
const data = canvasHelper.rotate(this.originSrc, degress, (data, w, h) => {
230-
// console.log(data);
231233
this.setImage(data, w, h);
232234
});
233235
//this.src = src;

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

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,10 @@ export default {
3737
return (typeof num === 'number');
3838
};
3939
// check crop options
40-
if (checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
40+
if (checkNumber(options.toCropImgX) &&
41+
checkNumber(options.toCropImgY) &&
42+
options.toCropImgW > 0 &&
43+
options.toCropImgH > 0) {
4144
let w = options.toCropImgW;
4245
let h = options.toCropImgH;
4346
if(options.maxWidth && options.maxWidth < w) {
@@ -80,24 +83,30 @@ export default {
8083
ctx.save();
8184
ctx.translate(canvasWidth / 2, canvasWidth / 2);
8285
ctx.rotate(degrees * (Math.PI / 180));
83-
const x = -canvasWidth / 2;
84-
degrees = degrees % 360;
86+
let x = 0;
87+
degrees %= 360;
8588
if (degrees === 0) {
8689
return callback(src, w, h);
8790
}
88-
let y = ((canvasWidth - h) - canvasWidth / 2)
91+
let y = 0;
8992
if ((degrees % 180) !== 0) {
93+
94+
if (degrees === -90 || degrees === 270) {
95+
x = -h;
96+
} else {
97+
y = -w;
98+
}
9099
const c = w;
91100
w = h;
92101
h = c;
93-
if (degrees === -90 || degrees === 270) {
94-
y = -canvasWidth / 2;
95-
}
102+
cvs.width = w;
103+
cvs.height = h;
104+
} else {
105+
x = -w;
106+
y = -h;
96107
}
97108
ctx.drawImage(image, x, y);
98109
ctx.restore();
99-
//cvs.width = h;
100-
//cvs.height = w;
101110
const mimeType = this._getImageType(image.src);
102111
const data = cvs.toDataURL(mimeType, 1);
103112
callback(data, w, h);

‎site/src/props.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ export default {
3535
type: [String, Boolean],
3636
default: false,
3737
},
38+
rotate: {
39+
type: Boolean,
40+
default: true,
41+
},
3842
ResizeBtn: {
3943
type: Object,
4044
default: function() {
@@ -56,7 +60,7 @@ export default {
5660
},
5761
inputAccept:{
5862
type: String,
59-
default: 'image/jpg,image/jpeg,image/png'
63+
default: 'image/jpg,image/jpeg,image/png,image/gif'
6064
},
6165
isXhr: {
6266
type: Boolean,

‎site/src/rotate-bar.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default {
4646
this.rotateDegree += 90;
4747
this.$emit('rotate', this.rotateDegree);
4848
},
49-
49+
5050
rotateLeft() {
5151
this.rotateDegree -= 90;
5252
this.$emit('rotate', this.rotateDegree);

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
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-
<crop ref="cropBox" :is-resize="resize && !crop" :ratio="cropRatio"></crop>
8+
<crop ref="cropBox" :is-resize="resize && !crop" :ratio="cropRatio" :is-rotate="rotate"></crop>
99
<div class="info-aside">
1010
<p class="btn-groups" v-if="crop">
1111
<button type="button" v-on:click="doCrop" class="btn btn-upload">{{cropBtn.ok}}</button>
@@ -95,7 +95,7 @@
9595
}
9696
9797
this.files = e.target.files;
98-
if(this.crop || this.resize) {
98+
if (this.crop || this.resize) {
9999
this.__showImage();
100100
return;
101101
}
@@ -155,7 +155,6 @@
155155
})
156156
}
157157
upload();
158-
159158
},
160159
161160
doResize(e) {

0 commit comments

Comments
 (0)