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

【问题标题】：How to save html2canvas image to my project images folder?如何将 html2canvas 图像保存到我的项目图像文件夹中？
【发布时间】：2019-09-08 12:47:49
【问题描述】：

我不确定如何指定要保存的文件的路径（例如 ../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;
   }
});

这会下载到我的系统下载中。如何将其保存到项目内的文件夹中（要指定我要保存文件的路径）？

【问题讨论】：

您必须将该图像发送到服务器并通过 PHP 进行处理。 var img 将只包含图像 base64 字符串，仅此而已
但是为什么呢？我想将该图像保存在客户端。好的，让我这样问吧。我想分享使用社交分享插件截取的屏幕截图。
我的代码分享图片window.plugins.socialsharing.share( 'My Message', null, [image link here], null );

标签： javascript jquery image html2canvas

【解决方案1】：

您必须使用诸如Canvas2Image 之类的库来下载图像。用户自己指定图片路径（你不知道保存在哪里，因为可能没有'C:\Users{SomeUsername}\Downloads'这样的目录

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

【讨论】：

我试过 Canvas2Image 并将图像保存到系统下载中。即使不使用任何库，我也可以使用代码canvas.toDataURL("image/png").replace("image/png", "image/octet-stream") 将图像保存到下载中，我想将图像保存到项目文件夹中的特定路径。有什么帮助吗？
@Meroshini 您必须指定要保存该文件的位置。也许你有某种自动保存？你试过hongru.github.io/proj/canvas2image/index.html
是的，感谢@Justinas 的努力。但我不得不提到代码中的路径.. save 应该隐式发生。用户不应选择保存路径。任务是单击共享按钮后，当前页面将被捕获并通过用户首选的社交媒体共享。
@Meroshini 所以你想捕获一些数据并将这些数据发送到一些社交媒体网站或保存到计算机？什么的。媒体，什么插件...
我正在使用this plugin 分享。代码看起来像window.plugins.socialsharing.share( 'My Message', null, [image link here], null ); 我可以通过将图像链接保存在我的代码（/images 文件夹）中的某个位置来添加图像链接

【解决方案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 插件将其保存到我的本地存储。干杯！！！

【讨论】：

【解决方案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);

?>

【讨论】：