web-dev-qa-db-fra.com

Comment convertir toutes mes données div en image et les enregistrer dans un répertoire sans utiliser de canevas?

j'ai déjà créé mes données (image contenant du modèle, texte, étiquette, etc.) dans div maintenant je veux les convertir en format d'image. existe-t-il une technique pour convertir un contenu div spécifique en images sans utiliser canvas.anybody plz help me! je veux convertir tout le contenu de "mydiv" en image et enregistrer cette image dans mon répertoire d'images, quand je clique sur enregistrer?

<html>
  <header>
  </header>
  <body>
    <label> Template Design</label>
    <div id="mydiv">
      <label> Good Morning</label>
      <img src="mug.png" id="img1" height="100" width="100"  />
    </div>
    <input name="save" type="button" value="SAVE" />
  </body>
</html>
phpjavascriptjqueryhtmlcss
22
luckyamit

MISE À JOUR (mars 2018) : Bonjour les gens du futur! Cette réponse reçoit toujours beaucoup de trafic et j'ai remarqué que l'ancien JSFiddle que j'avais assemblé était cassé, donc il a été mis à jour. Le nouveau JSFiddle montrant cette technique est ici: https://jsfiddle.net/Sq7hg/191 .

-

Vous voudrez peut-être étudier une solution basée sur Flash si vous ne pouvez pas utiliser <canvas> (Mais à moins que cela ne doive spécifiquement fonctionner dans les anciennes versions de IE je ne suis pas sûr pourquoi vous ne pouvez pas).

http://flashcanvas.net/ est une émulation de <canvas> en utilisant Flash qui pourrait vous amener là où vous devez aller. La documentation indique qu'elle prend en charge toDataURL() afin que cela puisse fonctionner pour vous.

Pouvez-vous donner plus d'informations sur vos restrictions concernant <canvas> Et sur ce que vous avez déjà essayé?

//MODIFIER

Selon votre commentaire ci-dessous, vous pourrez peut-être utiliser <canvas>, Auquel cas vous pouvez essayer d'utiliser http://html2canvas.hertzen.com - c'est une solution JavaScript qui écrit le DOM d'une partie spécifiée de votre code dans un <canvas>, puis vous permet d'interagir avec lui comme vous le souhaitez, y compris en le transformant en données d'image via toDataURL().

Je ne l'ai pas utilisé auparavant, mais votre code JavaScript ressemblerait à ceci:

html2canvas([document.getElementById('mydiv')], {
    onrendered: function(canvas) {
       var data = canvas.toDataURL('image/png');
       // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
    }
});

J'ai réuni un rapide jsfiddle de ceci en action ici: https://jsfiddle.net/Sq7hg/1913/ (note: lien mis à jour comme ci-dessus) =

Ce jsfiddle montre comment utiliser la méthode toDataURL() pour convertir le canevas en image et l'ajouter au document. L'enregistrement de l'image générée sur un serveur est une tâche infiniment plus complexe car elle nécessitera un appel AJAX ou quelque chose comme cela pour envoyer les données d'image à un script PHP qui convertit l'URL data: générée en une image réelle, puis l'enregistre dans un répertoire dans lequel vous avez la permission d'écrire. Si c'est ce que vous devez faire, plutôt que d'entrer ici, je vous recommande de commencer par ceci Question de dépassement de pile: Comment enregistrer un canevas HTML5 en tant qu'image sur un serveur?

26
Scottie

Cela fonctionne parfaitement ... doit être la solution la plus simple.

// html

<div id="mydiv" style="background-image:url(Koala.jpg) ;background-size: 100%;
background-size :200px 200px;
background-repeat: no-repeat;">
<p>text!</p>
<img src="mug.png" height="100" width="100"/></div>
<div id="canvas">
<p>Canvas:</p>
</div>

 <div style="width:200px; float:left" id="image">
 <p style="float:left">Image: </p>
 </div>
 <div style="float:left;margin-top: 120px;" class="return-data">
 </div>
 <script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

//Style

#mydiv {
background-color: lightblue;
width: 200px;
height: 200px
}

//Scénario

  <script language="javascript">
    html2canvas([document.getElementById('mydiv')], {
    onrendered: function (canvas) {
    document.getElementById('canvas').appendChild(canvas);
    var data = canvas.toDataURL('image/png');
     //display 64bit imag
     var image = new Image();
    image.src = data;
    document.getElementById('image').appendChild(image);
    // AJAX call to send `data` to a PHP file that creates an PNG image from the dataURI string and saves it to a directory on the server

    var file= dataURLtoBlob(data);

// Create new form data
var fd = new FormData();
fd.append("imageNameHere", file);

$.ajax({
   url: "uploadFile.php",
   type: "POST",
   data: fd,
   processData: false,
   contentType: false,
}).done(function(respond){

    $(".return-data").html("Uploaded Canvas image link: <a href="+respond+">"+respond+"</a>").hide().fadeIn("fast");
    });

  }
});

function dataURLtoBlob(dataURL) {
// Decode the dataURL    
var binary = atob(dataURL.split(',')[1]);
// Create 8-bit unsigned array
var array = [];
for(var i = 0; i < binary.length; i++) {
    array.Push(binary.charCodeAt(i));
 }
// Return our Blob object
return new Blob([new Uint8Array(array)], {type: 'image/png'});
 }

</script>

voici un exemple de démonstration

15
luckyamit