html2canvas 无法捕获验证码图像答案

【问题标题】：html2canvas can not capture captcha imageshtml2canvas 无法捕获验证码图像
【发布时间】：2015-07-27 18:41:25
【问题描述】：

这里是html代码：

<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"/>

这里是 jquery 代码：

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

这是jsFiddle链接

如何使用 html2canvas 或其他方式捕获这些验证码图像？

【问题讨论】：

“那么……为什么还要抓到captcha？”，他怀疑地说。顺便说一句，验证码的许多实现将具有跨域内容，这将污染画布，从而阻止捕获验证码；
没有可疑活动，我只需要捕获整个页面，包括加载的验证码。
很公平 :-) 我已经发布了一个如何捕获页面的答案，因为captcha 可能会阻止 html2canvas 工作。

标签： jquery html screenshot capture html2canvas

【解决方案1】：

根据HTML2Canvas 文档，您可以使用allowTaint 和taintTest 配置来允许跨域图像。

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

【讨论】：

allowTaint 只是解决方案的一半。托管图像的服务器也必须配置为允许将图像提供给匿名客户端。 ;-)
但不能直接在验证码图像上工作。任何想法？ jsfiddle.net/6FZkk/287
@MoonLight 我感觉这与markE 的评论有关。该文档还讨论了图像的局限性。

【解决方案2】：

在运行html2canvas 之前检测并删除原始页面上的captcha。

验证码的许多实现都将包含会污染画布的跨域内容。污染画布会自动阻止 html2canvas 捕获页面...

【讨论】：

听着，谢谢你的回答。我不小心对你投了反对票，不能再提高它。因此，其中一位成员再次投票支持该成员，并感谢您的关注。