CODEWITHSUNDEEP
javascriptjqueryimagehtml2canvas
Meroshini
Meroshini

Reputation: 71

How to save html2canvas image to my project images folder?

I am not sure how to specify the path for the file to be save (like ../images/screenshot.png)I tried saving the image like

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

This gets downloaded to my system downloads.How do I save this to the folder inside the project (want to specify the path I want to save the file)?

Upvotes: 1

Views: 16381

Answers (3)

pubudu sachintha
pubudu sachintha

Reputation: 753

This is the way of screenshot upload

Step 01:

include html2canvas CDN inside your html file

Step 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>

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

});
});

Step 04:

Put this code inside the dataSave.php file

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

?>

Upvotes: 0

Meroshini
Meroshini

Reputation: 71

Finally solved this problem. The plugin that helped me to save canvas to image in my local storage is canvas2image plugin from devgeeks. Directly pass your canvas as parameter to the save function of plugin which will save that canvas as image to your local storage. 

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

I used html2canvas library to captured the current screen and used canvas2Image plugin to save it to my local storage. Cheers!!!

Upvotes: 0

Justinas
Justinas

Reputation: 43441

You have to use some library like Canvas2Image to download image. User will specify image path by it self (you don't know where to save it, because there may be no such directory as 'C:\Users{SomeUsername}\Downloads'

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

Upvotes: 2

Related Questions