Shenlin / publisher

Go to a project
Toggle navigation Toggle navigation pinning
lintry
f2b4078e 1 parent 53db8a1e

增加本地图片压缩后上传功能以及测试样例

Expand all
Inline Side-by-side
Showing 25 changed files with 625 additions and 23 deletions
......@@ -27,6 +27,7 @@
<div id="preview" style="padding:1em">
</div>
<script src="lib/lrz/lrz.bundle.js"></script>
<script>
$(document).ready(function() {
function Publisher(options) {
......@@ -34,7 +35,7 @@
return new Publisher();
}
var $editor
var $editor;
function init(editor) {
$editor = $(editor);
var ImageGallery = function (context) {
......@@ -102,29 +103,33 @@
if (image.size <= 102400) {
$editor.summernote('insertImages', [image]);
} else {
data = new FormData();
data.append("file", image);
$.ajax({
data: data,
type: "POST",
url: "/upload",
cache: false,
contentType: false,
processData: false,
success: function(result) {
var file = result.content.files[0]||{};
console.log(file);
if (file.size) {
setTimeout(function () {
$editor.summernote('insertImage', file.url, function ($image) {
$image.css('width', $image.width() / 3);
$image.attr('data-filename', file.name);
});
}, 1000); //等待上传处理图片
lrz(image, {
width: 1024
})
.then(function (rst) {
rst.formData.append('fileLen', rst.fileLen);
rst.formData.append('xxx', '我是其他参数');
$.ajax({
data: rst.formData,
type: "POST",
url: "/upload",
cache: false,
contentType: false,
processData: false,
success: function(result) {
var file = result.content.files[0]||{};
console.log(file);
if (file.size) {
setTimeout(function () {
$editor.summernote('insertImage', file.url, function ($image) {
$image.css('width', $image.width() / 3);
$image.attr('data-filename', file.name);
});
}, 1000); //等待上传处理图片
}
}
}
});
});
});
}
}
},
......
webpackJsonp([1],{6:function(t,e,a){var r,n;!function(){function a(t){var e=t.naturalWidth,a=t.naturalHeight;if(e*a>1048576){var r=document.createElement("canvas");r.width=r.height=1;var n=r.getContext("2d");return n.drawImage(t,-e+1,0),0===n.getImageData(0,0,1,1).data[3]}return!1}function i(t,e,a){var r=document.createElement("canvas");r.width=1,r.height=a;var n=r.getContext("2d");n.drawImage(t,0,0);for(var i=n.getImageData(0,0,1,a).data,o=0,c=a,s=a;s>o;){var h=i[4*(s-1)+3];0===h?c=s:o=s,s=c+o>>1}var d=s/a;return 0===d?1:d}function o(t,e,a){var r=document.createElement("canvas");return c(t,r,e,a),r.toDataURL("image/jpeg",e.quality||.8)}function c(t,e,r,n){var o=t.naturalWidth,c=t.naturalHeight,h=r.width,d=r.height,g=e.getContext("2d");g.save(),s(e,g,h,d,r.orientation);var l=a(t);l&&(o/=2,c/=2);var u=1024,w=document.createElement("canvas");w.width=w.height=u;for(var f=w.getContext("2d"),v=n?i(t,o,c):1,m=Math.ceil(u*h/o),b=Math.ceil(u*d/c/v),L=0,I=0;c>L;){for(var p=0,R=0;o>p;)f.clearRect(0,0,u,u),f.drawImage(t,-p,-L),g.drawImage(w,0,0,u,u,R,I,m,b),p+=u,R+=m;L+=u,I+=b}g.restore(),w=f=null}function s(t,e,a,r,n){switch(n){case 5:case 6:case 7:case 8:t.width=r,t.height=a;break;default:t.width=a,t.height=r}switch(n){case 2:e.translate(a,0),e.scale(-1,1);break;case 3:e.translate(a,r),e.rotate(Math.PI);break;case 4:e.translate(0,r),e.scale(1,-1);break;case 5:e.rotate(.5*Math.PI),e.scale(1,-1);break;case 6:e.rotate(.5*Math.PI),e.translate(0,-r);break;case 7:e.rotate(.5*Math.PI),e.translate(a,-r),e.scale(-1,1);break;case 8:e.rotate(-.5*Math.PI),e.translate(-a,0)}}function h(t){if(window.Blob&&t instanceof Blob){var e=new Image,a=window.URL&&window.URL.createObjectURL?window.URL:window.webkitURL&&window.webkitURL.createObjectURL?window.webkitURL:null;if(!a)throw Error("No createObjectURL function found to create blob url");e.src=a.createObjectURL(t),this.blob=t,t=e}if(!t.naturalWidth&&!t.naturalHeight){var r=this;t.onload=function(){var t=r.imageLoadListeners;if(t){r.imageLoadListeners=null;for(var e=0,a=t.length;a>e;e++)t[e]()}},this.imageLoadListeners=[]}this.srcImage=t}h.prototype.render=function(t,e,a){if(this.imageLoadListeners){var r=this;return void this.imageLoadListeners.push(function(){r.render(t,e,a)})}e=e||{};var n=this.srcImage,i=n.src,s=i.length,h=n.naturalWidth,d=n.naturalHeight,g=e.width,l=e.height,u=e.maxWidth,w=e.maxHeight,f=this.blob&&"image/jpeg"===this.blob.type||0===i.indexOf("data:image/jpeg")||i.indexOf(".jpg")===s-4||i.indexOf(".jpeg")===s-5;g&&!l?l=d*g/h<<0:l&&!g?g=h*l/d<<0:(g=h,l=d),u&&g>u&&(g=u,l=d*g/h<<0),w&&l>w&&(l=w,g=h*l/d<<0);var v={width:g,height:l};for(var m in e)v[m]=e[m];var b=t.tagName.toLowerCase();"img"===b?t.src=o(this.srcImage,v,f):"canvas"===b&&c(this.srcImage,t,v,f),"function"==typeof this.onrender&&this.onrender(t),a&&a()},r=[],n=function(){return h}.apply(e,r),!(void 0!==n&&(t.exports=n))}()}});
//# sourceMappingURL=1.chunk.js.map
\ No newline at end of file
This diff is collapsed. Click to expand it.
webpackJsonp([2],{7:function(r,a){function n(r){function a(r){for(var a=[16,11,10,16,24,40,51,61,12,12,14,19,26,58,60,55,14,13,16,24,40,57,69,56,14,17,22,29,51,87,80,62,18,22,37,56,68,109,103,77,24,35,55,64,81,104,113,92,49,64,78,87,103,121,120,101,72,92,95,98,112,100,103,99],n=0;64>n;n++){var o=b((a[n]*r+50)/100);1>o?o=1:o>255&&(o=255),C[I[n]]=o}for(var f=[17,18,24,47,99,99,99,99,18,21,26,66,99,99,99,99,24,26,56,99,99,99,99,99,47,66,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99,99],e=0;64>e;e++){var t=b((f[e]*r+50)/100);1>t?t=1:t>255&&(t=255),j[I[e]]=t}for(var v=[1,1.387039845,1.306562965,1.175875602,1,.785694958,.5411961,.275899379],i=0,u=0;8>u;u++)for(var c=0;8>c;c++)_[i]=1/(C[I[i]]*v[u]*v[c]*8),k[i]=1/(j[I[i]]*v[u]*v[c]*8),i++}function n(r,a){for(var n=0,o=0,f=new Array,e=1;16>=e;e++){for(var t=1;t<=r[e];t++)f[a[o]]=[],f[a[o]][0]=n,f[a[o]][1]=e,o++,n++;n*=2}return f}function o(){p=n(K,L),l=n(Q,R),D=n(O,P),T=n(V,W)}function f(){for(var r=1,a=2,n=1;15>=n;n++){for(var o=r;a>o;o++)J[32767+o]=n,x[32767+o]=[],x[32767+o][1]=n,x[32767+o][0]=o;for(var f=-(a-1);-r>=f;f++)J[32767+f]=n,x[32767+f]=[],x[32767+f][1]=n,x[32767+f][0]=a-1+f;r<<=1,a<<=1}}function e(){for(var r=0;256>r;r++)H[r]=19595*r,H[r+256>>0]=38470*r,H[r+512>>0]=7471*r+32768,H[r+768>>0]=-11059*r,H[r+1024>>0]=-21709*r,H[r+1280>>0]=32768*r+8421375,H[r+1536>>0]=-27439*r,H[r+1792>>0]=-5329*r}function t(r){for(var a=r[0],n=r[1]-1;n>=0;)a&1<<n&&(q|=1<<z),n--,z--,0>z&&(255==q?(v(255),v(0)):v(q),z=7,q=0)}function v(r){U.push(G[r])}function i(r){v(r>>8&255),v(255&r)}function u(r,a){var n,o,f,e,t,v,i,u,c,w=0;const y=8,A=64;for(c=0;y>c;++c){n=r[w],o=r[w+1],f=r[w+2],e=r[w+3],t=r[w+4],v=r[w+5],i=r[w+6],u=r[w+7];var h=n+u,d=n-u,g=o+i,s=o-i,m=f+v,p=f-v,l=e+t,D=e-t,T=h+l,M=h-l,b=g+m,C=g-m;r[w]=T+b,r[w+4]=T-b;var j=.707106781*(C+M);r[w+2]=M+j,r[w+6]=M-j,T=D+p,b=p+s,C=s+d;var _=.382683433*(T-C),k=.5411961*T+_,x=1.306562965*C+_,J=.707106781*b,S=d+J,U=d-J;r[w+5]=U+k,r[w+3]=U-k,r[w+1]=S+x,r[w+7]=S-x,w+=8}for(w=0,c=0;y>c;++c){n=r[w],o=r[w+8],f=r[w+16],e=r[w+24],t=r[w+32],v=r[w+40],i=r[w+48],u=r[w+56];var q=n+u,z=n-u,B=o+i,E=o-i,F=f+v,G=f-v,H=e+t,I=e-t,K=q+H,L=q-H,O=B+F,P=B-F;r[w]=K+O,r[w+32]=K-O;var Q=.707106781*(P+L);r[w+16]=L+Q,r[w+48]=L-Q,K=I+G,O=G+E,P=E+z;var R=.382683433*(K-P),V=.5411961*K+R,W=1.306562965*P+R,X=.707106781*O,Y=z+X,Z=z-X;r[w+40]=Z+V,r[w+24]=Z-V,r[w+8]=Y+W,r[w+56]=Y-W,w++}var $;for(c=0;A>c;++c)$=r[c]*a[c],N[c]=$>0?$+.5|0:$-.5|0;return N}function c(){i(65504),i(16),v(74),v(70),v(73),v(70),v(0),v(1),v(1),v(0),i(1),i(1),v(0),v(0)}function w(r,a){i(65472),i(17),v(8),i(a),i(r),v(3),v(1),v(17),v(0),v(2),v(17),v(1),v(3),v(17),v(1)}function y(){i(65499),i(132),v(0);for(var r=0;64>r;r++)v(C[r]);v(1);for(var a=0;64>a;a++)v(j[a])}function A(){i(65476),i(418),v(0);for(var r=0;16>r;r++)v(K[r+1]);for(var a=0;11>=a;a++)v(L[a]);v(16);for(var n=0;16>n;n++)v(O[n+1]);for(var o=0;161>=o;o++)v(P[o]);v(1);for(var f=0;16>f;f++)v(Q[f+1]);for(var e=0;11>=e;e++)v(R[e]);v(17);for(var t=0;16>t;t++)v(V[t+1]);for(var u=0;161>=u;u++)v(W[u])}function h(){i(65498),i(12),v(3),v(1),v(0),v(2),v(17),v(3),v(17),v(0),v(63),v(0)}function d(r,a,n,o,f){var e,v=f[0],i=f[240];const c=16,w=63,y=64;for(var A=u(r,a),h=0;y>h;++h)S[I[h]]=A[h];var d=S[0]-n;n=S[0],0==d?t(o[0]):(e=32767+d,t(o[J[e]]),t(x[e]));for(var g=63;g>0&&0==S[g];g--);if(0==g)return t(v),n;for(var s,m=1;g>=m;){for(var p=m;0==S[m]&&g>=m;++m);var l=m-p;if(l>=c){s=l>>4;for(var D=1;s>=D;++D)t(i);l=15&l}e=32767+S[m],t(f[(l<<4)+J[e]]),t(x[e]),m++}return g!=w&&t(v),n}function g(){for(var r=String.fromCharCode,a=0;256>a;a++)G[a]=r(a)}function s(r){if(0>=r&&(r=1),r>100&&(r=100),M!=r){var n=0;n=50>r?Math.floor(5e3/r):Math.floor(200-2*r),a(n),M=r}}function m(){var a=(new Date).getTime();r||(r=50),g(),o(),f(),e(),s(r);(new Date).getTime()-a}var p,l,D,T,M,b=(Math.round,Math.floor),C=new Array(64),j=new Array(64),_=new Array(64),k=new Array(64),x=new Array(65535),J=new Array(65535),N=new Array(64),S=new Array(64),U=[],q=0,z=7,B=new Array(64),E=new Array(64),F=new Array(64),G=new Array(256),H=new Array(2048),I=[0,1,5,6,14,15,27,28,2,4,7,13,16,26,29,42,3,8,12,17,25,30,41,43,9,11,18,24,31,40,44,53,10,19,23,32,39,45,52,54,20,22,33,38,46,51,55,60,21,34,37,47,50,56,59,61,35,36,48,49,57,58,62,63],K=[0,0,1,5,1,1,1,1,1,1,0,0,0,0,0,0,0],L=[0,1,2,3,4,5,6,7,8,9,10,11],O=[0,0,2,1,3,3,2,4,3,5,5,4,4,0,0,1,125],P=[1,2,3,0,4,17,5,18,33,49,65,6,19,81,97,7,34,113,20,50,129,145,161,8,35,66,177,193,21,82,209,240,36,51,98,114,130,9,10,22,23,24,25,26,37,38,39,40,41,42,52,53,54,55,56,57,58,67,68,69,70,71,72,73,74,83,84,85,86,87,88,89,90,99,100,101,102,103,104,105,106,115,116,117,118,119,120,121,122,131,132,133,134,135,136,137,138,146,147,148,149,150,151,152,153,154,162,163,164,165,166,167,168,169,170,178,179,180,181,182,183,184,185,186,194,195,196,197,198,199,200,201,202,210,211,212,213,214,215,216,217,218,225,226,227,228,229,230,231,232,233,234,241,242,243,244,245,246,247,248,249,250],Q=[0,0,3,1,1,1,1,1,1,1,1,1,0,0,0,0,0],R=[0,1,2,3,4,5,6,7,8,9,10,11],V=[0,0,2,1,2,4,4,3,4,7,5,4,4,0,1,2,119],W=[0,1,2,3,17,4,5,33,49,6,18,65,81,7,97,113,19,34,50,129,8,20,66,145,161,177,193,9,35,51,82,240,21,98,114,209,10,22,36,52,225,37,241,23,24,25,26,38,39,40,41,42,53,54,55,56,57,58,67,68,69,70,71,72,73,74,83,84,85,86,87,88,89,90,99,100,101,102,103,104,105,106,115,116,117,118,119,120,121,122,130,131,132,133,134,135,136,137,138,146,147,148,149,150,151,152,153,154,162,163,164,165,166,167,168,169,170,178,179,180,181,182,183,184,185,186,194,195,196,197,198,199,200,201,202,210,211,212,213,214,215,216,217,218,226,227,228,229,230,231,232,233,234,242,243,244,245,246,247,248,249,250];this.encode=function(r,a,n){var o=(new Date).getTime();a&&s(a),U=new Array,q=0,z=7,i(65496),c(),y(),w(r.width,r.height),A(),h();var f=0,e=0,v=0;q=0,z=7,this.encode.displayName="_encode_";for(var u,g,m,M,b,C,j,x,J,N=r.data,S=r.width,G=r.height,I=4*S,K=0;G>K;){for(u=0;I>u;){for(b=I*K+u,C=b,j=-1,x=0,J=0;64>J;J++)x=J>>3,j=4*(7&J),C=b+x*I+j,K+x>=G&&(C-=I*(K+1+x-G)),u+j>=I&&(C-=u+j-I+4),g=N[C++],m=N[C++],M=N[C++],B[J]=(H[g]+H[m+256>>0]+H[M+512>>0]>>16)-128,E[J]=(H[g+768>>0]+H[m+1024>>0]+H[M+1280>>0]>>16)-128,F[J]=(H[g+1280>>0]+H[m+1536>>0]+H[M+1792>>0]>>16)-128;f=d(B,_,f,p,D),e=d(E,k,e,l,T),v=d(F,k,v,l,T),u+=32}K+=8}if(z>=0){var L=[];L[1]=z+1,L[0]=(1<<z+1)-1,t(L)}if(i(65497),n){for(var O=U.length,P=new Uint8Array(O),Q=0;O>Q;Q++)P[Q]=U[Q].charCodeAt();U=[];(new Date).getTime()-o;return P}var R="data:image/jpeg;base64,"+btoa(U.join(""));U=[];(new Date).getTime()-o;return R},m()}r.exports=n}});
//# sourceMappingURL=2.chunk.js.map
\ No newline at end of file
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
1. 一般情况仅需引用 【lrz.bundle.js】 即可。
但绝对不要删除目录下的【*.chunk.js】，这些文件分别对应了IOS和Android的兼容代码，检测到符合环境时会自动引入。
2. 【lrz.all.bundle.js】是包含了所有引用了，莫名其妙的问题下就引用这个吧。
例如：https://github.com/think2011/localResizeIMG/issues/6
3. 【*.map】文件是供调试用的，正式使用删不删除都没关系，因为仅在调试时才会载入。
......@@ -22,6 +22,7 @@
"gm": "^1.23.0",
"lodash": "^4.16.5",
"log4js": "^0.6.38",
"lrz": "^4.9.40",
"node-uuid": "^1.4.7",
"redis": "^2.6.3",
"sequelize": "^3.24.6"
......
......@@ -16,6 +16,7 @@ const loggers = require('./init/log4js-init');
var ROOT_PATH = process.cwd();
app.use('/lib/', express.static(ROOT_PATH + '/lib'));
app.use('/test/', express.static(ROOT_PATH + '/test'));
app.get('/', function(req, res){
res.sendFile(ROOT_PATH + '/index.html');
......
<!doctype html>
<html lang="zh-cn">
<meta name="viewport" content="width=device-width, user-scalable=no">
<head>
<meta charset="UTF-8">
<title>lrz4 demo&test</title>
<link rel="stylesheet" href="../lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
<style>
img {
width: 100%;
max-width: 320px;
padding: 10px 15px;
}
.tip {
position: relative;
top: 15px;
right: 10px;
}
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="pull-right tip text-muted">遇到问题时请截图到 <a
href="https://github.com/think2011/localResizeIMG/issues">issues</a>
</div>
<div class="container">
<div class="navbar-header">
<a href="./" class="navbar-brand">Lrz4</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h3 style="margin-top: 0;">上传图片测试</h3>
<small><a href="server.html">切换至带服务端演示</a></small>
<br>
<small class="text-muted">配置：宽度不超过800，高度适应，70%压缩率</small>
<br>
<small class="text-muted UA">UA</small>
<hr/>
</div>
<div id="upload-container" class="col-xs-12 text-center">
<input accept="image/*" type="file"/>
</div>
<div class="col-xs-12 text-center">
<hr/>
<h3>旋转方向测试</h3>
<small class="text-muted">看到的图像应该全是一个方向的，没见到图片是出问题了</small>
<hr/>
</div>
<div class="col-xs-6 text-center">
<img data-src="img/orientation_1.JPG?v=49ec2ec"
src="http://placehold.it/1x1" alt="点击载入"/>
<p>方向为【1】的图片</p>
</div>
<div class="col-xs-6 text-center">
<img data-src="img/orientation_3.JPG?v=c393d29"
src="http://placehold.it/1x1" alt="点击载入"/>
<p>方向为【3】的图片</p>
</div>
<div class="col-xs-6 text-center">
<img data-src="img/orientation_6.JPG?v=cd9d967"
src="http://placehold.it/1x1" alt="点击载入"/>
<p>方向为【6】的图片</p>
</div>
<div class="col-xs-6 text-center">
<img data-src="img/orientation_8.JPG?v=619646c"
src="http://placehold.it/1x1" alt="点击载入"/>
<p>方向为【8】的图片</p>
</div>
</div>
</div>
<footer class="text-center">
<hr/>
<p class="text-muted"><a href="https://github.com/think2011/localResizeIMG">
localResizeIMG(<span id="version"></span>版) by think2011</a>
</p>
</footer>
<script src="../lib/lrz/lrz.bundle.js"></script>
<script src="./index.js?v=27ce5f7"></script>
</body>
</html>
window.onerror = function (errMsg, scriptURI, lineNumber, columnNumber, errorObj) {
setTimeout(function () {
var rst = {
"错误信息：": errMsg,
"出错文件：": scriptURI,
"出错行号：": lineNumber,
"出错列号：": columnNumber,
"错误详情：": errorObj
};
console.log('出错了，下一步将显示错误信息');
console.log(JSON.stringify(rst, null, 10));
});
};
[].forEach.call(document.querySelectorAll('[data-src]'), function (el) {
(function (el) {
el.addEventListener('click', function () {
el.src = 'img/loading.gif';
lrz(el.dataset.src)
.then(function (rst) {
el.src = rst.base64;
return rst;
});
});
fireEvent(el, 'click');
})(el);
});
document.querySelector('input').addEventListener('change', function () {
var that = this;
lrz(that.files[0], {
width: 800
})
.then(function (rst) {
var img = new Image(),
div = document.createElement('div'),
p = document.createElement('p'),
sourceSize = toFixed2(that.files[0].size / 1024),
resultSize = toFixed2(rst.fileLen / 1024),
scale = parseInt(100 - (resultSize / sourceSize * 100));
p.style.fontSize = 13 + 'px';
p.innerHTML = '源文件：<span class="text-danger">' +
sourceSize + 'KB' +
'</span> <br />' +
'压缩后传输大小：<span class="text-success">' +
resultSize + 'KB (省' + scale + '%)' +
'</span> ';
div.className = 'col-sm-6';
div.appendChild(img);
div.appendChild(p);
img.onload = function () {
document.querySelector('#upload-container').appendChild(div);
};
img.src = rst.base64;
/* /!* ==================================================== *!/
// 原生ajax上传代码，所以看起来特别多 ╮(╯_╰)╭，但绝对能用
// 其他框架，例如ajax处理formData略有不同，请自行google，baidu。
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function () {
if (xhr.status === 200) {
// 上传成功
} else {
// 处理其他情况
}
};
xhr.onerror = function () {
// 处理错误
};
// issues #45 提到似乎有兼容性问题,关于progress
xhr.upload.onprogress = function (e) {
// 上传进度
var percentComplete = ((e.loaded / e.total) || 0) * 100;
};
// 添加参数和触发上传
rst.formData.append('a', '我是参数');
xhr.send(rst.formData);
/!* ==================================================== *!/*/
return rst;
});
});
document.querySelector('#version').innerHTML = lrz.version;
document.querySelector('.UA').innerHTML = 'UA: ' + navigator.userAgent;
function toFixed2 (num) {
return parseFloat(+num.toFixed(2));
}
/**
* 替换字符串 !{}
* @param obj
* @returns {String}
* @example
* '我是!{str}'.render({str: '测试'});
*/
String.prototype.render = function (obj) {
var str = this, reg;
Object.keys(obj).forEach(function (v) {
reg = new RegExp('\\!\\{' + v + '\\}', 'g');
str = str.replace(reg, obj[v]);
});
return str;
};
/**
* 触发事件 - 只是为了兼容演示demo而已
* @param element
* @param event
* @returns {boolean}
*/
function fireEvent (element, event) {
var evt;
if (document.createEventObject) {
// IE浏览器支持fireEvent方法
evt = document.createEventObject();
return element.fireEvent('on' + event, evt)
}
else {
// 其他标准浏览器使用dispatchEvent方法
evt = document.createEvent('HTMLEvents');
// initEvent接受3个参数：
// 事件类型，是否冒泡，是否阻止浏览器的默认行为
evt.initEvent(event, true, true);
return !element.dispatchEvent(evt);
}
}
/**
*
* 　　　┏┓　　　┏┓
* 　　┏┛┻━━━┛┻┓
* 　　┃　　　　　　　┃
* 　　┃　　　━　　　┃
* 　　┃　┳┛　┗┳　┃
* 　　┃　　　　　　　┃
* 　　┃　　　┻　　　┃
* 　　┃　　　　　　　┃
* 　　┗━┓　　　┏━┛Code is far away from bug with the animal protecting
* 　　　　┃　　　┃ 神兽保佑,代码无bug
* 　　　　┃　　　┃
* 　　　　┃　　　┗━━━┓
* 　　　　┃　　　　　 ┣┓
* 　　　　┃　　　　 ┏┛
* 　　　　┗┓┓┏━┳┓┏┛
* 　　　　　┃┫┫　┃┫┫
* 　　　　　┗┻┛　┗┻┛
*
*/
This diff is collapsed. Click to expand it.
<!doctype html>
<html lang="zh-cn">
<meta name="viewport" content="width=device-width, user-scalable=no">
<head>
<meta charset="UTF-8">
<title>lrz4 demo&test</title>
<link rel="stylesheet" href="../lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
<style>
img {
width: 100%;
max-width: 320px;
padding: 10px 15px;
}
.tip {
position: relative;
top: 15px;
right: 10px;
}
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="pull-right tip text-muted">遇到问题时请截图到 <a
href="https://github.com/think2011/localResizeIMG/issues">issues</a>
</div>
<div class="container">
<div class="navbar-header">
<a href="./" class="navbar-brand">Lrz4 </a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h3 style="margin-top: 0;">上传图片测试</h3>
<small><a href="index.html">切换至无服务端演示</a></small>
<div>
<progress value="0" max="100"></progress>
</div>
<small class="text-muted">配置：宽度不超过800，高度适应，70%压缩率</small>
<br/>
<small class="text-muted">演示服务端是跨域上传且免费的,所以较慢,请耐心等待..</small>
<br/>
<small class="text-muted UA">UA</small>
<hr/>
</div>
<div id="upload-container" class="col-xs-12 text-center">
<input accept="image/*" type="file"/>
</div>
<div class="col-xs-12 text-center">
<hr/>
<h3>旋转方向测试</h3>
<small class="text-muted">看到的图像应该全是一个方向的，没见到图片是出问题了</small>
<hr/>
</div>
<div class="col-xs-6 text-center">
<img data-src="img/orientation_1.JPG?v=49ec2ec"
src="http://placehold.it/1x1" alt="点击载入"/>
<p>方向为【1】的图片</p>
</div>
<div class="col-xs-6 text-center">
<img data-src="img/orientation_3.JPG?v=c393d29"
src="http://placehold.it/1x1" alt="点击载入"/>
<p>方向为【3】的图片</p>
</div>
<div class="col-xs-6 text-center">
<img data-src="img/orientation_6.JPG?v=cd9d967"
src="http://placehold.it/1x1" alt="点击载入"/>
<p>方向为【6】的图片</p>
</div>
<div class="col-xs-6 text-center">
<img data-src="img/orientation_8.JPG?v=619646c"
src="http://placehold.it/1x1" alt="点击载入"/>
<p>方向为【8】的图片</p>
</div>
</div>
</div>
<footer class="text-center">
<hr/>
<p class="text-muted"><a href="https://github.com/think2011/localResizeIMG">
localResizeIMG(<span id="version"></span>版) by think2011</a>
</p>
</footer>
<script src="../lib/lrz/lrz.bundle.js"></script>
<script src="./server.js?v=c8aaa97"></script>
</body>
</html>
window.onerror = function (errMsg, scriptURI, lineNumber, columnNumber, errorObj) {
setTimeout(function () {
var rst = {
"错误信息：": errMsg,
"出错文件：": scriptURI,
"出错行号：": lineNumber,
"出错列号：": columnNumber,
"错误详情：": errorObj
};
console.log('出错了，下一步将显示错误信息');
console.log(JSON.stringify(rst, null, 10));
});
};
[].forEach.call(document.querySelectorAll('[data-src]'), function (el) {
(function (el) {
el.addEventListener('click', function () {
el.src = 'img/loading.gif';
lrz(el.dataset.src)
.then(function (rst) {
el.src = rst.base64;
return rst;
});
});
fireEvent(el, 'click');
})(el);
});
document.querySelector('input').addEventListener('change', function () {
var that = this,
progress = document.querySelector('progress');
lrz(that.files[0], {
width: 1024
})
.then(function (rst) {
var img = new Image(),
div = document.createElement('div'),
p = document.createElement('p'),
sourceSize = toFixed2(that.files[0].size / 1024),
resultSize = toFixed2(rst.fileLen / 1024),
effect = parseInt(100 - (resultSize / sourceSize * 100));
p.style.fontSize = 13 + 'px';
p.innerHTML = '源文件：<span class="text-danger">!{sourceSize}KB</span> <br>压缩后传输大小：<span class="text-success">!{resultSize}KB (省!{effect}%)</span> '.render({
sourceSize: sourceSize,
resultSize: resultSize,
effect : effect
});
div.className = 'col-sm-6';
div.appendChild(img);
div.appendChild(p);
img.onload = function () {
document.querySelector('#upload-container').appendChild(div);
};
progress.value = 0;
/* ==================================================== */
// 原生ajax上传代码，所以看起来特别多 ╮(╯_╰)╭，但绝对能用
// 其他框架，例如ajax处理formData略有不同，请自行google，baidu。
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function () {
var data = JSON.parse(xhr.response);
if (xhr.status === 200) {
// 上传成功
img.src = rst.base64;
progress.value = 0;
} else {
// 处理错误
console.log(data.msg);
div.remove();
that.value = null;
}
};
xhr.onerror = function (err) {
console.log('未知错误:' + JSON.stringify(err, null, 2));
div.remove();
that.value = null;
};
// issues #45 提到似乎有兼容性问题,关于progress
if (xhr.upload) {
try {
xhr.upload.addEventListener('progress', function (e) {
if (!e.lengthComputable) return false;
// 上传进度
progress.value = ((e.loaded / e.total) || 0) * 100;
});
} catch (err) {
console.error('进度展示出错了,似乎不支持此特性?', err);
}
}
// 添加参数
rst.formData.append('fileLen', rst.fileLen);
rst.formData.append('xxx', '我是其他参数');
// 触发上传
xhr.send(rst.formData);
/* ==================================================== */
return rst;
});
});
document.querySelector('#version').innerHTML = lrz.version;
document.querySelector('.UA').innerHTML = 'UA: ' + navigator.userAgent;
function toFixed2 (num) {
return parseFloat(+num.toFixed(2));
}
/**
* 替换字符串 !{}
* @param obj
* @returns {String}
* @example
* '我是!{str}'.render({str: '测试'});
*/
String.prototype.render = function (obj) {
var str = this, reg;
Object.keys(obj).forEach(function (v) {
reg = new RegExp('\\!\\{' + v + '\\}', 'g');
str = str.replace(reg, obj[v]);
});
return str;
};
/**
* 触发事件 - 只是为了兼容演示demo而已
* @param element
* @param event
* @returns {boolean}
*/
function fireEvent (element, event) {
var evt;
if (document.createEventObject) {
// IE浏览器支持fireEvent方法
evt = document.createEventObject();
return element.fireEvent('on' + event, evt)
}
else {
// 其他标准浏览器使用dispatchEvent方法
evt = document.createEvent('HTMLEvents');
// initEvent接受3个参数：
// 事件类型，是否冒泡，是否阻止浏览器的默认行为
evt.initEvent(event, true, true);
return !element.dispatchEvent(evt);
}
}
/**
* 替换字符串 !{}
* @param obj
* @returns {String}
* @example
* '我是!{str}'.render({str: '测试'});
*/
String.prototype.render = function (obj) {
var str = this, reg;
Object.keys(obj).forEach(function (v) {
reg = new RegExp('\\!\\{' + v + '\\}', 'g');
str = str.replace(reg, obj[v]);
});
return str;
};
if (!('remove' in Element.prototype)) {
Element.prototype.remove = function () {
this.parentNode.removeChild(this);
};
}
/**
*
* 　　　┏┓　　　┏┓
* 　　┏┛┻━━━┛┻┓
* 　　┃　　　　　　　┃
* 　　┃　　　━　　　┃
* 　　┃　┳┛　┗┳　┃
* 　　┃　　　　　　　┃
* 　　┃　　　┻　　　┃
* 　　┃　　　　　　　┃
* 　　┗━┓　　　┏━┛Code is far away from bug with the animal protecting
* 　　　　┃　　　┃ 神兽保佑,代码无bug
* 　　　　┃　　　┃
* 　　　　┃　　　┗━━━┓
* 　　　　┃　　　　　 ┣┓
* 　　　　┃　　　　 ┏┛
* 　　　　┗┓┓┏━┳┓┏┛
* 　　　　　┃┫┫　┃┫┫
* 　　　　　┗┻┛　┗┻┛
*
*/