2017-02-04 5 views
1

Ich habe Probleme mit dieser Situation, wo ich einige HTML-Markup in einer JavaScript-Variable habe.HTML To Image zu Base64

Was ich will, ist, den Wert dieser Variablen in ein Bild umzuwandeln und den base64-Wert zu erhalten:

var print_markup = ''; 
print_markup += '<h2 style="text-align:center">' + $scope.config.business_name + '</h2>'; 
print_markup += '<p style="text-align:center">' + $scope.config.business_address + '</p>'; 

Ich habe versucht, diese html2canvas aber es braucht ein DOM-Element als Argument nicht ein HTML-String, oder ich benutze es nicht richtig.

html2canvas(print_markup, { 
    onrendered: function(canvas) { 
     var dataURL = canvas.toDataURL(); 
     var base64String = dataURL.split(',')[1]; 

    } 
}) 

Aber ich bekomme diese:

html2canvas.js: 592 Uncaught (in Versprechen) Proxy verwendet werden müssen, wenn url Rendering

+0

htm2canvas 'ownerDocument.defaultView' benötigt, so dass Ihre Elemente tatsächlich ein Teil des aktuellen DOM sein muss. – Kaiido

+0

Danke @Kaiido Ich habe das Element an den Körper angehängt und es hat funktioniert. –

Antwort

0

Bitte beachten Sie den Link: here

var node = document.getElementById('my-node'); 

domtoimage.toPng(node) 
    .then (function (dataUrl) { 
     var img = new Image(); 
     img.src = dataUrl; 
     document.appendChild(img); 
    }) 
    .catch(function (error) { 
     console.error('oops, something went wrong!', error); 
    }); 
+0

ohne Unterstützung für IE. – Kaiido

0

Wie @Kaiido vorgeschlagen, die html2canvas erste Argumentation nt ist ein Element, die dem Originaldokument angehängt wird, diese html2canvas für weitere Informationen sehen