将特定div中的所有内容保存为图像

Question

我正在尝试将动态信息保存（或复制并粘贴）整个div作为图像。 div具有最终得分，背景图像和其他自定义元素等信息。

示例：

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

理想情况下，当点击按钮SHARE ME时，会保存div并将其插入可在线共享的电子邮件或表单中。我研究了https://html2canvas.hertzen.com/，但不确定如何将其纳入angjularjs / ionic框架。

Answer 1

以下是根据docs进行O(1)整合的示例。

html2canvas

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

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