Canvas2Image 将图像下载到服务器中的文件夹

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 是小提琴的链接。

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

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                var image = Canvas2Image.convertToPNG(canvas);
               var image_data = $(image).attr('src');
              //make an ajax call here sending image_data to the server
              /*
              $.ajax({
              url: 'localhost:3000/save_image',
              data:{ image: image_data},
              success: function(){

              }
              });
              */
                $("#img-out").append(canvas);
                // Clean up 
                //document.body.removeChild(canvas);
            }
        });
    });
});