Skip to content

Commit 26ce24a

Browse files
JackPuJackPu
committed
add dist
1 parent d4348f2 commit 26ce24a

File tree

13 files changed

+1382
-0
lines changed

13 files changed

+1382
-0
lines changed

‎site/src/crop.vue‎

Lines changed: 421 additions & 0 deletions
Large diffs are not rendered by default.

‎site/src/demo/index.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import Vue from 'vue/dist/vue';
2+
3+
const VueCoreImageUpload = require('../index');
4+
5+
Vue.config.silent = false;
6+
7+
Vue.config.devtools = false;
8+
9+
new Vue({
10+
el: '#app',
11+
components: {
12+
'vue-core-image-upload': VueCoreImageUpload
13+
},
14+
data: {
15+
name: 'Jiraiya',
16+
src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
17+
cropSrc: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
18+
cropArgs: {},
19+
data: {token: '123123123'}
20+
},
21+
methods: {
22+
imageuploaded(res) {
23+
if (res.errcode === 0) {
24+
if (res.data.src) {
25+
this.src = res.data.src;
26+
return;
27+
}
28+
this.name = res.data.name;
29+
this.cropArgs = {
30+
toCropImgH: parseInt(res.data.post.toCropImgH),
31+
toCropImgW: parseInt(res.data.post.toCropImgW),
32+
toCropImgX: parseInt(res.data.post.toCropImgX),
33+
toCropImgY: parseInt(res.data.post.toCropImgY)
34+
}
35+
this.cropSrc = 'http://img1.vued.vanthink.cn/vued41b900045d6d44f3b32e06049621b415.png';
36+
}
37+
},
38+
imagechanged(res) {
39+
console.log(res);
40+
},
41+
errorhandle: function(msg) {
42+
console.warn(msg);
43+
}
44+
}
45+
});

‎site/src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import VueCoreImageUpload from './vue-core-image-upload.vue';
2+
export default VueCoreImageUpload;

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/**
2+
* compress image
3+
* reference https://github.com/brunobar79/J-I-C
4+
**/
5+
6+
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+
16+
compress (src, quality, callback) {
17+
const reader = new FileReader();
18+
const self = this;
19+
reader.onload = function(event) {
20+
let image = new Image();
21+
image.src = event.target.result;
22+
image.onload = function() {
23+
const mimeType = self._getImageType(src.type);
24+
const cvs = self._getCanvas(image.naturalWidth, image.naturalHeight);
25+
const ctx = cvs.getContext("2d").drawImage(image, 0, 0);
26+
const newImageData = cvs.toDataURL(mimeType, quality/100);
27+
callback(newImageData);
28+
}
29+
};
30+
reader.readAsDataURL(src);
31+
},
32+
/**
33+
* crop image via canvas and generate data
34+
**/
35+
crop(image, options, callback) {
36+
const checkNumber = function(num) {
37+
return (typeof num === 'number');
38+
};
39+
// check crop options
40+
if(checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
41+
let w = options.toCropImgW;
42+
let h = options.toCropImgH;
43+
if(options.maxWidth && options.maxWidth < w) {
44+
w = options.maxWidth;
45+
h = options.toCropImgH * w / options.toCropImgW;
46+
}
47+
if (options.maxHeight && options.maxHeight < h) {
48+
h = options.maxHeight
49+
}
50+
const cvs = this._getCanvas(w, h);
51+
const ctx = cvs.getContext('2d').drawImage(image, options.toCropImgX, options.toCropImgY, options.toCropImgW, options.toCropImgH, 0 , 0, w, h);
52+
const mimeType = this._getImageType(image.src);
53+
const data = cvs.toDataURL(mimeType, options.compress/100);
54+
callback(data);
55+
}
56+
},
57+
58+
resize(image, options, callback) {
59+
const checkNumber = function(num) {
60+
return (typeof num === 'number');
61+
};
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+
const cvs = this._getCanvas(w, h);
66+
const ctx = cvs.getContext('2d').drawImage(image, 0, 0, options.toCropImgW, options.toCropImgH, 0 , 0, w , h);
67+
const mimeType = this._getImageType(image.src);
68+
const data = cvs.toDataURL(mimeType, options.compress/100);
69+
callback(data);
70+
}
71+
},
72+
73+
_loadImage(data, callback) {
74+
const image = new Image();
75+
image.src = data;
76+
image.onload = function () {
77+
callback(image);
78+
}
79+
image.onerror = function() {
80+
console.log('Error: image error!');
81+
}
82+
},
83+
84+
_getCanvas(width, height) {
85+
const canvas = document.createElement('canvas');
86+
canvas.width = width;
87+
canvas.height = height;
88+
return canvas;
89+
},
90+
91+
};

‎site/src/lib/drag.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import helper from './helper';
2+
3+
const isMobile = helper.isMobile;
4+
export default function drag(e, el, coor) {
5+
if (!el) {
6+
return;
7+
}
8+
const currentX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
9+
const currentY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
10+
11+
let left = currentX - coor.x;
12+
let top = currentY - coor.y;
13+
if (left <= coor.minLeft) {
14+
left = coor.minLeft;
15+
}
16+
if (left >= coor.maxLeft) {
17+
left = coor.maxLeft;
18+
}
19+
if (top <= coor.minTop) {
20+
top = coor.minTop;
21+
}
22+
if (top >= coor.maxTop) {
23+
top = coor.maxTop;
24+
}
25+
return {
26+
left,
27+
top
28+
};
29+
};

‎site/src/lib/helper.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
module.exports = {
2+
isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
3+
4+
setCssText: function(obj) {
5+
var cssArr = [];
6+
for(var key in obj) {
7+
var val = obj[key];
8+
if (typeof val === 'number') {
9+
val = '' + val + 'px';
10+
}
11+
cssArr.push(key + ': ' + val + ';');
12+
}
13+
return cssArr.join('');
14+
}
15+
};

‎site/src/lib/loading-gif.js‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/lib/resize.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/** Reszie
2+
* @el dom
3+
* @container dom
4+
* @ratio string '1:1' like this
5+
* e events
6+
**/
7+
import helper from './helper';
8+
9+
const isMobile = helper.isMobile;
10+
const W = document.body.offsetWidth;
11+
export default function resize(e, el, container, coor, ratio) {
12+
if (!el) {
13+
return ;
14+
}
15+
const H = document.body.offsetHeight;
16+
const ratioRemainder = 1 / ratio;
17+
const dotBoxW = parseInt(window.getComputedStyle(container).width);
18+
const dotBoxH = parseInt(window.getComputedStyle(container).height);
19+
const $topH = document.querySelector('.info-aside');
20+
const halfX = (W - dotBoxW) / 2;
21+
const topH = parseInt(window.getComputedStyle($topH).height);
22+
const halfY = (H - dotBoxH - topH)/2;
23+
const resetX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
24+
const resetY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
25+
const elOffsetWidth = parseInt(el.offsetWidth);
26+
const elOffsetHeight = parseInt(el.offsetHeight);
27+
const CSSObj = {};
28+
if (ratio >= 1 && resetX <= halfX + dotBoxW) {
29+
if (elOffsetWidth >= dotBoxW) {
30+
CSSObj.width = dotBoxW;
31+
}
32+
CSSObj.width = (coor.w + resetX - coor.x);
33+
CSSObj.height = elOffsetWidth * ratioRemainder;
34+
if (dotBoxW > dotBoxH) {
35+
if (elOffsetWidth > dotBoxH) {
36+
CSSObj.height = dotBoxH;
37+
CSSObj.width = dotBoxH * ratio;
38+
}
39+
} else if (dotBoxW < dotBoxH) {
40+
if (elOffsetWidth > dotBoxW) {
41+
CSSObj.width = dotBoxW;
42+
CSSObj.height = dotBoxW * ratioRemainder;
43+
}
44+
} else if (elOffsetWidth >= dotBoxW) {
45+
CSSObj.width = dotBoxW ;
46+
CSSObj.height = dotBoxW * ratioRemainder;
47+
}
48+
} else if (ratio < 1 && resetY < (halfY + dotBoxH + topH)) {
49+
CSSObj.height = (coor.h + resetY - coor.y);
50+
CSSObj.width = parseInt(el.style.height) * ratio;
51+
// 限制拖拉的范围在图片内
52+
if (dotBoxW > dotBoxH) {
53+
if (elOffsetHeight > dotBoxH) {
54+
CSSObj.height = dotBoxH;
55+
CSSObj.width = dotBoxH * ratio;
56+
}
57+
} else if (dotBoxW < dotBoxH) {
58+
if (elOffsetWidth > dotBoxW) {
59+
CSSObj.width = dotBoxW;
60+
CSSObj.height = dotBoxW * ratioRemainder;
61+
}
62+
} else if (elOffsetWidth > dotBoxW) {
63+
CSSObj.width = dotBoxW;
64+
CSSObj.height = dotBoxW * ratioRemainder;
65+
}
66+
} else if(ratio == 'auto' && resetY <= (halfY + dotBoxH + topH) && resetX <= halfY + dotBoxW) {
67+
CSSObj.height = (coor.h + resetY - coor.y);
68+
CSSObj.width = (coor.w + resetX - coor.x);
69+
} else if (resetX <= halfX + dotBoxW) {
70+
CSSObj.width = (coor.w + resetX - coor.x);
71+
CSSObj.height = el.style.width;
72+
// limit the crop box area
73+
if (dotBoxW > dotBoxH) {
74+
if (elOffsetHeight > dotBoxH) {
75+
CSSObj.height = dotBoxH;
76+
CSSObj.width = dotBoxH;
77+
}
78+
} else if (dotBoxW < dotBoxH) {
79+
if (elOffsetWidth > dotBoxW) {
80+
CSSObj.width = dotBoxW;
81+
CSSObj.height = dotBoxW;
82+
}
83+
} else if (elOffsetWidth > dotBoxW) {
84+
CSSObj.width = el.style.height = dotBoxW;
85+
}
86+
}
87+
return CSSObj;
88+
};

