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 .
Let’s get started
- you have to install PHP If you have not installed your php then you can see it by clicking here
- 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
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 😍
