如何將html2canvas圖像保存到我的項目圖像文件夾中？

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

終於解決了這個問題。 幫助我將畫布保存到本地存儲中的圖像的插件是devgeeks的canvas2image插件 。 直接將畫布作為參數傳遞給插件的保存功能，該功能會將畫布作為圖像保存到本地存儲。

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

?>