如何保存从画布转换到我的本地文件夹的图像?

时间:2014-02-26 16:50:30

标签: javascript html

对于我的javascript应用程序,我需要在我的ipad演示文稿中拍摄每个页面的屏幕截图,无论如何我找到了使用html2canvas的解决方案。现在我能够将html页面转换为图像但是如何使用javascript将其保存在我的演示文稿图像文件夹中?

这是我的javascript

html2canvas(document.body, 
{
  onrendered: function(canvas) 
{  
  var test = document.getElementsByClassName('test');    //finding the div.test in the page  
  $(test).append(canvas);                                //appending the canvas to the div
  var canvas = document.getElementsByTagName('canvas');     
  $(canvas).attr('id','test');                          //assigning an id to the canvas
  var can2 = document.getElementById("test");
  var dataURL = can2.toDataURL("image/png");            //converting the canvas to      image(PNG)      
  document.getElementById("image_test").src = dataURL;  //assigning the url to the image
  $(canvas).remove();                                   //removing the image
},logging:true,background: "#fff",
});

这是我的HTML

<div class="wrapper">
  <div class="container">
    <div class="test">
      <img src="" id="image_test">
    </div>
  </div>
</div>

有人可以帮助我如何在我的演示文稿图像文件夹中保存ID为“image_test”的图像?

提前致谢。

1 个答案:

答案 0 :(得分:0)

如果要将文件保存在服务器上,则可以将用户链接到文件页面。 否则,您可以根据数据链接到“假”路径

e.g:

function download(data){
    document.location = 'data:Application-octet-stream,'+
                         encodeURIComponent(data);
}

http://blogs.adobe.com/cantrell/archives/2012/01/how-to-download-data-as-a-file-from-javascript.html