Where the screenshot is being made in the html2canvas()?

Question

I'm trying to upload screenshot to server through php or ajax. But I can't figure out Where the screenshot is being made in the html2canvas()? I have searched about that but didn't find solution. Please review my code and guide me.

JS Code

$(function () {
  $("#btnSave").click(function () {
    html2canvas($("#widget"), {
      onrendered: function (canvas) {
        theCanvas = canvas;
        var image = canvas.toDataURL("image/jpeg");
        $('#captured_img').attr("src", image);
        $('#img_val').attr("value", image);
      }
    });
  });

HTML Code

<div id="widget" class="widget">
  <h1>THE IMAGE</h1>
</div>
<input type="hidden" name="img_val" id="img_val" value=""/>
<div id="showImage">
  <img id="captured_img" src="" height="120" width="100"/>
</div>
<input type="button" id="btnSave" value="Save PNG"/>

Are you able to view it in `captured_img` after `onrendered` ? DO you want to view the image or save it iver server ? Also note `image/jpeg` does not support a transparent background, use `png` — Rayon, Oct 16 '15 at 06:48
@RayonDabre yes I can view in `captured_img` after `onrendered`. I want to upload image on php server — Ayaz Ali Shah, Oct 16 '15 at 06:54

score 1 · Answer 1 · edited May 23 '17 at 12:03

1

Your image is not creating in any file system it's just a base64 encoded string canvas.toDataURL("image/jpeg"); assigned to the image source. You can send that string to ajax call and make a file in php function. for more details on how to create image from base64 string here is the link dataurl to image for download in php.

edited May 23 '17 at 12:03

Community

1
1

answered Oct 16 '15 at 06:48

Sagar Khatri

1,004
8
23

Rayon · Accepted Answer · 2015-10-16T07:35:51.707

1

image/jpeg does not support a transparent background, use image/png

html2canvas will return you canvas of your DOM, you can get base64 data using toDataURL method of canvas. To upload base64 as image, you need to decode the base64 data. file_put_contents Write a string to a file.

Use following script:

PHP script:

<?php
if (isset($_REQUEST['data'])) {
    $img = $_REQUEST['data'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = rand(0000000, 1131231) . '.png';
    $success = file_put_contents($file, $data);
    if ($success!==false) {
        echo 'done';
    } else {
        echo 'failed';
    }
}

HTML & JS:

$(function() {
  $("#btnSave").click(function() {
    html2canvas(document.getElementById('widget'), {
      onrendered: function(canvas) {
        var image = canvas.toDataURL("image/png");
        $('#captured_img').attr("src", image);
        $('#img_val').attr("value", image);
        $.post("decode.php", {
            data: image
          })
          .done(function(data) {
            alert("Status: " + data);
          });
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="widget" class="widget">
  <h1>THE IMAGE</h1>
</div>
<input type="hidden" name="img_val" id="img_val" value="" />

<div id="showImage">
  <img id="captured_img" src="" height="120" width="100" />
</div>
<input type="button" id="btnSave" value="Save PNG" />

edited Oct 16 '15 at 07:35

answered Oct 16 '15 at 07:01

Rayon

36,219
4
49
76

Thanks its working but what are next step how can i upload file on server. I want to upload image once form submit. Now i'm getting DONE status in `alert` – Ayaz Ali Shah Oct 16 '15 at 07:18
In above script, image is being uploaded using `ajax`. If you want to upload on form submit, you can use the `php` script provided but read the data from `img_val`(hidden field) – Rayon Oct 16 '15 at 07:23
you mean I have to store `$success` in `img_val`(hidden field) ? – Ayaz Ali Shah Oct 16 '15 at 07:27
**NO** If you are submitting the form then there is no need to use `ajax`. Submit the form using `$('form_id').submit()` once you set the value of the hidden field. – Rayon Oct 16 '15 at 07:30
Alright thanks can you please let me know why `$success` return me this `6873` when i `print` it so how can i upload this is still not image? – Ayaz Ali Shah Oct 16 '15 at 07:32
Just check your root directory to find the image. This number is `number of bytes that were written to the file` – Rayon Oct 16 '15 at 07:36
Alright files generating successfully but does not showing properly. Image viewer giving me this error (`Windows photo viewer can't display this picture because the file is empty.`) When i open – Ayaz Ali Shah Oct 16 '15 at 07:40
Using `ajax` or `form-submit` ? – Rayon Oct 16 '15 at 07:41
`form-submit` using this – Ayaz Ali Shah Oct 16 '15 at 07:41
use `setTimeout()` of 10ms after setting hidden field value as its huge data. Also check what value you are getting using `var_dump($_REQUEST['img_val'])` – Rayon Oct 16 '15 at 07:44
I'm getting this `"data:image/jpeg;base64,/9j/4AAQSk....."` in result of `var_dump($_REQUEST['img_val'])` – Ayaz Ali Shah Oct 16 '15 at 07:47

Where the screenshot is being made in the html2canvas()?

JS Code

HTML Code

2 Answers2