Skip to main content

Capturing the screenshot of a web-page from your web app (using html2Canvas)

A few months ago, I had to add a feature to this web app at work that would enable the users to get a screenshot of the page they are on. When I was given this problem to solve, I thought surely someone must have solved this problem? so I started looking for a library that would help me achieve this. After a bit of searching I came across the html2canvas library which is awesome and it really does get the job done. I am not going to get into details about how the html2canvas library works, I think it's documentation does a good job of it. Anyway my javascript code to capture the screenshot was something like this.

function getScreenshot(callbackFunc){
    var content = document.querySelectorAll("divToCapture")[0];
    setTimeout(function(){screenCap();},0);

    function screenCap(){
        html2canvas(content, {
            onrendered: function(canvas) {
                callbackFunc(canvas.toDataURL());
            }
        });
    } 
}
So the above function is pretty self-explanatory, however I must provide a bit of context to make things more clear. Ok so the web app that I had to add this feature to was a GWT based, so I am passing a callback function that would take the contents of the canvas once html2canvas finishes drawing them.

Now this line of the code
setTimeout(function(){screenCap();},0);
might seem a little bit strange, why not just call the screenCap method would a timeout. Well so at least for the web app that I was working with, the above code without the timeout was working just fine on Chrome and IE but not on Firefox. What was happening on Firefox was that the downloaded image would be blank without the timeout. I tried to find an explanation for this, but I was not very successful. I posted a question on Stackoverflow as well, but could not quite find an answer.

So my conclusion was, since Javascript is single-threaded, and one of the things setTimeout does is push the execution of the function down the execution chain.




Comments

Popular posts from this blog

Upload to AWS S3 from Java API

In this post, you will see code samples for how to upload a file to AWS S3 bucket from a Java Spring Boot app. The code you will see here is from one of my open-source repositories on Github, called document-sharing. Problem Let’s say you are building a document sharing app where you allow your users to upload the file to a public cloud solution. Now, let’s say you are building the API for your app with Spring Boot and you are using AWS S3 as your public cloud solution. How would you do that? This blog post contains the code that can help you achieve that. Read more below,  Upload to AWS S3 bucket from Java Spring Boot app - My Day To-Do (mydaytodo.com)

App update, discovering Protractor(testing) and an Angularjs State machine

So for the last couple of weeks, I have not be able to update my blog or finish a couple of the posts that I started writing. Well, I have...been a bit busy, with some the following things,  Testing my app I have been using the app( iOS ) on my iPhone for the past couple of months now, which is both good and bad. The good thing is I can test it and the bad thing is, I can use it every day. Part of the reason, I started building this app is to have something that I can and like to use everyday and since I am already using it, the incentive to release it is not as high as if it were something that I could not use. Anyway I did make some good progress over the last couple of weeks, like  Delete the app from my iPhone and do a clean install: this did help me find a few simple bugs that would pop-up when the app is first installed GET AN APP ICON, FINALLY! this was a bit of a hurdle and I thanks to Fiverr  and fivercrazyguy , I finally have my app icon. The day job ...

Why can't I cancel a local notification in my iOS app?(in Swift)

Prelude I have mentioned the fact that I am working on my first iOS app in a number of my previous posts and as such I face a number of newbie/noob(?) problems. They are not really problems as much as they are simply things that I do not know, for e.g. the following, how do I get the day of the week? where is my string.replaceAll in Swift? knowing which local notification brought my app to foreground ? serving HTML content in an iOS app that works on iOS 7 and above Thankfully, I have managed to make at least one generic solution and contribute it to the community i.e. my open-source Xcode project template( HTML5StarterAppWithSwift ) which you can get from Github . So this post basically describes another very simple problem that I have found a solution to, but I do not fully understand why the problem was occurring in the first place. Introduction As I have mentioned in this post , my iOS app uses local notifications i.e. UILocalNotification   and i...