Remove remote url feature and replace it with upload file feature

This commit is contained in:
Valvin 2017-09-19 22:35:25 +02:00
parent c9806da48f
commit dc05f97280
4 changed files with 33 additions and 14 deletions

View File

@ -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++)
{
var file = fileList[i];
nBytes += file.size;
if (!file.type.match(imageType))
{
continue;
}
imgUrl = window.URL.createObjectURL(file);
cg.createImage(imgUrl);
}
cg.createImage(imgUrl);
$('#newImgUrl').val('');
}
} }
cg.saveImage = function(){ cg.saveImage = function(){
var data = c.toDataURL('png'); var data = c.toDataURL('png');

View File

@ -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;
}

View File

@ -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">
</div> <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 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
View File

@ -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=