html2canvas - IndexSizeError

Question

Ich versuche ein Bild aufzunehmen, das in ein div auf meiner Seite geladen wird und versuche, entweder die Rohdaten für das Bild zu übergeben oder das Bild an einen Ort zu kopieren.

Die beste Methode, die ich finden konnte, war html2canvas

Ich erhalte den folgenden Fehler zu verwenden, wenn versucht, mein Bild in ein Fenster, um eine Vorschau zu öffnen:

JavaScript-Laufzeitfehler: IndexSizeError

Ich habe lesen Beratung ein paar Beiträge, dass ich die div mit dem folgenden Verfahren machen könnte:

html2canvas($("#mapDiv"), { 
      onrendered: function (canvas) { 
       // canvas is the final rendered <canvas> element 
       var imgData = canvas.GetContext("2d").getImageData(bounds.left, bounds.top, bounds.width, bounds.height); 
       var myImage = imgData.toDataURL("image/png"); 
       window.open(myImage); 
      } 
     }); 

Das Problem wird auftreten Datei auf die folgende Zeile in der html2canvas js

Ist es möglich, ein Bild zu machen, die dynamisch in eine div auf diese Weise geladen wird, wie ich in der Pixelparameter aufgrund Benutzern mit unterschiedlichen Auflösungen

passieren kippe

und wenn es möglich ist, was mache ich falsch?

Answer 1

function capture(id) { 

     html2canvas([document.getElementById(id)], { 
      logging: true, 
      onrendered: function(canvas) { 
       document.body.appendChild(canvas); 
       var dataUrl = canvas.toDataURL("image/png") 
       //console.log(dataUrl) 
       $('#img-out').attr("src", canvas.toDataURL("image/png")); 

       $.post("/upload-img", {img: dataUrl, name: id}, function (res) { 
        console.log(res) 


        location.href = $("#" + id).attr("shareUrl") + "&picture=" + (window.location.protocol + "//" +window.location.host + "/" + res.filePath) 

       }) 
      } 
     }); 
    } 

ID des Elements, das Sie Snapshot möchten.