Question

我正在构建一个chrome扩展程序，它使用bootstrap轮播在iphone模板img中加载一个图像列表。所以每个iphone模板都有不同的图像。图像由源属性

中的URL加载

假设用户选择了一张图片，并希望获得包含iphone模板的图片截图。我添加了一个按钮，使用html2canvas下载图片。

它下载截图但没有图像，我似乎无法弄明白为什么。是因为img src属性是一个URL。

如果是这样的话，我可以使用其他方式来截取w /或w / out html2canvas。

这是我的代码

HTML

<div class="template-container">
  <img id="mobileImg" ng-show="link[2] == 255" src="../img/template_square_banner.jpg" alt="">
  <img id="mobileImg" ng-show="link[2] == 55" src="../img/template_rectangle_banner.png" alt="">

  <div ng-class="{squareLayer: link[2] == 255, rectangleLayer: link[2] == 55}">

    <img id="mobileAd" source="{{here it goes each url}}" width="{{ link[1] }}" height="{{ link[2] }}">


 </div>
</div>

<button id="saveTemplate" type="button" name="button" class="btn btn-default" ng-click="downloadTemplate()">take screenshot</button>

的javascript /角

$scope.downloadTemplate = function(){

  html2canvas($(".template-container"), {
onrendered: function(canvas) {
  var a = document.createElement('a');
  // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
  a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
  a.download = 'somefilename.jpg';
  a.click();

}
});
}

如果我能截取模板的截图，那将是非常棒的，我们将非常感谢您的帮助！

使用html2canvas获取当前html页面的屏幕截图？

0 个答案: