Question

所以我使用非常简单的Html2Canvas和Canvas2Image代码。成品将是使用PHP随机加载元素的生成海报，因此需要将div转换为要保存/打印的图像。（我已将这些代码条带化为非常基础的代码）。

使用Javascript：

$(window).load(function(){
  $(function() { 
   $("#btnSave").click(function() { 
    html2canvas($(".widget"), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            Canvas2Image.saveAsPNG(canvas); 
            $("#img-out").append(canvas);
          }
      });
   });
}); 
 });

HTML

<div class="widget">
 text
</div><br/>

<input type="button" id="btnSave" value="Save Image"/>
<div id="img-out"></div>

CSS

.widget {
      display: inline-block;
      background-color: white;
      width: 100px;
      height: 100px;
      border: 5px solid black;
  }

一切都很简单。但我希望点击按钮时的图像输出，以及显示在页面上，下载到用户的计算机以及使用PHP或我的服务器中的文件夹带有随机文件名的AJAX 。我确定下载到用户的计算机非常简单，保存到我的服务器更复杂。

JSFIDDLE OF CURRENT CODE

这是我必须使用的随机加载生成器，仅供参考：click here。

Answer 1

您可以更新Canvas2Image的链接，并使用ajax请求将图像发送到服务器。 Here是小提琴的链接。

$scope.$watch()

Canvas2Image将图像下载到服务器

1 个答案: