Search code examples
jqueryhtmlscreenshotcapturehtml2canvas

html2canvas can not capture captcha images


Here is the html codes :

<div id="divPage">
div_Page
<br/>
<img id="captchaimglogin" src="https://www.emirates.com/account/english/login/login.aspx?cptLogin_captcha=86e2a65e-f170-43b6-9c87-41787ff64a35&t=88d296b19e5e8000&mode=ssl" border="0" />
</div>
<br/>
<input type="button" id="btnSave" value="Save PNG"/>

And here is jquery codes :

$(function() {
    $("#btnSave").click(function() { 
        html2canvas($("#divPage"), {
            onrendered: function(canvas) {
                document.body.appendChild(canvas);
               }
         });
         html2canvas($("#btnSave"), {
            onrendered: function(canvas) {
                document.body.appendChild(canvas);
               }
         });
    });
}); 

And here is the jsFiddle link

How can i capture such these captcha images using with html2canvas or other ways?


Solution

  • According to HTML2Canvas documentation, you are able to use the allowTaint and taintTest configurations to allow cross-origin images.

    onrendered: function(canvas) {
                document.body.appendChild(canvas);
               },
    allowTaint: true,
    taintTest: false