Skip to content

Commit 269a072

Browse files
JackPuJackPu
committed
add new version
1 parent c611a7f commit 269a072

File tree

13 files changed

+167
-30
lines changed

13 files changed

+167
-30
lines changed

‎site/client/components/doc/cn/Props.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,12 @@
113113
<td>{auth: xxxxx}</td>
114114
<td>设置附带发送给服务端的数据</td>
115115
</tr>
116+
<tr>
117+
<td>credentials</td>
118+
<td align="left">Boolean</td>
119+
<td>false</td>
120+
<td>指定 XMLHttpRequest widthCredentials 的值，用于跨域的参数</td>
121+
</tr>
116122
</tbody>
117123
</table>
118124
</p>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
url="http://101.198.151.190/api/upload.php"
1818
@imageuploaded="crpoServerImageUploaded"
1919
:max-file-size="10485760"
20-
:rotate="false"
2120
text="上传图片" >
2221
</vue-core-image-upload>
2322
</div>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,12 @@
113113
<td>{auth: xxxxx}</td>
114114
<td>Set customed data when ajax posting server</td>
115115
</tr>
116+
<tr>
117+
<td>credentials</td>
118+
<td align="left">Boolean</td>
119+
<td>false</td>
120+
<td>Specify XMLHttpRequest widthCredentials value</td>
121+
</tr>
116122
</tbody>
117123
</table>
118124
</p>

