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

Question

所以我使用的是非常简单的 Html2Canvas 和 Canvas2Image 代码。成品是使用PHP随机加载元素的生成海报，所以需要将div转为图片saved/printed。（我已经将这里的代码简化为非常非常基础的部分）。

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

一切都很简单。但是我希望单击按钮时的图像输出以及显示在页面上的图像 下载到用户的计算机 和我服务器中的 文件夹 =36=] 或 AJAX 随机文件名 。我敢肯定下载到用户的电脑很简单，而保存到我的服务器就比较复杂了。

JSFIDDLE OF CURRENT CODE

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

Answer 1

您可以将 link 更新为 Canvas2Image 并使用 ajax 请求将图像发送到服务器。 Here 是 link 到 fiddle。

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

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

Canvas2Image Downloads Image to Folder in Server

javascript

php

ajax

html2canvas