Remove remote url feature and replace it with upload file feature
This commit is contained in:
parent
c9806da48f
commit
dc05f97280
4 changed files with 33 additions and 14 deletions
21
comicgen.js
21
comicgen.js
|
@ -177,16 +177,25 @@ cg.createTextFromInput = function(e){
|
||||||
pop.play();
|
pop.play();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
cg.createImageFromInput= function(e){
|
cg.createImageFromInput= function(t){
|
||||||
|
|
||||||
var key = e.keyCode || e.which;
|
var fileList = t.files; /* now you can work with the file list */
|
||||||
var imgUrl = $('#newImgUrl').val();
|
var imageType = /image.*/;
|
||||||
|
var nBytes = 0;
|
||||||
|
|
||||||
if(key == 13){
|
for (var i = 0; i < fileList.length; i++)
|
||||||
|
{
|
||||||
|
|
||||||
cg.createImage(imgUrl);
|
var file = fileList[i];
|
||||||
$('#newImgUrl').val('');
|
nBytes += file.size;
|
||||||
|
if (!file.type.match(imageType))
|
||||||
|
{
|
||||||
|
continue;
|
||||||
}
|
}
|
||||||
|
imgUrl = window.URL.createObjectURL(file);
|
||||||
|
cg.createImage(imgUrl);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
cg.saveImage = function(){
|
cg.saveImage = function(){
|
||||||
var data = c.toDataURL('png');
|
var data = c.toDataURL('png');
|
||||||
|
|
9
gege.css
9
gege.css
|
@ -248,3 +248,12 @@ text-decoration: underline;
|
||||||
width: 70px ;
|
width: 70px ;
|
||||||
display : inline;
|
display : inline;
|
||||||
}
|
}
|
||||||
|
.upload{
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
input.file {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html manifest="comicgen.appcache">
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="stylesheet" href="gege.css"/>
|
<link rel="stylesheet" href="gege.css"/>
|
||||||
|
@ -70,13 +70,14 @@
|
||||||
<p class="hidden">Geektionnerd Generator</p>
|
<p class="hidden">Geektionnerd Generator</p>
|
||||||
<div id="lib" class="rc">
|
<div id="lib" class="rc">
|
||||||
<div><label for="newText"><span class="hidden">Saisissez votre bulle</span></label> <input type="text" id="newText" placeholder="Saisissez votre bulle" onkeypress="cg.createTextFromInput(event)"/></div>
|
<div><label for="newText"><span class="hidden">Saisissez votre bulle</span></label> <input type="text" id="newText" placeholder="Saisissez votre bulle" onkeypress="cg.createTextFromInput(event)"/></div>
|
||||||
<div><label for="newImgUrl"><span class="hidden">Saisissez l'URL de l'image que vous souhaitez importer</span></label> <input type="text" id="newImgUrl" placeholder="Saisissez une URL image" onkeypress="cg.createImageFromInput(event)"/></div>
|
<div class="upload">
|
||||||
|
<input type="file" accept="image/*" id="imageFileInput" class="file" multiple onchange='cg.createImageFromInput(this)' />
|
||||||
|
<h2 class="save"><a href="#" onclick="$('#imageFileInput').click();" title="Télécharger une ou plusieurs images">Télécharger une image</a></h2></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hiddenObjs">
|
<div id="hiddenObjs">
|
||||||
<div id="textTool" class="rc mini textTool" title="Ajouter du texte" onclick="cg.createText();">T</div>
|
<div id="textTool" class="rc mini textTool" title="Ajouter du texte" onclick="cg.createText();">T</div>
|
||||||
|
|
||||||
<div id="instructs" class="rc instructions">
|
<div id="instructs" class="rc instructions">
|
||||||
<h2>Instructions</h2>
|
<h2>Instructions</h2>
|
||||||
<ul>
|
<ul>
|
||||||
|
@ -99,7 +100,7 @@
|
||||||
<!-- fin tableau de bord -->
|
<!-- fin tableau de bord -->
|
||||||
|
|
||||||
<div id="cscreen">
|
<div id="cscreen">
|
||||||
<canvas class="rc" id="c" width="800" height="600">
|
<canvas class="rc" id="c" crossorigin="anonymous" width="800" height="600">
|
||||||
Le générateur du GKND a besoin d'un navigateur récent et de javascript pour fonctionner.
|
Le générateur du GKND a besoin d'un navigateur récent et de javascript pour fonctionner.
|
||||||
</canvas>
|
</canvas>
|
||||||
</div>
|
</div>
|
||||||
|
|
2
ragaboom.min.js
vendored
2
ragaboom.min.js
vendored
|
@ -4,7 +4,7 @@ c.length;i++)this.add(c[i])};this.remove=function(c){for(var c=c.getId(),i=d.len
|
||||||
e=h+i;e<0&&(e=0);e>=a&&(e=a-1);a=d[h];d[h]=d[e];d[e]=a};getObjectById=function(c){for(var a=d.length,f=0;f<a;f++)if(d[f].getId()==c)return o;return null};getIdByObject=function(c){for(var a=d.length,f=0;f<a;f++)if(d[f].getId()==c.getId())return f;return null};this.setMovableObject=function(c){m=typeof c=="object"?c.getId():c};this.getMovableObject=function(){return getObjectById(m)};var B=function(c,a){switch(c.keyCode){case 37:u=a;break;case 38:s=a;break;case 39:z=a;break;case 40:p=a}};this.onmousemove=
|
e=h+i;e<0&&(e=0);e>=a&&(e=a-1);a=d[h];d[h]=d[e];d[e]=a};getObjectById=function(c){for(var a=d.length,f=0;f<a;f++)if(d[f].getId()==c)return o;return null};getIdByObject=function(c){for(var a=d.length,f=0;f<a;f++)if(d[f].getId()==c.getId())return f;return null};this.setMovableObject=function(c){m=typeof c=="object"?c.getId():c};this.getMovableObject=function(){return getObjectById(m)};var B=function(c,a){switch(c.keyCode){case 37:u=a;break;case 38:s=a;break;case 39:z=a;break;case 40:p=a}};this.onmousemove=
|
||||||
function(){};this.onmousedown=function(){};this.onmouseup=function(){};this.onkeydown=function(){};this.onkeyup=function(){};var j=this;b.onmousemove=function(c){if(v&&t)t.x=RB.xPos(c)-A,t.y=RB.yPos(c)-l,w||j.update();j.onmousemove(c)};b.onmousedown=function(c){for(var a=r.length-1;a>=0;a--){var f=r[a];if(f.checkRange(RB.xPos(c),RB.yPos(c))){f.onmousedown(c);t=f;currentObjectIndex=a;A=RB.xPos(c)-t.x;l=RB.yPos(c)-t.y;v=!0;break}}j.onmousedown(c)};b.onmouseup=function(c){v=!1;j.onmouseup(c)};n.onkeydown=
|
function(){};this.onmousedown=function(){};this.onmouseup=function(){};this.onkeydown=function(){};this.onkeyup=function(){};var j=this;b.onmousemove=function(c){if(v&&t)t.x=RB.xPos(c)-A,t.y=RB.yPos(c)-l,w||j.update();j.onmousemove(c)};b.onmousedown=function(c){for(var a=r.length-1;a>=0;a--){var f=r[a];if(f.checkRange(RB.xPos(c),RB.yPos(c))){f.onmousedown(c);t=f;currentObjectIndex=a;A=RB.xPos(c)-t.x;l=RB.yPos(c)-t.y;v=!0;break}}j.onmousedown(c)};b.onmouseup=function(c){v=!1;j.onmouseup(c)};n.onkeydown=
|
||||||
function(c){B(c,!0);j.onkeydown(c)};n.onkeyup=function(c){B(c,!1);j.onkeyup(c)};this.getObjectSize=function(){return d.length};this.getObj=function(c){return d[c]};this.rect=function(c,a,f,h,e){var h=h||this.genID(),h=RB.createCanvas(c,a,h),g=h.getContext("2d");if(f)g.fillStyle=RB.getFS(f,g,a),g.fillRect(0,0,c,a);if(e)f=e.lineWidth||1,g.lineWidth=e.lineWidth,g.strokeStyle=e.strokeStyle,g.rect(0+f,0+f,c-f-f,a-f-f),g.stroke();return rectObj=new RB.Obj(h,this.ctx)};this.image=function(c,i,f){var h=new Image,
|
function(c){B(c,!0);j.onkeydown(c)};n.onkeyup=function(c){B(c,!1);j.onkeyup(c)};this.getObjectSize=function(){return d.length};this.getObj=function(c){return d[c]};this.rect=function(c,a,f,h,e){var h=h||this.genID(),h=RB.createCanvas(c,a,h),g=h.getContext("2d");if(f)g.fillStyle=RB.getFS(f,g,a),g.fillRect(0,0,c,a);if(e)f=e.lineWidth||1,g.lineWidth=e.lineWidth,g.strokeStyle=e.strokeStyle,g.rect(0+f,0+f,c-f-f,a-f-f),g.stroke();return rectObj=new RB.Obj(h,this.ctx)};this.image=function(c,i,f){var h=new Image,
|
||||||
e=this,g=null;h.crossOrigin = "anonymous";h.onload=function(){f=f||e.genID();g=RB.createCanvas(h.width,h.height,f);g.getContext("2d").drawImage(this,0,0);a++;var c=new RB.Obj(g,e.ctx);i(c)};h.src=c;x++};this.loadImage=function(c,i,f){var h=new Image,e=this,g=null;h.onload=function(){i=i||e.genID();g=RB.createCanvas(h.width,h.height,i);g.getContext("2d").drawImage(this,0,0);a++;f(g)};h.src=c;x++};this.imagePattern=function(c,i,f,h,e){var g=new Image,b=this;g.onload=function(){e=e||b.genID();var c=RB.createCanvas(i,f,e).getContext("2d"),
|
e=this,g=null;h.onload=function(){f=f||e.genID();g=RB.createCanvas(h.width,h.height,f);g.getContext("2d").drawImage(this,0,0);a++;var c=new RB.Obj(g,e.ctx);i(c)};h.src=c;x++};this.loadImage=function(c,i,f){var h=new Image,e=this,g=null;h.onload=function(){i=i||e.genID();g=RB.createCanvas(h.width,h.height,i);g.getContext("2d").drawImage(this,0,0);a++;f(g)};h.src=c;x++};this.imagePattern=function(c,i,f,h,e){var g=new Image,b=this;g.onload=function(){e=e||b.genID();var c=RB.createCanvas(i,f,e).getContext("2d"),
|
||||||
d=c.createPattern(g,h);c.fillStyle=d;c.fillRect(0,0,i,f);a++;a==x&&b.doAfterLoad()};g.src=c;x++};this.roundRect=function(c,a,f,h,e,g){var e=e||this.genID(),e=RB.createCanvas(c,a,e),b=e.getContext("2d");b.beginPath();b.moveTo(0+f,0);b.lineTo(c+0-f,0);b.quadraticCurveTo(c+0,0,c+0,0+f);b.lineTo(c+0,a+0-f);b.quadraticCurveTo(c+0,0+a,c+0-f,0+a);b.lineTo(0+f,0+a);b.quadraticCurveTo(0,0+a,0,0+a-f);b.lineTo(0,0+f);b.quadraticCurveTo(0,0,0+f,0);b.closePath();if(h)b.fillStyle=RB.getFS(h,b,a),b.fill();if(g)b.lineWidth=
|
d=c.createPattern(g,h);c.fillStyle=d;c.fillRect(0,0,i,f);a++;a==x&&b.doAfterLoad()};g.src=c;x++};this.roundRect=function(c,a,f,h,e,g){var e=e||this.genID(),e=RB.createCanvas(c,a,e),b=e.getContext("2d");b.beginPath();b.moveTo(0+f,0);b.lineTo(c+0-f,0);b.quadraticCurveTo(c+0,0,c+0,0+f);b.lineTo(c+0,a+0-f);b.quadraticCurveTo(c+0,0+a,c+0-f,0+a);b.lineTo(0+f,0+a);b.quadraticCurveTo(0,0+a,0,0+a-f);b.lineTo(0,0+f);b.quadraticCurveTo(0,0,0+f,0);b.closePath();if(h)b.fillStyle=RB.getFS(h,b,a),b.fill();if(g)b.lineWidth=
|
||||||
g.lineWidth,b.strokeStyle=g.strokeStyle,b.stroke();return new RB.Obj(e,this.ctx)};this.text=function(a,b,f,h,e){var g=RB.getTextBuffer(),e=e||this.genID();g.innerHTML=a;g.style.fontFamily=b;g.style.fontSize=f+"px";var d=RB.el(e);d?(e=d.getContext("2d"),d.width=g.offsetWidth,d.height=g.offsetHeight+15,e.clearRect(0,0,g.offsetWidth,g.offsetHeight+15)):(d=RB.createCanvas(g.offsetWidth,g.offsetHeight+15,e),e=d.getContext("2d"));e.fillStyle=RB.getFS(h,e,g.offsetHeight+25);e.font="normal "+f+"px "+b;e.fillText(a,
|
g.lineWidth,b.strokeStyle=g.strokeStyle,b.stroke();return new RB.Obj(e,this.ctx)};this.text=function(a,b,f,h,e){var g=RB.getTextBuffer(),e=e||this.genID();g.innerHTML=a;g.style.fontFamily=b;g.style.fontSize=f+"px";var d=RB.el(e);d?(e=d.getContext("2d"),d.width=g.offsetWidth,d.height=g.offsetHeight+15,e.clearRect(0,0,g.offsetWidth,g.offsetHeight+15)):(d=RB.createCanvas(g.offsetWidth,g.offsetHeight+15,e),e=d.getContext("2d"));e.fillStyle=RB.getFS(h,e,g.offsetHeight+25);e.font="normal "+f+"px "+b;e.fillText(a,
|
||||||
0,g.offsetHeight+5);return new RB.Obj(d,this.ctx)};this.start=function(){w=!0;this.animate()};this.stop=function(){w=!1};this.toggleStart=function(){w?this.stop():this.start()};this.onLoop=function(){};this.runOnce=function(){this.ctx.restore();for(var a=d.length,b=q.length,f=0;f<a;f++){var h=d[f];if(h.visible){h.run();if(h.collidable&&!h.obstacle)for(var e=0;e<b;e++){var g=q[e];if(h.getId()!=g.getId())if(g=h.checkCollision(g,!0),g.top||g.bottom||g.left||g.right){h.colliding=!0;h.collidingCoords=
|
0,g.offsetHeight+5);return new RB.Obj(d,this.ctx)};this.start=function(){w=!0;this.animate()};this.stop=function(){w=!1};this.toggleStart=function(){w?this.stop():this.start()};this.onLoop=function(){};this.runOnce=function(){this.ctx.restore();for(var a=d.length,b=q.length,f=0;f<a;f++){var h=d[f];if(h.visible){h.run();if(h.collidable&&!h.obstacle)for(var e=0;e<b;e++){var g=q[e];if(h.getId()!=g.getId())if(g=h.checkCollision(g,!0),g.top||g.bottom||g.left||g.right){h.colliding=!0;h.collidingCoords=
|
||||||
|
|
Loading…
Reference in a new issue