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

所以我使用非常简单的Html2Canvas和Canvas2图像代码。成品将是使用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

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

---

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

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

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

---

你们能提供同样的小提琴吗？是的，谢谢！有没有人能给我指出正确的方向，让我下载一个.png文件扩展名。这是我正在编写的脚本-

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

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