Search code examples
javascriptcross-domainhtml2canvas

How to get screenshot of cross domain images in a webpage?

I am using html2canvas.js to take "screenshots" of webpage directly on the users browser. But I've found that it is not getting images that is using cross-domain reference. Also, I cannot set cross-domain rights on the server as well.

So how can I get this done?

Solution

  • The html2canvas team does not have a good documentation. So, I had to do a lot of R&D to come to this solution hence, I am sharing this details here for the benefit of others.

    1. The plugin accepts a parameter as an object where it expects the object to have a property "proxy". You need to specify the proxy service's/module's name (with relative path) here.

    2. Using this value the plugin forms a URL like: https://your.domain.com/yourPath/yourProxyService?url=https%3A%2F%2Fcrossdomain.com%2FImage.png&callback=html2canvas_0

    3. When the plugin tries to access this proxy using the newly created URL it expects data with the base 64 value of the image in JSONP format. For example see below:

      html2canvas_0("data:image/png;base64,R0lGODlhQAAwAMQAAKioqICAgLKysm1tbWNjY8bGxpSUlHd3d9nZ2ePj48/Pz7y8vJ6enoqKillZWY6Nje3t7Q")

    NOTE: html2canvas_0 is the value of the "callback" parameter in the URL