Question

我不知道如何指定要保存的文件的路径（例如../images/screenshot.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

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

    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

这是截图上传的方式

步骤01：

在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);

?>

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

3 个答案: