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

Question

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

例子:

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

理想情况下，当单击“分享我”按钮时，div 将被保存并插入到可以在线共享的电子邮件或表单中。我调查了https://html2canvas.hertzen.com/但我不确定如何将它合并到 angjularjs/ionic 框架中。

Answer 1

这里是一个 html2canvas 集成的例子，根据 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