Wie man ein div mit img-Tags in ein Bild konvertiert

Ich versuche, ein div mit einigen IMG-Tags zu einem PNG zu konvertieren. Nach einigem Suchen sieht es am besten aus, die html2canvas-Bibliothek zu verwenden.Wie man ein div mit img-Tags in ein Bild konvertiert

Das Problem ist, dass es für mich nicht funktioniert und ich verstehe nicht warum.

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css"> 
     <script src="lib/js/Blob.js"></script> 
     <script src="lib/js/canvas-to-blob.min.js"></script> 
     <script src="lib/js/FileSaver.js"></script> 
     <script src="lib/js/html2canvas.js"></script> 
     <script src="lib/js/jquery.min.js"></script> 
     <script src="lib/js/underscore-min.js"></script> 
     <title>Tests Only</title> 
    </head> 
    <body> 
     <div id="navigationButtons"> 
     </div> 

     <div id="sourceScreen" style="width:200px"> 
      <img id="lol" src="tier-icons/base_icons/bronze.png" /> 
     </div> 

     <div id="targetScreen"> 
     </div> 

     <script = "text/javascript"> 
     jQuery('#navigationButtons').append('<button type="button" id="makeScreenshot">Screenshot</button>'); 
     jQuery('#makeScreenshot').click(makeScreenshot); 

     function makeScreenshot(){ 
      html2canvas(jQuery('#sourceScreen'), { 
      onrendered: function(canvas) { 
       jQuery('#targetScreen').html(canvas); 
      } 
      }); 
     } 
     </script> 
    </body> 
</html>

Hier ist ein jsFiddle meines Code: https://jsfiddle.net/2vv79ehy/1/

Ich versuche es zuerst auf diesem Beispiel mit 1 img-Tag zu bekommen arbeiten, das Ziel ist es, die Leinwand unter dem realen Bild angezeigt werden soll. Ich weiß, dass mit dieser Bibliothek ein Problem mit domänenübergreifenden Ressourcen besteht, aber wenn ich den Test mit meinem echten Code durchführe, wird das Image auf meinem Computer gehostet.

Weiß jemand, wie man es macht oder ob es einen anderen Weg gibt (wäre toll, wenn es auch domänenübergreifende Probleme umgehen könnte)?

Quelle

2016-05-05 PineApple34

Ihr JSFiddle funktioniert, außer für das bereichsübergreifende Problem. Ich habe herumgespielt und versucht, einen schnellen Hack zu finden, aber das Beste, was ich mir vorstellen kann, ist, auf die Leinwand zu zeichnen, die du in deinem onrendered Event erhalten hast und ich habe nicht wirklich mit Positionierung gespielt und die z- Ordnung wäre unmöglich, auf diese Weise zu implementieren, aber vielleicht diese Bearbeitung auf Ihre makeScreenshot Funktion hilft Ihnen, eine Lösung zu finden, die für Sie arbeitet:

function makeScreenshot(){ 
    html2canvas(jQuery('#sourceScreen'), { 
    onrendered: function(canvas) { 
     var img = jQuery("#cat"); 
     var ctx = canvas.getContext("2d"); 
     var originalPosition = { left: 0, top: 18 }; 
     ctx.drawImage(img[0],originalPosition.left,originalPosition.top); 
     jQuery('#targetScreen').html(canvas); 
    } 
    }); 
}

Quelle

2016-05-05 23:47:34 Bikonja

Mein jsFiddle arbeitet, wie sie ist oder haben Sie etwas ändern? Ich benutze Chrome (kann FF atm nicht herunterladen, ich werde das morgen überprüfen) und ich habe nur ein leeres div. Ich werde versuchen, die Funktion, die Sie mir gaben und sehen, ob ich "einen Screenshot" der 2 vorherigen Bilder (Original + seine Kopie) machen kann. Danke für Ihre Hilfe! – PineApple34

@ PineApple34 Es funktioniert wie es ist in dem Sinne, dass 'html2canvas' einen Screenshot minus das Bild macht, weil es in einer anderen Domäne ist. Du kannst das überprüfen, indem du Text oder etwas in dem div hinzufügst, von dem du einen Screenshot machst. Der Code, den ich zur Verfügung gestellt habe, nimmt nur das Bild und zeichnet es auf die neue Leinwand von 'html2canvas', aber es berechnet nicht die Position, in der es gezeichnet wird. – Bikonja

Nun, ich bekomme es dann nicht, weil es nicht funktioniert Wenn das Bild auf meinem Computer gehostet wird (könnte es einen domainübergreifenden Fehler geben, wenn alles lokal läuft?), erinnere ich mich, dass ich meine Menüleiste "screenen" konnte. Wie auch immer, ich gab dies jetzt auf, da ich einen Workaround gefunden habe (den Inhalt meines divs voll von IMG-Tags in ein anderes Div kopieren und dann skalieren). Ich bin in der Stimmung, mehrere Projekte auf einmal in verschiedenen Sprachen zu entwickeln, also pausiere ich ab und zu ein Projekt, wenn ich eine aufregende Idee für eine andere habe: p – PineApple34

Wie man ein div mit img-Tags in ein Bild konvertiert

Antwort

Verwandte Themen