Partage

Télécharger une image créée avec Javascript

Sujet résolu

14 février 2017 à 21:32:42

Bonsoir la communauté,

Je vous sollicite ce soir car je m'interroge.

Voilà, j'ai créé un petit jeu ludique avec Javascript (JQuery) qui permet de générer sa propre image en combinant plusieurs morceaux choisis. Tous les morceaux sont issus d'images .png

J'aimerai qu'une fois que l'utilisateur a choisi sa combinaison, il puisse en avoir un petit aperçu avec la possibilité de télécharger l'image conçue à la volée.

Comment puis-je y parvenir? J'utilise Python/Django en développement avec, l'idée c'est de réussir à capturer l'image qui s'affiche à l'écran telle que l'utilisateur la voit. Etant donné qu'il n'y a pas beaucoup de morceaux, je peux toujours prévoir les combinaisons possibles à l'avance mais cela fait bricolage et arrachage de cheveux, pas très smart.

N'hésitez pas à réagir si vous avez une idée, je suis hyper motivée!

-
Edité par C’est Lolotte 14 février 2017 à 21:33:51

Anonyme

15 février 2017 à 3:01:04

Bonsoir,

Il nous faut ton code sinon ça risque d'être compliqué.

C’est Lolotte

15 février 2017 à 4:05:11

Bonjour TyrionGraphiste, voici mon js :

$(document).ready(function(){
	
var headclix = 0, eyeclix = 0, noseclix = 0;

		lightning_one();
		lightning_two();
		lightning_three();
	
	  $("#head").click(function(){		
	  
		if (headclix < 2){
	$("#head").animate({left:"-=270px"},500);
		headclix+=1;
		}
		else{
			$("#head").animate({left:"0px"},500);
			headclix = 0;
		}
	
	});
	
	
	$("#eyes").click(function(){
	
		if (eyeclix < 2){
		$("#eyes").animate({left:"-=270px"},300);
			eyeclix+=1;
		}
		else{
			$("#eyes").animate({left:"0px"},300);
			eyeclix = 0;
		}
	});
	
	
	$("#nose").click(function(){
		if (noseclix < 2){
	$("#nose").animate({left:"-=270px"},300);
		noseclix+=1;
		}
		else{
			$("#nose").animate({left:"0px"},300);
			noseclix = 0;
		}
	});//end click
	
	


});//end doc.onready function

function lightning_one(){
	$("#container #lightning1").fadeIn(250).fadeOut(250);
	setTimeout("lightning_one()",4000);
};

function lightning_two(){
	$("#container #lightning2").fadeIn("fast").fadeOut("fast");
	setTimeout("lightning_two()",5000);
};

function lightning_three(){
	$("#container #lightning3").fadeIn("fast").fadeOut("fast");
	setTimeout("lightning_three()",7000);
};

Krogoth

15 février 2017 à 8:54:14

Bonjour,

Tu peux essayer de voir du coté d'html2 canvas:

http://html2canvas.hertzen.com/documentation.html

Et pour télécharger le canvas tu peux t'inspirer de:

https://jsfiddle.net/AbdiasSoftware/7PRNN/

Un petit +1 si je vous ai aidé est toujours appréciable :).

C’est Lolotte

16 février 2017 à 17:14:19

Bonjour Krogoth,

Merci beaucoup pour la documentation, c'est génial!

J'ai essayé de refaire ce qui est proposé dans ton deuxième lien qui introduit le téléchargement de fichier via un simple copier-coller mais il se trouve que l'affichage n'a pas le rendu qu'il devrait :

1- Les fonctions d'écriture de texte dans le rectangle n'ont pas l'air de fonctionner

2- le lien download n'enclenche rien quand on clique dessus.

Voici mon fichier HTML:

<html>
<head>
    <title>canvas test</title>
    <script src="canvas.js"></script>
    <link rel="stylesheet" href="style.css" media="screen">
	
</head>

<body>
<canvas width="500" height="300" id="canvas">Sorry, no canvas available</canvas>

<a id="download">Download as image</a>
</body>
</html>

Voici mon fichier Javascript :

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

function doCanvas() {
    /* draw something */
    ctx.fillStyle = '#f90';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#fff';
    ctx.font = '60px sans-serif';
    ctx.fillText('Code Project', 10, canvas.height / 2 - 15);
    ctx.font = '26px sans-serif';
    ctx.fillText('Click link below to save this as image', 15, canvas.height / 2 + 35);
}


function downloadCanvas(link, canvasId, filename) {
    link.href = document.getElementById(canvasId).toDataURL();
    link.download = filename;
}

document.getElementById('download').addEventListener('click', function() {
    downloadCanvas(this, 'canvas', 'test.png');
}, false);

doCanvas();

Et le CSS :

body {
	    background-color:#555557;
	    padding:0;
	    margin:0;
	    overflow:hidden;
	    font-family:sans-serif;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	}
	canvas {
	    border:1px solid #000;
	    float:left;
	    clear:both;
	}
	#download {
	    float:left;
	    cursor:pointer;
	    color:#ccc;
	    padding:3px;
	}
	#download:hover {
	    color:#fff;
	}

Est-ce que quelqu'un arrive à identifier où est le problème?

Merci beaucoup!

Avelan

16 février 2017 à 17:30:44

Salut,

En mettant ton code dans un JSFiddle ça fonctionne chez moi, aussi bien pour le texte que pour le download.

(Sur firefox et chrome)

