JavaScript Php

How to save an html2canvas as an image on the server ?

Image capture of any screen is very easy with html2canvas plugin . You just install this plugin and just create on click function and the image will be captured. But some time developers have to save the image in the server then there is some problem here.

So in this article I am going to tell a simple solution to this problem. By the way, I am going to react-js as I do for this solution. But you can also use it for simple JavaScript Script. and i am going to use php to save the image , But if you do not know php then there is nothing to worry because it will be a very simple script .

https://youtu.be/JkdeyftYdU8

Let’s get started

  1. you have to install PHP If you have not installed your php then you can see it by clicking here
  2. Create a react-js project if you want to use react-js.

Now go to Xamp->htdocs and create a new folder for your project You can give the name of the project. what you want .

Create React Project

create a react project using following script in your terminal and learn more about this How to create a react project click here

npx create-react-app my-app
cd my-app
npm start

Note : I am not saying here that you have to do it in React, you can go for JavaScript.

When the React project is created, you need to install a plugin for html2canvas.

If you have already done all this process then scroll down below:-

Run following script in your terminal:

npm i html2canvas

for more information about html2canvas Click Here

After that create a folder in root directory called “php” and create a new file inside php directory called save-capture.php and also create a screenshot directory inside php directory where we save the captured image ;

structure should like this :

Here we will create a function which will first capture the screen then using Ajax we will pass the data to the php.

You can see the url which will call the php file, so for this you should have a php server and start it. as you can see fig1.1

const captureScreen= () => {
   html2canvas(document.body).then(function(canvas) {
           // Create an AJAX object
         var ajax = new XMLHttpRequest();
         ajax.open("POST", "http://localhost/cbpro/php/save-capture.php", true);
         ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
         
         ajax.send("image=" + canvas.toDataURL("image/jpeg", 0.9));

         ajax.onreadystatechange = function () {

             if (this.readyState == 4 && this.status == 200) {
  
                 console.log(this.responseText);
             }
         };

     });

   };

now update your app.js file with following script

app.js

import logo from './logo.svg';
import './App.css';
import html2canvas from 'html2canvas';

function App() {
 
  
  const captureScreen= () => {
   html2canvas(document.body).then(function(canvas) {
           // Create an AJAX object
         var ajax = new XMLHttpRequest();
         ajax.open("POST", "http://localhost/cbpro/php/save-capture.php", true);
         ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
         
         ajax.send("image=" + canvas.toDataURL("image/jpeg", 0.9));

         ajax.onreadystatechange = function () {

             if (this.readyState == 4 && this.status == 200) {
  
                 console.log(this.responseText);
             }
         };

     });

   };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. 
        </p>
        <button
        className="btn btn-default"
        id='button'
        onClick={captureScreen}>Capture and Save</button>
    
        <a
          className="App-link"
          href="https://youtube.com/playlist?list=PLEtkoO2np9szIlHkM8w9QlMV2GcRHvwzB"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React Js By Host Programming
        </a>
      </header>
    </div>
  );
}

export default App;

Now Open xampp server

fig 1.1

Ok Now Update your save-capture.php file . this is the file where we can save the file

save-capture.php

<?php
 header('Access-Control-Allow-Origin: http://localhost:3000');
// Get the incoming image data
$image = $_POST["image"];
$image = explode(";", $image)[1];
$image = explode(",", $image)[1]; 
$image = str_replace(" ", "+", $image);
$image = base64_decode($image);
file_put_contents("screenshot/filename.jpeg", $image);

require 'email.php';
echo "Done";

so now you run your project click on “capture and save” button and check screenshot directory image that will store 😍

RECOMMENDED ARTICLES





One reply on “How to save an html2canvas as an image on the server ?”

Leave a Reply

Your email address will not be published.