‎site/src/crop.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,6 @@ export default {
242242
height = h,
243243
marginLeft = 0,
244244
marginTop = 0;
245-
246245
// caculate the image ratio
247246
let R = width / height;
248247
let Rs = W / H;

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,11 @@ export default {
6262
const checkNumber = function(num) {
6363
return (typeof num === 'number');
6464
};
65-
if(checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
66-
let w = options.toCropImgW * options.imgChangeRatio;
67-
let h = options.toCropImgH * options.imgChangeRatio;
65+
if (checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
66+
const w = options.toCropImgW * options.imgChangeRatio;
67+
const h = options.toCropImgH * options.imgChangeRatio;
6868
const cvs = this._getCanvas(w, h);
69-
const ctx = cvs.getContext('2d').drawImage(image, 0, 0, options.toCropImgW, options.toCropImgH, 0 , 0, w , h);
69+
const ctx = cvs.getContext('2d').drawImage(image, 0, 0, options.toCropImgW, options.toCropImgH, 0, 0, w , h);
7070
const mimeType = this._getImageType(image.src);
7171
const data = cvs.toDataURL(mimeType, options.compress / 100);
7272
callback(data);
@@ -78,8 +78,8 @@ export default {
7878
let w = image.naturalWidth;
7979
let h = image.naturalHeight;
8080
const canvasWidth = Math.max(w, h);
81-
let cvs = this._getCanvas(canvasWidth, canvasWidth);
82-
let ctx = cvs.getContext('2d');
81+
const cvs = this._getCanvas(canvasWidth, canvasWidth);
82+
const ctx = cvs.getContext('2d');
8383
ctx.save();
8484
ctx.translate(canvasWidth / 2, canvasWidth / 2);
8585
ctx.rotate(degrees * (Math.PI / 180));
@@ -93,14 +93,14 @@ export default {
9393
if (degrees === -90 || degrees === 270) {
9494
x = -w + canvasWidth / 2;
9595
} else {
96-
y = canvasWidth/2 - h;
96+
y = canvasWidth / 2 - h;
9797
}
9898
const c = w;
9999
w = h;
100100
h = c;
101101
} else {
102-
x = canvasWidth/2 - w;
103-
y = canvasWidth/2 - h;
102+
x = canvasWidth / 2 - w;
103+
y = canvasWidth / 2 - h;
104104
}
105105

106106
ctx.drawImage(image, x, y);

‎site/src/props.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,5 +93,9 @@ export default {
9393
compress: {
9494
type: [Number, String],
9595
default: 0,
96+
},
97+
credentials: {
98+
type: [String, Boolean],
99+
default: true,
96100
}
97101
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@
257257
}
258258
}
259259
}
260-
xhr('POST',this.url, this.headers, data, done, errorUpload, isBinary);
260+
xhr('POST',this.url, this.headers, data, done, errorUpload, isBinary, this.credentials);
261261
},
262262
},
263263

‎src/crop.vue‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
</div>
1919
</div>
2020
<resize-bar v-if="resize" ref="resizeBar" @resize="resizeImage"></resize-bar>
21+
<rotate-bar v-if="isRotate" @rotate="rotateImage"></rotate-bar>
2122
</div>
2223
</div>
2324
</template>
@@ -130,7 +131,9 @@ import drag from './lib/drag';
130131
import resize from './lib/resize';
131132
import GIF_LOADING_SRC from './lib/loading-gif';
132133
import helper from './lib/helper';
134+
import canvasHelper from './lib/canvas-helper';
133135
import ResizeBar from './resize-bar.vue';
136+
import RotateBar from './rotate-bar';
134137
// set cropbox size in image
135138
const CROPBOX_PERCENT = 75;
136139
const isMobile = helper.isMobile;
@@ -139,6 +142,7 @@ const areaHeight = window.innerHeight - 110;
139142
export default {
140143
components: {
141144
ResizeBar,
145+
RotateBar,
142146
},
143147
props: {
144148
ratio: {
@@ -156,6 +160,10 @@ export default {
156160
isResize: {
157161
type: [Boolean],
158162
default: false,
163+
},
164+
isRotate: {
165+
type: [Boolean],
166+
default: true,
159167
}
160168
},
161169
@@ -177,6 +185,9 @@ export default {
177185
methods: {
178186
setImage(src, w, h) {
179187
this.src = src;
188+
if (!this.originSrc) {
189+
this.originSrc = this.src;
190+
}
180191
if (this.ratio.indexOf(':') > 0) {
181192
this.ratioW = this.ratio.split(':')[0];
182193
this.ratioH = this.ratio.split(':')[1];
@@ -217,14 +228,20 @@ export default {
217228
this.imgChangeRatio = this.width / this.natrualWidth;
218229
},
219230
231+
rotateImage(degress) {
232+
const data = canvasHelper.rotate(this.originSrc, degress, (data, w, h) => {
233+
this.setImage(data, w, h);
234+
});
235+
//this.src = src;
236+
},
237+
220238
setLayout(w, h) {
221239
let H = areaHeight,
222240
W = areaWidth,
223241
width = w,
224242
height = h,
225243
marginLeft = 0,
226244
marginTop = 0;
227-
228245
// caculate the image ratio
229246
let R = width / height;
230247
let Rs = W / H;

‎src/lib/canvas-helper.js‎

Lines changed: 53 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default {
1717
const reader = new FileReader();
1818
const self = this;
1919
reader.onload = function(event) {
20-
let image = new Image();
20+
const image = new Image();
2121
image.src = event.target.result;
2222
image.onload = function() {
2323
const mimeType = self._getImageType(src.type);
@@ -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) {
@@ -59,26 +62,66 @@ export default {
5962
const checkNumber = function(num) {
6063
return (typeof num === 'number');
6164
};
62-
if(checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
63-
let w = options.toCropImgW * options.imgChangeRatio;
64-
let h = options.toCropImgH * options.imgChangeRatio;
65+
if (checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
66+
const w = options.toCropImgW * options.imgChangeRatio;
67+
const h = options.toCropImgH * options.imgChangeRatio;
6568
const cvs = this._getCanvas(w, h);
66-
const ctx = cvs.getContext('2d').drawImage(image, 0, 0, options.toCropImgW, options.toCropImgH, 0 , 0, w , h);
69+
const ctx = cvs.getContext('2d').drawImage(image, 0, 0, options.toCropImgW, options.toCropImgH, 0, 0, w , h);
6770
const mimeType = this._getImageType(image.src);
68-
const data = cvs.toDataURL(mimeType, options.compress/100);
71+
const data = cvs.toDataURL(mimeType, options.compress / 100);
6972
callback(data);
7073
}
7174
},
7275

76+
rotate(src, degrees, callback) {
77+
this._loadImage(src, (image) => {
78+
let w = image.naturalWidth;
79+
let h = image.naturalHeight;
80+
const canvasWidth = Math.max(w, h);
81+
const cvs = this._getCanvas(canvasWidth, canvasWidth);
82+
const ctx = cvs.getContext('2d');
83+
ctx.save();
84+
ctx.translate(canvasWidth / 2, canvasWidth / 2);
85+
ctx.rotate(degrees * (Math.PI / 180));
86+
let x = -canvasWidth / 2;
87+
let y = -canvasWidth / 2;
88+
degrees %= 360;
89+
if (degrees === 0) {
90+
return callback(src, w, h);
91+
}
92+
if ((degrees % 180) !== 0) {
93+
if (degrees === -90 || degrees === 270) {
94+
x = -w + canvasWidth / 2;
95+
} else {
96+
y = canvasWidth / 2 - h;
97+
}
98+
const c = w;
99+
w = h;
100+
h = c;
101+
} else {
102+
x = canvasWidth / 2 - w;
103+
y = canvasWidth / 2 - h;
104+
}
105+
106+
ctx.drawImage(image, x, y);
107+
const cvs2 = this._getCanvas(w, h);
108+
const ctx2 = cvs2.getContext('2d');
109+
ctx2.drawImage(cvs, 0, 0, w, h, 0, 0, w, h);
110+
const mimeType = this._getImageType(image.src);
111+
const data = cvs.toDataURL(mimeType, 1);
112+
callback(data, w, h);
113+
});
114+
},
115+
73116
_loadImage(data, callback) {
74117
const image = new Image();
75118
image.src = data;
76119
image.onload = function () {
77120
callback(image);
78-
}
79-
image.onerror = function() {
121+
};
122+
image.onerror = function () {
80123
console.log('Error: image error!');
81-
}
124+
};
82125
},
83126

84127
_getCanvas(width, height) {

‎src/props.js‎

Lines changed: 9 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,
@@ -89,5 +93,9 @@ export default {
8993
compress: {
9094
type: [Number, String],
9195
default: 0,
96+
},
97+
credentials: {
98+
type: [String, Boolean],
99+
default: true,
92100
}
93101
}

0 commit comments

Comments
 (0)