Forum d'entraide PHPFrance

Bonjour,

Je souhaiterai, en cliquant sur un bouton, pouvoir sauvegarder en format image (png, jpg ou autre) dans une résolution fixe, une image présente en mémoire grace à la touche Imprim'Ecran.

Merci encore une fois, de votre aide.

Stéphane

Bonjour,

Il faut déjà utiliser du javascript pour récupérer l'image dans le presse-papier et ensuite la renvoyer en ajax à un script PHP.
Voici une piste qui me semble intéressante :
http://stackoverflow.com/a/6338207

Merci pour ce lien qui m'a finalement permis d'aller ici :
http://jsfiddle.net/bt7BU/104/

Toutefois, je suis un peu perdu, et je ne sais pas quelles sont les librairies ou autres à récupérer pour pouvoir faire fonctionner de cette façon.

Merci des renseignements que vous pourrez m'apporter.

Stéphane

Voici un exemple simple qui fonctionne :
https://github.com/vladmalik/pasteimage

Désolé de n'avoir pas répondu avant.

En partant du lien http://jsfiddle.net/bt7BU/104/, pas de souci, en faisant un imprim'ecran, et en collant dans le textarea comme indiqué, cela marche nickel.

Toutefois, comment dois-je faire pour, en cliquant sur un bouton (submit), et après avoir donné le nom que je veux lui attribuer (input), faire en sorte de sauvegarder cette image (en png ou jpg, peu m'importe).

Au pire, si le javascript appelé durant le "coller", peut sauvegarder automatiquement en format image dans un répertoire tampon, cela m'irait aussi.

[javascript] <script type='text/javascript' src='/js/lib/dummy.js'></script>

<script type='text/javascript'>//<![CDATA[
window.onload=function(){
document.getElementById('pasteArea').onpaste = function (event) {
// use event.originalEvent.clipboard for newer chrome versions
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
// find pasted image among pasted items
var blob;
for (var i = 0; i < items.length; i++) {
if (items.type.indexOf("image") === 0) {
blob = items.getAsFile();
}
}
// load image if there is a pasted image
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
console.log(event.target.result); // data url!
document.getElementById("pastedImage").src = event.target.result;
};
reader.readAsDataURL(blob);
}
}
}//]]>
</script>[/javascript]

Merci encore. Stéphane

En partant du lien http://jsfiddle.net/bt7BU/104/, pas de souci, en faisant un imprim'ecran, et en collant dans le textarea comme indiqué, cela marche nickel.

Tu as testé sur tous les navigateurs ?
Car chez moi ce script ne fonctionne pas du tout avec Firefox et fait crasher Chrome ("Page de répondant pas"), c'est pour cela que je te proposait une alternative.

Toutefois, comment dois-je faire pour, en cliquant sur un bouton (submit), et après avoir donné le nom que je veux lui attribuer (input), faire en sorte de sauvegarder cette image (en png ou jpg, peu m'importe).

A priori comme n'importe quel formulaire, non ?
http://openclassrooms.com/courses/conce ... ormulaires

Bonjour, et merci pour ton intérêt concernant mon sujet.

Pour ma part, sur Chrome, ca marche sans problème, il est vrai que pas sur FF,mais comme le but premier est de mettre mon projet uniquement en localhost, pour des personnes bien déterminées, Chrome sera la norme avant d'arriver peut-être à comprendre pourquoi cela ne fonctionne pas sur FF.

Concernant la sauvegarde du fichier, c'est là où je me heurte à une incompréhension technique (et cérébrale surement).

Je sais comment envoyer un fichier que je désigne par son chemin, et l'uploader et le renommer, etc..

Dans ce cas précis, le simple fait de faire un 'coller' dans le 'textarea', transforme la balise <img> de façon à afficher dedans l'image copiée. Mais je ne sais pas où récupérer la valeur $_FILES qui me permettrait, en validant le formulaire de faire le 'move_upload_file', etc ..

Merci encore. Stéphane

En fait il faut que tu récupères la valeur de event.target.result (qui est d'ailleurs envoyé dans la console du navigateur dans ton code), c'est l'image encodée en base64, tu mets ça dans un champ textarea et tu l'envoies comme n'importe quel champ texte (pas comme un fichier).
Une fois reçu sur ton serveur, il faut retirer le texte devant le contenu et le traiter comme ça pour enregistrer l'image :

$image = imagecreatefromstring(base64_decode($sourceString));
imagejpeg($image, $destination, 90);

Merci beaucoup, ça marche nickel.

J'ai donc bien créé une autre textarea 'id='pasteArea2' et modifier dans le <script>

[javascript] if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
console.log(event.target.result); // data url!
document.getElementById('pasteArea2').value = event.target.result; <--- Ligne rajoutée
document.getElementById("pastedImage").src = event.target.result;
// alert(event.target.result);[/javascript]

et j'ai ensuite mis, une fois le formulaire validé :

if (isset($_GET['action']) and $_GET['action']=='clipboard')
{
	$image='';
	$text = str_replace("data:image/png;base64,","",$_POST['pasteArea2']);
	$image = imagecreatefromstring(base64_decode($text));
	$a=1;
	WHILE (file_exists($content_dir."Impression_ecran_".$a.".png"))
	{$a++;}
	imagejpeg($image, $content_dir."Impression_ecran_".$a.".png", 100);
}

Merci encore pour l'aide apportée. Stéphane