Feedback with screenshot using feedback JS

In this tutorial I will explain how you can send feedback with screenshot using Feedback JS. This script allows you to create feedback form with screenshot with the form. Screenshot is based on the information available on the page.

This script is based on html2canvas library, which renders the current page as a canvas image. As the whole image is created on the clients browser, it does not require any rendering from the server. It’s a pure JavaScript.

Download the feedback JS library from https://github.com/niklasvh/feedback.js.

Just add following lines in your page.

<script src="js/jquery.js"></script>
<script src="js/feedback.js"></script>

You need to use following script on the page.

$(document).ready(function() {
  Feedback({
    h2cPath:'js/html2canvas.js',
    url:'send.php'
  });
});

Now create a page send.php on your project root directory and write following script in file. This file will be used to save the image and send email.

$data = $_POST['data'];

$data = json_decode($data);

$message = $data[0]->Issue;
$image = $data[1];

$data = str_replace('data:image/png;base64,', '', $image);
$data = str_replace(' ', '+', $data);

$data = base64_decode($data);
$source_img = imagecreatefromstring($data);
$file = 'screens/'. uniqid() . '.png';
$imageSave = imagejpeg($source_img, $file, 10);
imagedestroy($source_img);

Download Code

I hope this will help you to send Feedback with screenshot using Feedback JS.