Merge branch 'canvasandupload' into 'master'
Taille canvas dynamique et importation image See merge request !6
This commit is contained in:
Luc Didry
commit
e5d0225289
4 changed files with 126 additions and 75 deletions
54
comicgen.js
54
comicgen.js
|
|
@ -1,13 +1,17 @@
|
|||
var d = document;
|
||||
var cg = {};
|
||||
var c = $('#c')[0];
|
||||
var w = parseInt(window.innerWidth * 0.8);
|
||||
var h = parseInt(window.innerHeight * 0.8);
|
||||
var canvas = $('#c');
|
||||
canvas.attr('width',w).attr('height',h);
|
||||
var c = canvas[0];
|
||||
var ctx = c.getContext('2d');
|
||||
var scene = new RB.Scene(c);
|
||||
var w = c.width;
|
||||
var h = c.height;
|
||||
var fontFamily = "Domestic Manners, Arial, helvetica, sans serif";
|
||||
var pop = new Audio('pop.ogg');
|
||||
var currentObj = null;
|
||||
$('#newWidth').val(w);
|
||||
$('#newHeight').val(h);
|
||||
|
||||
scene.add( scene.rect(w, h, 'white') );
|
||||
scene.update();
|
||||
|
|
@ -68,9 +72,10 @@ d.onmousewheel = function(mw){
|
|||
};
|
||||
|
||||
cg.hoverdiv = function(e,divid){
|
||||
|
||||
var left = e.clientX + "px";
|
||||
var top = e.clientY + "px";
|
||||
var x = e.clientX + 25;
|
||||
var y = e.clientY ;
|
||||
var left = x + "px";
|
||||
var top = y + "px";
|
||||
|
||||
|
||||
var div = document.getElementById(divid);
|
||||
|
|
@ -81,21 +86,22 @@ cg.hoverdiv = function(e,divid){
|
|||
return false;
|
||||
}
|
||||
cg.sourceSwap = function (e) {
|
||||
var img_mini = $(this);
|
||||
var img_id = parseInt(img_mini.data('src-id'));
|
||||
var div_mini = $(this);
|
||||
var img_id = parseInt(div_mini.data('src-id'));
|
||||
var img_url = toonUrls[img_id];
|
||||
console.log(img_url)
|
||||
$("#bigImg").attr('src','toons/' + img_url);
|
||||
cg.hoverdiv(e,"focusImg")
|
||||
}
|
||||
cg.buildMinis = function(){
|
||||
var buffer = '';
|
||||
var divString = "<div class='himg' data-src-id='IMG_ID'>";
|
||||
var imgString = "<img src='toons/IMG_URL' data-src-id='IMG_ID' class='rc mini' alt='toons'></img>";
|
||||
var link = "<a href=\"javascript:cg.createImage('toons/IMG_URL')\">";
|
||||
|
||||
for(var i=0; i < miniUrls.length; i++){
|
||||
buffer += divString.replace(/IMG_ID/,i);
|
||||
buffer += link.replace(/IMG_URL/, toonUrls[i]);
|
||||
buffer += imgString.replace(/IMG_URL/, miniUrls[i]).replace(/IMG_ID/, i) + '</a>';
|
||||
buffer += imgString.replace(/IMG_URL/, miniUrls[i]).replace(/IMG_ID/, i) + '</a></div>';
|
||||
}
|
||||
|
||||
lib.append(buffer);
|
||||
|
|
@ -103,7 +109,7 @@ cg.buildMinis = function(){
|
|||
//lib.append( $('#textTool').clone() );
|
||||
$('#menuContainer').append( $('#instructs').clone() );
|
||||
$(function () {
|
||||
$('img.rc').hover(cg.sourceSwap, cg.sourceSwap);
|
||||
$('div.himg').hover(cg.sourceSwap, cg.sourceSwap);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -171,9 +177,35 @@ cg.createTextFromInput = function(e){
|
|||
pop.play();
|
||||
}
|
||||
}
|
||||
cg.createImageFromInput= function(t){
|
||||
|
||||
var fileList = t.files; /* now you can work with the file list */
|
||||
var imageType = /image.*/;
|
||||
var nBytes = 0;
|
||||
|
||||
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.saveImage = function(){
|
||||
var data = c.toDataURL('png');
|
||||
// $.ajax({
|
||||
// type: "POST",
|
||||
// url: 'https://lut.im',
|
||||
// data: data,
|
||||
// success: function(d){console.log(d);},
|
||||
// dataType: 'json'
|
||||
// });
|
||||
var win = window.open();
|
||||
var b = win.document.body;
|
||||
var img = new Image();
|
||||
|
|
|
|||
26
gege.css
26
gege.css
|
|
@ -53,7 +53,7 @@ margin: 0;
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
h1, h2
|
||||
h1, h2, h3
|
||||
{
|
||||
text-transform: uppercase;
|
||||
background-color: transparent;
|
||||
|
|
@ -87,10 +87,10 @@ color:#000;
|
|||
|
||||
#wrapper
|
||||
{
|
||||
width: 1052px;
|
||||
margin:0 auto;
|
||||
margin-top: 60px;
|
||||
height: 602px;
|
||||
width: auto;
|
||||
margin:0;
|
||||
margin-top: 30px;
|
||||
height: auto;
|
||||
background-color: #d5b578;
|
||||
border:7px solid rgb(213, 181, 120);
|
||||
box-shadow:0 3px 10px black;
|
||||
|
|
@ -212,7 +212,7 @@ padding: 0;
|
|||
|
||||
footer
|
||||
{
|
||||
margin-top: 50px;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #273740;
|
||||
|
|
@ -243,3 +243,17 @@ text-decoration: underline;
|
|||
position: fixed;
|
||||
|
||||
}
|
||||
#newWidth, #newHeight{
|
||||
|
||||
width: 70px ;
|
||||
display : inline;
|
||||
}
|
||||
.upload{
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
|
||||
input.file {
|
||||
display:none;
|
||||
}
|
||||
|
|
|
|||
52
gege.js
Normal file
52
gege.js
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
|
||||
checkCacheFunction = function() {
|
||||
var webappCache = window.applicationCache;
|
||||
|
||||
function loaded()
|
||||
{
|
||||
//var h1El = document.querySelector("h1");
|
||||
var connectionStatus = ((navigator.onLine) ? 'online' : 'offline');
|
||||
//h1El.textContent = h1El.textContent + " - currently: " + connectionStatus;
|
||||
|
||||
switch(webappCache.status)
|
||||
{
|
||||
case 0:
|
||||
console.log("Cache status: Uncached");
|
||||
break;
|
||||
case 1:
|
||||
console.log("Cache status: Idle");
|
||||
break;
|
||||
case 2:
|
||||
console.log("Cache status: Checking");
|
||||
break;
|
||||
case 3:
|
||||
console.log("Cache status: Downloading");
|
||||
break;
|
||||
case 4:
|
||||
console.log("Cache status: Updateready");
|
||||
break;
|
||||
case 5:
|
||||
console.log("Cache status: Obsolete");
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function updateCache()
|
||||
{
|
||||
webappCache.swapCache();
|
||||
console.log("Cache has been updated due to a change found in the manifest");
|
||||
}
|
||||
|
||||
function errorCache()
|
||||
{
|
||||
console.log("You're either offline or something has gone horribly wrong.");
|
||||
}
|
||||
|
||||
window.addEventListener("load", loaded, false);
|
||||
webappCache.addEventListener("updateready", updateCache, false);
|
||||
webappCache.addEventListener("error", errorCache, false);
|
||||
|
||||
}
|
||||
|
||||
checkCacheFunction();
|
||||
|
|
@ -1,59 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<html manifest="comicgen.appcache">
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="gege.css"/>
|
||||
<script>
|
||||
(function() {
|
||||
var webappCache = window.applicationCache;
|
||||
|
||||
function loaded()
|
||||
{
|
||||
//var h1El = document.querySelector("h1");
|
||||
var connectionStatus = ((navigator.onLine) ? 'online' : 'offline');
|
||||
//h1El.textContent = h1El.textContent + " - currently: " + connectionStatus;
|
||||
|
||||
switch(webappCache.status)
|
||||
{
|
||||
case 0:
|
||||
console.log("Cache status: Uncached");
|
||||
break;
|
||||
case 1:
|
||||
console.log("Cache status: Idle");
|
||||
break;
|
||||
case 2:
|
||||
console.log("Cache status: Checking");
|
||||
break;
|
||||
case 3:
|
||||
console.log("Cache status: Downloading");
|
||||
break;
|
||||
case 4:
|
||||
console.log("Cache status: Updateready");
|
||||
break;
|
||||
case 5:
|
||||
console.log("Cache status: Obsolete");
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function updateCache()
|
||||
{
|
||||
webappCache.swapCache();
|
||||
console.log("Cache has been updated due to a change found in the manifest");
|
||||
}
|
||||
|
||||
function errorCache()
|
||||
{
|
||||
console.log("You're either offline or something has gone horribly wrong.");
|
||||
}
|
||||
|
||||
window.addEventListener("load", loaded, false);
|
||||
webappCache.addEventListener("updateready", updateCache, false);
|
||||
webappCache.addEventListener("error", errorCache, false);
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
<title>GéGé, Geektionnerd Generator</title>
|
||||
</head>
|
||||
|
|
@ -70,12 +19,14 @@
|
|||
<p class="hidden">Geektionnerd Generator</p>
|
||||
<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 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="Importer une ou plusieurs images">Importer une image</a></h2></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hiddenObjs">
|
||||
<div id="textTool" class="rc mini textTool" title="Ajouter du texte" onclick="cg.createText();">T</div>
|
||||
|
||||
<div id="instructs" class="rc instructions">
|
||||
<h2>Instructions</h2>
|
||||
<ul>
|
||||
|
|
@ -90,14 +41,15 @@
|
|||
|
||||
<h2 class="save"><a href="javascript:cg.saveImage();" title="enregistrer l image">Enregistrer votre image</a></h2>
|
||||
<h2 class="last">Redimensionner la fenêtre</h2>
|
||||
<p><a href="javascript:cg.setScreen(800, 600)" title="choisir une autre taille d ecran" png">800x600</a> |
|
||||
<a href="javascript:cg.setScreen(640, 480)" title="choisir une autre taille d ecran">640x480</a> |
|
||||
<a href="javascript:cg.setScreen(320, 240)" title="choisir une autre taille d ecran">320x240</a></p>
|
||||
<br />
|
||||
<p> <input type="text" id="newWidth" placeholder="Largeur"/> x <input type="text" id="newHeight" placeholder="Hauteur"/> </p>
|
||||
<br/>
|
||||
<h2 class="save"><a href="javascript:cg.setScreen($('#newWidth').val(), $('#newHeight').val())" class="save">Redimensionner</a> </h2>
|
||||
</div></div>
|
||||
<!-- fin tableau de bord -->
|
||||
|
||||
<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.
|
||||
</canvas>
|
||||
</div>
|
||||
|
|
@ -110,6 +62,7 @@
|
|||
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
|
||||
<script type="text/javascript" src="ragaboom.min.js"></script>
|
||||
<script type="text/javascript" src="comicgen.js"></script>
|
||||
<script type="text/javascript" src="gege.js"></script>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
Loading…
Reference in a new issue