‎site/src/lib/xhr.js‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/**
2+
* simple ajax handler
3+
**/
4+
5+
//ADD sendAsBinary compatibilty to older browsers
6+
if (XMLHttpRequest.prototype.sendAsBinary === undefined) {
7+
XMLHttpRequest.prototype.sendAsBinary = function(string) {
8+
var bytes = Array.prototype.map.call(string, function(c) {
9+
return c.charCodeAt(0) & 0xff;
10+
});
11+
this.send(new Uint8Array(bytes).buffer);
12+
};
13+
}
14+
15+
module.exports = function (method, url, headers, data, callback, err, isBinary) {
16+
17+
const r = new XMLHttpRequest();
18+
const error = err || function () {
19+
console.error('AJAX ERROR!');
20+
};
21+
const boundary = 'vuecodeimageupload';
22+
// Binary?
23+
let binary = false;
24+
if (method === 'blob') {
25+
binary = method;
26+
method = 'GET';
27+
}
28+
console.log(data);
29+
method = method.toUpperCase();
30+
// Xhr.responseType 'json' is not supported in any of the vendors yet.
31+
r.onload = function () {
32+
let json = r.response;
33+
try {
34+
json = JSON.parse(r.responseText);
35+
} catch (_e) {
36+
if (r.status === 401) {
37+
json = error('access_denied', r.statusText);
38+
}
39+
}
40+
let headers = headersToJSON(r.getAllResponseHeaders());
41+
headers.statusCode = r.status;
42+
callback(json || (method === 'GET' ? error('empty_response', 'Could not get resource') : {}), headers);
43+
};
44+
r.onerror = function () {
45+
let json = r.responseText;
46+
try {
47+
json = JSON.parse(r.responseText);
48+
} catch (_e) {
49+
console.error(_e);
50+
}
51+
callback(json || error('access_denied', 'Could not get resource'));
52+
};
53+
let x;
54+
// Should we add the query to the URL?
55+
if (method === 'GET' || method === 'DELETE') {
56+
data = null;
57+
} else if (isBinary) {
58+
const keyData = data;
59+
const code = data.base64Code.replace('data:' + data.type + ';base64,', '');
60+
data = ['--' + boundary, 'Content-Disposition: form-data; name="' + data.filed + '"; filename="' + data.filename + '"', 'Content-Type: ' + data.type, '', window.atob(code), ''].join('\r\n');
61+
const keyArr = Object.keys(keyData);
62+
if (keyArr.length > 4) {
63+
for (const k of keyArr) {
64+
if (['filed', 'filename', 'type', 'base64Code'].indexOf(k) == -1) {
65+
data += ['--' + boundary, 'Content-Disposition: form-data; name="' + k + '";', '', ''].join('\r\n');
66+
data += [typeof keyData[k] === 'object' ? JSON.stringify(keyData[k]) : keyData[k], ''].join('\r\n');
67+
}
68+
}
69+
}
70+
data += '--' + boundary + '--';
71+
}
72+
// Open the path, async
73+
r.open(method, url, true);
74+
if (binary) {
75+
if ('responseType' in r) {
76+
r.responseType = binary;
77+
}
78+
else {
79+
r.overrideMimeType('text/plain; charset=x-user-defined');
80+
}
81+
}
82+
// Set any bespoke headers
83+
if (headers) {
84+
for (x in headers) {
85+
r.setRequestHeader(x, headers[x]);
86+
}
87+
if (isBinary) {
88+
r.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
89+
}
90+
}
91+
if (isBinary) {
92+
return r.sendAsBinary(data);
93+
}
94+
r.withCredentials = true;
95+
r.send(data);
96+
return r;
97+
// Headers are returned as a string
98+
function headersToJSON(s) {
99+
const o = {};
100+
const reg = /([a-z\-]+):\s?(.*);?/gi;
101+
let m;
102+
while (m = reg.exec(s)) {
103+
o[m[1]] = m[2];
104+
}
105+
return o;
106+
}
107+
};

0 commit comments

Comments
 (0)