如何保存html2canvas图像到我的项目图像文件夹

Question

我不确定如何指定要保存的文件路径(如../images/screen - snapshot .png)我尝试保存图像，如

html2canvas($my-div, {
    useCORS: true,
    allowTaint: true,
    onrendered: function (canvas) {
      var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
      location.href = img;
   }
});

这个被下载到我的系统下载。如何将其保存到项目内的文件夹(想要指定要保存文件的路径)?

Answer 1

你必须使用一些库，如Canvas2Image下载图像。用户将由它自己指定图像路径(你不知道在哪里保存它，因为可能没有这样的目录"C:Users{SomeUsername}Downloads"

html2canvas($my-div, {
    onrendered: function(canvas) {
        return Canvas2Image.saveAsPNG(canvas);
    }
});

Answer 2

终于解决了这个问题。帮助我在本地存储中保存画布的插件是来自devgeeks的canvas2image插件。直接将画布作为参数传递给插件的save函数，该函数将画布作为图像保存到本地存储。

    html2canvas($my-div, {
    height: myDivHeight,
    width: 350,
    useCORS: true,
    allowTaint: true,
    proxy: "your url",
    onrendered: function (canvas) {
      window.canvas2ImagePlugin.saveImageDataToLibrary(
        function(msg){
          console.log(msg) //path where image is saved
        },
        function(err){
            console.log(err);
        },
        canvas // pass canvas as third parameter
      );
    }
  });

我使用html2canvas库捕获当前屏幕，并使用canvas2Image插件将其保存到我的本地存储。干杯! !

Answer 3

这是截图上传的方式

步骤1:

在你的html文件中包含html2canvas CDN

步骤02:

  <form id="imgupload" enctype="multipart/form-data">
     <input type="hidden" name="imagename" id="imghidden">
    </form>
    <canvas id=img>
      <img src="....">
    </canvas> 
    <button id="imgupload"></button>

步骤03:

  $("#imgupload").click(function(){
  html2canvase($("#img"),{
  onrendered:function(canvas)
  {
   var canvasinfo=canvas;
   $(#imghidden).val(canvasinfo.toDataURL('image/png'));
   var formid=$("#imgupload")[0];
   var data=new FormData(formid);
   $.ajax({
               type:"post",
               url:"dataSave.php", 
               data:data,
               contentType: false,
               cache: false,
               processData:false,
               success:function (data) {
                   console.log(data);
               },error:function(error)
               {
                   console.log(error);
               }
           });
  }
});
});

步骤04:

将此代码放入dataSave.php文件

<?php
    $filteredData=substr($POST['imghidden'],strpos($_POST['imghidden'],',')+1);
    $DecodeData=base64_decode($filteredData);
    //Now you can upload image inside the folder
    $imgPath='img'.time().'.png';
    file_put_contents($imgPath,$DecodeData);
?>