Speichern Sie den gesamten Inhalt in einem bestimmten Div als Bild

Question

Ich versuche, ein vollständiges Div mit dynamischen Informationen als Bild zu speichern (oder zu kopieren und einzufügen). Das Div verfügt über Informationen wie Endergebnis, Hintergrundbild und andere benutzerdefinierte Elemente.

Beispiel:

<div class="saveme" style="background-image:url({{mainimg}});"> 
    <h1>{{Score}}</h1> 
    <h2>{{Username}}</h2> 
</div> 

Idealfall, wenn Sie die Taste, ME TEILEN, angeklickt wird, wird das div gespeichert und in eine E-Mail eingefügt oder bilden, die online verbreitet werden können. Ich habe in https://html2canvas.hertzen.com/ untersucht, aber bin mir nicht sicher, wie man es in angjularjs/ionischem Rahmen einbaut.

Answer 1

Hier ist ein Beispiel für html2canvas Integration nach docs.

angular.module('app', []). 
 
controller('ctrl', function($scope){ 
 
    $scope.Score = 80; 
 
    $scope.Username = 'My Username' 
 

 
    $scope.saveMe = function(){ 
 
    html2canvas(document.querySelector('.saveme'), { 
 
     onrendered: function(canvas) { 
 
     var src = canvas.toDataURL(); 
 
     $('<a href="' + src + '" download="saved.png">Download</a>')[0].click() 
 
     } 
 
    }); 
 
    }; 
 
});

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
 
<div data-ng-app="app" data-ng-controller="ctrl"> 
 
    <div class="saveme" style="background-image:url({{mainimg}});"> 
 
    <h1>{{Score}}</h1> 
 
    <h2>{{Username}}</h2> 
 
    </div> 
 
    <button data-ng-click="saveMe()">Save</button> 
 
</div>

http://jsbin.com/gerena/edit?html,js