html2canvas无法捕获验证码图像

Question

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?

Answer 1

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

Answer 2

Detect and remove the captcha on the original page before running html2canvas .

Many implimentations of captcha's will have cross-domain content that will taint the canvas. Tainting a canvas will automatically prevent html2canvas from capturing the page...