Wie konvertiere ich meine gesamten div-Daten in ein Bild und speichere sie in einem Verzeichnis, ohne Leinwand zu verwenden?

Question 1

Ich habe bereits meine Daten (Vorlage mit Bild, Text, Beschriftung usw.) in div erstellt, jetzt möchte ich sie in ein Bildformat konvertieren. Gibt es eine Technik, um einen bestimmten div-Inhalt in Bilder umzuwandeln, ohne canvas.anybody plz help me! Ich möchte den gesamten “mydiv”-Inhalt in ein Bild konvertieren und dieses Bild in meinem Bildverzeichnis speichern, wenn ich auf “Speichern” klicke.

<html>
  <header>
  </header>
  <body>
    <label> Template Design</label>
    <div id="mydiv">
      <label> Good Morning</label>
      <img src="https://stackoverflow.com/questions/18545034/mug.png" id="img1" height="100" width="100"  />
    </div>
    <input name="save" type="button" value="SAVE" />
  </body>
</html>

Question 2

UPDATE (März 2018): Hallo Leute der Zukunft! Diese Antwort wird immer noch stark frequentiert und mir ist aufgefallen, dass das alte JSFiddle, das ich zusammengestellt hatte, kaputt war und daher aktualisiert wurde. Das neue JSFiddle, das diese Technik zeigt, ist hier: https://jsfiddle.net/Sq7hg/1913.

—

Möglicherweise möchten Sie nach einer Flash-basierten Lösung suchen, wenn Sie diese nicht verwenden können <canvas> (obwohl dies nicht ausdrücklich in alten Versionen von IE funktionieren muss, bin ich mir nicht sicher, warum Sie das nicht können).

http://flashcanvas.net/ ist eine Emulation von <canvas> Verwenden von Flash, das Sie möglicherweise dorthin bringt, wo Sie hin müssen. Die Dokumentation sagt, dass es unterstützt toDataURL() das könnte also für dich funktionieren.

Können Sie mehr Einblick in Ihre Einschränkungen geben? <canvas> sind und was hast du schon probiert?

//BEARBEITEN

Laut Ihrem Kommentar unten können Sie möglicherweise verwenden <canvas>in diesem Fall können Sie versuchen, zu verwenden http://html2canvas.hertzen.com – Es ist eine JavaScript-Lösung, die im Grunde das DOM eines bestimmten Teils Ihres Codes in a umschreibt <canvas> und ermöglicht es Ihnen dann, damit zu interagieren, wie Sie möchten, einschließlich der Umwandlung in Bilddaten über toDataURL().

Ich habe es noch nie verwendet, aber Ihr JavaScript-Code würde in etwa so aussehen:

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
    }
});

Ich habe hier eine schnelle Jsfiddle davon in Aktion zusammengeklopft: https://jsfiddle.net/Sq7hg/1913/ (Hinweis: aktualisierter Link wie oben)

Diese jsfiddle zeigt, wie man die toDataURL() -Methode, um die Leinwand in ein Bild zu konvertieren und an das Dokument anzuhängen. Das Speichern des generierten Bildes auf einem Server ist eine unendlich komplexere Aufgabe, da ein AJAX-Aufruf oder ähnliches erforderlich ist, um die Bilddaten an ein PHP-Skript zu senden, das die generierten Daten konvertiert data: URL zu einem tatsächlichen Bild und speichert es dann in einem Verzeichnis, für das Sie Schreibberechtigungen haben. Wenn Sie das tun müssen, würde ich empfehlen, anstatt hier darauf einzugehen, mit dieser Stack Overflow-Frage zu beginnen: Wie speichere ich eine HTML5-Leinwand als Bild auf einem Server?

Question 3

Das funktioniert perfekt … muss die einfachste Lösung sein.

//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="https://stackoverflow.com/questions/18545034/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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

//Stil

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

//Skript

  <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="https://stackoverflow.com/questions/18545034/+respond+">"https://stackoverflow.com/questions/18545034/+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>

Hier ist eine Beispiel-Demo