HTML/CSS/JavaScript

Convertir une image en Canvas HTML5 en PHP

Rédigé par BeHuman - - aucun commentaire

Pour le fun je me suis fait un script PHP qu me converti une image en tableau HTML

 

 

<?php
error_reporting(E_ALL); 
ini_set("display_errors", 1); 
function genImg($filename, $opacity="1") {
    if ( ( preg_match('/.*\.png$/i',$filename) || preg_match('/.*\.jpg$/i',$filename) || preg_match('/.*\.gif$/i',$filename) ) &&  file_exists($filename) ) {
        if (preg_match('/.*\.png$/i',$filename)) {
            $im = imagecreatefrompng($filename);
        } else if (preg_match('/.*\.jpg$/i',$filename) || preg_match('/.*\.jpeg$/i',$filename) ) {
            $im = imagecreatefromjpeg($filename);
        } else if (preg_match('/.*\.gif$/i',$filename)) {
            $im = imagecreatefromgif($filename);
        }
        $npx=0;
        $size = getimagesize($filename);
        $html= "<canvas id='myCanvas'  style='border:0px none; width:".$size[0]."px!important;height:".$size[1]."px;' width='".$size[0]."px' height='".$size[1]."px'>Your browser does not support the HTML5 canvas tag.
</canvas><script>var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');";
        for ($i=1; $i<=$size[1]-1; $i++) {
            for ($ii=1; $ii<=$size[0]-1; $ii++) {
                $rgb = imagecolorat($im, $ii, $i);
                $r = ($rgb >> 16) & 0xFF;
                $g = ($rgb >> 8) & 0xFF;
                $b = $rgb & 0xFF;
                $html.= "ctx.fillStyle = \"rgba(".$r.",".$g.",".$b.",".$opacity.")\";";
                $html.= "ctx.fillRect(".$ii.",".$i.",1,1);";
            }
        }
        $html.= "</script>";
    }
    return $html;
}

$fl="ex-img2html/php.jpg";
if (file_exists($fl)) {
    echo "<u>Image d'origine :</u><br>".
        "<img src='".$fl."'><br><br>".
        "<u>Image convertie :</u><br>".
        genImg($fl);
}

 

Voir la démo

++

Démonstration vidéo du 15 Juin 2013 de ShadowSpace

Rédigé par BeHuman - - 1 commentaire

ShadowSpace est un jeu en cours en développement en WebGL. Le principal objectif est de développer un MMORPG couplet FPS...dans cette démonstration je vous montre la gestion multiplayer gérer en XML via AJAX.

la source est disponible ici

Lire la suite de Démonstration vidéo du 15 Juin 2013 de ShadowSpace

ShadowSpace un MMORPG en WebGL

Rédigé par BeHuman - - 4 commentaires

ShadowSpace est un projet perso que je développe quand j'ai un peu de temps libre devant moi. Le but de ce projet est de créer un jeu spacial du type MMORPG/FPS à la X3 TerranConflict disponible sur Steam

j'ai débuté ce projet avec un example disponible dans la librairie http://threejs.org/ , ensuite j'ai ajouté quelques éléments pour comprendre le mechanisme de la librairie et pour finir ma base, j'ai dev une librairie ajax en javascript , une librairie xml en php et créé un système de session multijoueur avec le tout.

Pour commencer je vous balance quelques captures d'écran:

 

Lire la suite de ShadowSpace un MMORPG en WebGL

mobile ou tablette en Javascript ?

Rédigé par BeHuman - - 13 commentaires

Pour vos développement web il est de plus en plus important de mettre en place une gestion d'affichage pour mobile et tablette. Dans cet exemple je vais vous montrer comment faire cela en javascript.

if (navigator.userAgent.match(/(android|iphone|blackberry|symbian|symbianos|symbos|netfront|model-orange|javaplatform|iemobile|windows phone|samsung|htc|opera mobile|opera mobi|opera mini|presto|huawei|blazer|bolt|doris|fennec|gobrowser|iris|maemo browser|mib|cldc|minimo|semc-browser|skyfire|teashark|teleca|uzard|uzardweb|meego|nokia|bb10|playbook)/gi)) {
    alert('mobile');
} else {
    alert('none');
}

comme vous pouvez le constater, le code est plutot simple.

navigator.userAgent;

permet de récupérer l'user-agent du navigateur internet du visiteur. ensuite via match je vais vérifier l'existance de sous chaînes de caractère dans notre user-agent, exemple:

navigator.userAgent.match(/(android|ipute)/gi);

Pour les tablette c'est une autre histoire, car un IPAD on est d'accord, c'est forcement une tablette, mais un android ? :) cela peu être aussi bien un mobile qu'une tablette. Donc pour détecter si c'est une tablette je vais utiliser uhne autre méthode qui consiste à récupérer la taille de l'écran du visiteur et ainsi je pourrez déterminer si il utilise une tablette ou non.

if ((screen.width  >= 480) && (screen.height >= 800)) alert('tablette');

comme vous pouvez le constater là aussi, c'est plutot simple à mettre en place, non?

Bon, maintenant je vais couplet tout ça

if (navigator.userAgent.match(/(android|iphone|ipad|blackberry|symbian|symbianos|symbos|netfront|model-orange|javaplatform|iemobile|windows phone|samsung|htc|opera mobile|opera mobi|opera mini|presto|huawei|blazer|bolt|doris|fennec|gobrowser|iris|maemo browser|mib|cldc|minimo|semc-browser|skyfire|teashark|teleca|uzard|uzardweb|meego|nokia|bb10|playbook)/gi)) {
    if ( ((screen.width  >= 480) && (screen.height >= 800)) || ((screen.width  >= 800) && (screen.height >= 480)) || navigator.userAgent.match(/ipad/gi) ) {
        alert('tablette');
    } else {
        alert('mobile'); 
    }
} else {
    alert('bureau');
}

Démo

et voilà, en espérant que cela vous soit utile :)

++