Ton problème ne viendrait pas d'ailleurs?

Que dis la console?

-
Edité par Avelan 16 février 2017 à 17:33:51

C’est Lolotte

16 février 2017 à 19:19:05

Bonjour Avelan,

Dans le JSFiddle tout fonctionne effectivement, mais quand j'essaie sur firefox ça ne donne plus rien je ne comprends pas.

J'ai ce message dans la console mais je ne sais pas si ça vient de là :

TypeError: canvas is null

darenju

16 février 2017 à 19:31:36

Sur quelle ligne as-tu cette erreur ?

Développeur Front-End freelance disponible pour contrats ! En guerre contre l'utilisation abusive de jQuery.

C’est Lolotte

16 février 2017 à 20:06:37

Bonsoir Darenju,

C'est ligne 3::5

function doCanvas() {

darenju

16 février 2017 à 21:01:46

Il faudrait appeler ta méthode doCanvas une fois que la page a été chargée, grâce à l'évement DOMContentLoaded. Sinon, JavaScript ne pourra pas trouver l'élément avec pour ID #canvas.

D'autre part, en ce qui concerne ta méthode downloadCanvas, elle rajoute le lien de téléchargement uniquement. Tu pourrais peut-être déclencher le click sur ce lien pour débuter le téléchargement immédiatement après le clic sur #download.

Développeur Front-End freelance disponible pour contrats ! En guerre contre l'utilisation abusive de jQuery.

Anonyme

16 février 2017 à 21:24:48

window.onload = function () {
  var canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d');

  function doCanvas() {
    /* draw something */
    ctx.fillStyle = '#f90';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#fff';
    ctx.font = '60px sans-serif';
    ctx.fillText('Code Project', 10, canvas.height / 2 - 15);
    ctx.font = '26px sans-serif';
    ctx.fillText('Click link below to save this as image', 15, canvas.height / 2 + 35);
  }


  function downloadCanvas(link, canvasId, filename) {
    link.href = document.getElementById(canvasId).toDataURL();
    link.download = filename;
  }

  document.getElementById('download').addEventListener('click', function() {
    downloadCanvas(this, 'canvas', 'test.png');
  }, false);

  doCanvas();
};

-
Edité par Anonyme 16 février 2017 à 21:25:56

C’est Lolotte

16 février 2017 à 21:35:22

Merci à vous deux darenju et TyrionGraphiste,

Une fois que la page est chargée c'est mieux .

Je vais pouvoir avancer sur mon mini-projet!

darenju

16 février 2017 à 22:12:34

Plutôt que window.onload qui écrase tout éventuel autre fonction, utilise plutôt DOMContentLoaded :

document.addEventListener('DOMContentLoaded', function() {...});

Développeur Front-End freelance disponible pour contrats ! En guerre contre l'utilisation abusive de jQuery.

C’est Lolotte

17 février 2017 à 17:13:15

Le html2canvas permet bien de capturer, en revanche les images du Javascript n'apparaissent pas dans la capture, comme des éléments fantômes. Je n'ai donc au final que le cadre d'arrière plan.

Je crois que mon idée est trop extravagante, à part préparer à l'avance les captures de chaque formule possible, ça m'a l'air impossible.

Krogoth

17 février 2017 à 18:04:30

Tu as toujours la possibilité de créer l'image à la volée en php.

La source d'une image peut très bien être image.php?param1=blabla&param2=toto

Un petit +1 si je vous ai aidé est toujours appréciable :).

C’est Lolotte

17 février 2017 à 23:50:51

Ah chouette perspective Krogoth, je me suis mise à Django, il semble que ce soit plutôt aisé de reproduire cela.

Pour vous remercier tous voici (à la sauvette) le jeu : http://www.queen-laure.esy.es/

Confection du vêtement principal maison (pour humain à la base, adaptation canine grâce à Photoshop^^).

Malheureusement, quand il sera achevé je serai obligée de payer un hébergement car je ne connais pas d'hébergement django gratis.

-
Edité par C’est Lolotte 17 février 2017 à 23:53:56

Krogoth

20 février 2017 à 8:57:12

http://codecondo.com/5-platforms-provide-free-django-app-hosting/

Autrement tu peux avoir des petit VPS (serevur dédié) chez OVH pour 3.60€/mois.

https://www.ovh.com/fr/vps/vps-ssd.xml

Un petit +1 si je vous ai aidé est toujours appréciable :).

Avelan

20 février 2017 à 9:58:36

img {
    pointer-events: none;
}

img hover{
    cursor: auto;
}

Tu peux mettre ça sur tes images pour avoir un curseur un peu plus user friendly et éviter le drag & drop

-
Edité par Avelan 20 février 2017 à 9:59:11

C’est Lolotte

20 février 2017 à 18:37:20

@Krogoth: merci j'ai de quoi trouver mon bonheur et expérimenter!

@Avelan : merci de l'astuce, par malheur j'ai dû retirer tes deux règles car elles bloquent le bon fonctionnement du javascript(la troisième proposition d'image n'est plus visible), en plus d'ajouter un filtre bleuté non désiré au-dessus des images sélectionnées.

-
Edité par C’est Lolotte 20 février 2017 à 18:38:06

C’est Lolotte

24 février 2017 à 11:05:19

En lisant des cours sur le Canvas, j'ai eu l'illumination,

J'ai donc réussi à faire exactement ce que je voulais et tout du côté du navigateur :

http://www.queen-laure.esy.es/

Sujet résolu. Merci!