In this short post, you will learn how to implement/take a screenshot of a webpage using html2canvas library. The screenshot will then be sent back to the Laravel as the backend using Axios HTTP client. The implementation steps are very simple so let's get started.Html2canvas Homepage
Step 1: Install html2canvas
To install the html2canvas library you can either use npm or yarn.
To import the library to your project you make use of JavaScript "import" module. Do note that if you are not using a build library, you can use the "require" keyword and reference it to the windows object.
import html2canvas from 'html2canvas';
window.html2canvas = html2canvas;
The "require" keywords are as follows.
window.html2canvas = require('html2canvas');
Step 3: Take Screenshot with html2canvas
To take a screenshot with this library you can call the function directly from within your page script section. The code below will take a screenshot of the "document.body" and then append it to the body to show a preview of the page being screenshotted.
If you want to make use of html2canvas to take a screenshot of a "div" tag or an "iframe" tag, you can "query select" the tag and pass it into the html2canvas function.
let specialDiv = document.getElementById('special-div'); // getting special div
let someIframe = document.querySelector('.some-iframe'); // getting some iframe
And when you have the reference to the element, you can just pass in and call the "then" method.
To save the screenshot as a "jpeg" or "png" format, you can pass the canvas object to any of your backends by sending an ajax like below. In this case we'll be using the Axios HTTP library. If you have not install axios HTTP library, then do run the command below.
npm install axios
yarn install axios
Do note that the image will be passed as a "FormData" object and the Axios have a "multiplart/form-data" set as the headers. For this example, we'll just console log the message that will be retrieved from the backend. In the normal scenario, you can provide a notification or some sort of alert to notify the user.
let specialDiv = document.getElementById('special-div'); // getting special div
html2canvas(specialDiv)
.then(canvas => {
let data = new FormData();
data.set('image', canvas.toDataURL("image/jpeg", 1));
axios.post('/save-screenshot', data, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then((data) => {
console.log('message: ', data.data.message);
})
.catch(error => {
console.log('error: ', error);
})
});
Step 5: Setup the backend Logic
For this example, we'll be using the Laravel framework as the backend. The backend logic should load the image as a stream and then save the image to the disk using the "Storage" facade. Do note that the code below only shows how the image is saved but the filename itself is returned to the client/front-end (possibly to show the user that the image is already inside the storage).
Route::post('/save-screenshot', function (Request $request) {
/* generate the image stream */
$imageStream = Image::make($request->image) /* base64_decode */
->stream('png', 100);
/* create the image path */
$imagePath = '/img/image-name.png';
/* store image to disk */
Storage::disk('public')
->put($imagePath, $imageStream, 'public');
return response()->json([
'message' => 'The image has been successfully saved',
'image_path' => $imagePath
]);
});
Optional: Store Filename to DB
To store the file name into the database you can directly call the "Laravel Model" or the "DB" facade itself. For example, if this screenshot is for an article, you can write your code like below.
By now you should be able to Screenshot the Webpage with html2canvas. If you found this tutorial to be helpful do share it with your friends and cheers happy coding!
Leave a reply