Html2canvas: 图像标签未捕获

您缺少图像的预加载，它本身是异步的，因此您需要将其包装在回调中。 您可能也在使用旧版本，因此我建议从https://github.com/niklasvh/html2canvas/downloads获取最新版本，然后使用以下方法进行测试：

html2canvas( $('table'), {
   onrendered: function( canvas ) {
        var img = canvas.toDataURL();
        $('#calendar_to_canvas').attr('src', img);
   }
});

感谢您的快速响应，我下载了最新版本并尝试了上面的代码，它仍然没有在渲染的画布中显示图像标签。 我是否遗漏了什么，我添加了 html2canvas.js、jquery.plugin.html2canvas 并使用了 jquery 1.7。 非常感谢您的帮助。

托管的图像是否与您正在呈现的页面相同？

设置logging: true并检查控制台对图像的描述，它们是否失败？

图片加载完美，请参阅下面的日志：

html2canvas：预加载开始：查找背景图像 html2canvas.js:27
html2canvas：开始：图像：1 / 1（失败：0）html2canvas.js:27
html2canvas：开始：图像：2 / 2（失败：0）html2canvas.js:27
html2canvas：开始：图像：3 / 3（失败：0）html2canvas.js:27
html2canvas：开始：图像：4 / 4（失败：0）html2canvas.js:27
html2canvas：开始：图像：5 / 5（失败：0）html2canvas.js:27
html2canvas：开始：图像：6 / 6（失败：0）html2canvas.js:27
html2canvas：开始：图像：7 / 7（失败：0）html2canvas.js:27
html2canvas：预加载：查找图像 html2canvas.js:27
html2canvas：预加载：完成。 html2canvas.js:27
html2canvas：开始：图像：8 / 18（失败：0）html2canvas.js:27
html2canvas：开始：图像：9 / 18（失败：0）html2canvas.js:27
html2canvas：开始：图像：10 / 18（失败：0）html2canvas.js:27
html2canvas：开始：图像：11 / 18（失败：0）html2canvas.js:27
html2canvas：开始：图像：12 / 18（失败：0）html2canvas.js:27
html2canvas：开始：图像：13 / 18（失败：0）html2canvas.js:27
html2canvas：开始：图像：14 / 18（失败：0）html2canvas.js:27
html2canvas：开始：图像：15 / 18（失败：0）html2canvas.js:27
html2canvas：开始：图像：16 / 18（失败：0）html2canvas.js:27
html2canvas：开始：图像：17 / 18（失败：0）html2canvas.js:27
html2canvas：开始：图像：18 / 18（失败：0）html2canvas.js:27
图片加载完成：#18（失败：0）html2canvas.js:27

无法从画布获取图像数据，因为画布已被跨域数据污染。

html2canvas：渲染器：画布渲染器完成 - 返回画布 obj

javascript 文件和图像位于与上一条注释相同的目录中。

嗨 niklasvh，它完美地解决了相同的原始策略问题，我解决了在之前使用 file:// 在本地运行的 websever 中运行的问题，这被视为跨域问题。 感谢您引导我走向正确的方向。 这是一个很棒的插件:)

Niklashvh 我正在尝试为 android 混合应用程序执行此操作，该应用程序使用 file:// 在本地运行，您能否指导我解决此跨域问题或任何建议，非常感谢。

如果您不需要将图像导出到任何地方，您可以随时设置allowTaint: true

我们正在将图像导出到内存并在电子邮件中以 pdf 格式发送

我也有同样的问题，日志如下：

html2canvas：预加载开始：查找 html2canvas.js 背景图像：21
html2canvas：预加载：查找图像 html2canvas.js：21
html2canvas：预加载：完成。 html2canvas.js 21
html2canvas：开始：图像：1/2（失败：0）html2canvas.js：21
html2canvas：开始：图像：2/2（失败：0）html2canvas.js：21
完成加载图像：#2（失败：0）html2canvas.js：21
html2canvas：渲染器：画布渲染器完成 - 返回 obj 画布

图像位于背景图像中，只需加载主图像div，不显示囚犯。

没问题，因为图像交叉在同一个域中。

任何的想法？

如果我添加“背景大小：封面；” 到样式，图像没有出现......

显然这是问题所在

它奏效了！！，只有我必须输入“background-size: 100% 100%;” 而不是“背景大小：封面；”

使用带有 img 的在线 url 时HTML@Canvas不捕获，此问题的解决方案是什么？
谢谢

@Elgamal10使用代理

https://github.com/brcontainer/html2canvas-php-proxy（html2canvas代理与 php）
https://github.com/brcontainer/html2canvas-asp-vbscript-proxy （带有 asp-classic 的 html2canvas 代理 - vb）
https://github.com/brcontainer/html2canvas-csharp-proxy （带有 asp.net 的 html2canvas 代理 - csharp）

注意：阅读文件 README.md

感谢您的回复，屏幕拍摄效果很好，但有如下错误：

html2canvas_5 未定义
html2canvas_0 未定义
html2canvas_5 未定义
html2canvas_4 未定义
html2canvas_1 未定义
html2canvas_5 未定义

@Elgamal10在项目中创建问题
https://github.com/brcontainer/html2canvas-csharp-proxy/issues?state=open

我相信你使用 C# (ASP.NET)，对吗？

嗨，尼克拉斯，

我已经开始使用你的 api，它很棒.. 但我被卡住了，你能帮忙吗..

我正在尝试使用以下代码将 html 转换为画布：
jQuery('html').html2canvas({
代理：“ http://localhost/myproject/proxy.jsp ”，
用户CORS：真，
渲染：功能（画布）{
警报（画布）；
var url = canvas.toDataURL("image/png");
window.open(url, '_blank');
},
});

现在我有一个名为 proxy.jsp 的文件，它保存了路径 ~/tomcat/myproject/images/ 中的所有交叉原点图像

之后我在控制台中看到了这个
资源被解释为脚本但使用 MIME 类型图像/jpeg 传输：“ http://localhost/myproject/proxy.jsp?url=http%3A%2F%2Fi.ebayi ...QYEAAMXQVERSuVtL%2F%24_1.JPG%3Fset_id%3D8800004005&callback= html2canvas_64"。 html2canvas.js:2264

毕竟，我的回调函数没有执行，我无法创建画布..

可以做什么？ 你能帮忙吗？

非常感谢

@himakshi89您不能同时使用proxy:和userCORS: 。

更喜欢使用代理。
注意：尝试捕捉身体。

在您的代码中有一个逗号：

},//this is wrong.

});

你的 html2canvas 是什么版本？

尝试这个：

jQuery('body').html2canvas({
    "onrendered": function(canvas) {
    }
});

如果不起作用，请尝试下载 html2canvas 这个https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js并使用以下代码：

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

@br容器
你好

我已经修改了我的代码，现在我从 proxy.jsp 发送响应作为
({"html2canvas_67":http://localhost/myproject/0.1651487380333363.jpg"})

现在控制台中没有显示错误。
但是现在什么都没有发生..应该发生什么或者有什么地方需要改变？

请帮忙

但由于控制台无法显示任何内容
你用了我的第二个示例代码？ 它将日志发送到控制台。

尝试提供您的代码在线测试方式。

按照建议，我删除了 useCORS 并将 html 替换为 body

jQuery('body').html2canvas({
代理：" http://nisquare.dyndns.org :8087/facebook/proxy.jsp",
日志记录：真，
渲染：功能（画布）{
var url = canvas.toDataURL("image/png");
window.open(url, '_blank');
}
});

我也收到这是我的控制台
html2canvas：加载错误 : http://cmsip.tradus.ibcdn.com/MOBMKXE29ULYUMKH_4902586_320x360.jpg html2canvas.js:21

我附上了我得到的截图

您尝试下载https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js

和这个代码：

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

或不？

注意： http://nisquare.dyndns.org:8087/facebook/proxy.jsp坏了！

我已经下载了最新版本

我用以下代码替换了代码

html2canvas($("body").get(0), {
代理：" http://nisquare.dyndns.org :8087/facebook/proxy.jsp",
日志记录：真，
渲染：功能（画布）{
var url = canvas.toDataURL("image/png");
window.open(url, '_blank');
}
});

把链接测试发给我

我使用的是 chrome 扩展，该扩展仍处于开发模式

带有 JSP 的“Chrome 扩展程序”？

jsp仅用于代理部分..根据您的说法，更可取的是什么？

Chrome-extension 运行在其他“协议”和“框架”中，proxy.jsp 使用的是 HTTP 协议。

我相信 chrome 扩展不需要代理。 像这样使用：

html2canvas($("body").get(0), {
    "logging": true,
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

阅读： http : //developer.chrome.com/extensions/tut_debugging.html

@br容器
嘿，谢谢你的想法……我们现在使用的是 chrome 本身提供的 api。 它有一个功能 chrome capturevisibletab 可以很容易地解决或解决问题:)

@jgab-net 非常感谢。 搜索错误的时间太长

@Sumit8 (Y) 不客气

@gitbala你的问题解决了吗？ @niklasvh这个问题可以关闭吗？ （如果这很烦人，我会停止错误分类。:)

@usmonster一定要继续，为我节省一些时间来查看每个未解决的问题:)

是的，它解决了:)

2014 年 9 月 1 日星期一凌晨 4:11，usmonster [email protected]写道：

@gitbala https://github.com/gitbala你的问题解决了吗？ @niklasvh
https://github.com/niklasvh这个问题可以关闭吗？ （我会停下来
错误分类是这很烦人.. :)

—
直接回复此邮件或在 GitHub 上查看
https://github.com/niklasvh/html2canvas/issues/145#issuecomment -54047596
.

我使用 html2canvas - 本地图像未在 pdf 中呈现。 这是什么解决方案？

@niklasvh请帮助 - html 中的徽标图像未在 pdf 中呈现

我在转换内联图像时失败了。如何使用“代理”：“ http://localhost/myproject/proxy.jsp ”，我使用 vue ，把这个 jsp 放在哪里，我不知道如何使用@niklasvh可以吗帮助？

@qiuyaofan有同样的问题，你得到解决了吗？ 我将它与 angular2 一起使用并从其他服务器获取图像。 @gitbala你得到解决方案了吗？

+1 顺便说一句，日志看起来不错（ html2canvas: Images loaded, starting parsing ），但我仍然看不到 pdf 上的图像。

我正在使用

allowTaint: 真,
使用CORS：真，
污点测试：假，

@NikhilRadadiya @qiuyaofan伙计们，也一直在寻找一个公正的客户端解决方案。 使用 vue js 并从 giphy 获取图像。 所以这是对我来说效果很好的一个：

html2canvas(element, {
        "logging": true, //Enable log (use Web Console for get Errors and Warings)
        useCORS: true,
        taintTest: false,
        onrendered: function(canvas) {
          var img = new Image();
          img.onload = function() {
            document.body.appendChild(img);
          };
          img.error = function() {
            if(window.console.log) {
              window.console.log("Not loaded image from canvas.toDataURL");
            } else {
              alert("Not loaded image from canvas.toDataURL");
            }
          };
          img.src = canvas.toDataURL("image/png");
        }
      });

所以没有使用代理。

@creepteed我有其他元素，我需要将其转换为画布然后保存为 pdf，我的 html 不只包含图像，如果是这种情况，那么我该如何使用您发布的上述功能？

嗨@niklasvh ，
我想使用 htmltocanvas 捕获网页一切正常，但是当我尝试捕获网页时，我没有获取图像。
你能帮助我吗？
这是我的代码：
function capture(div_id=null) { jQuery(".screenshot_row_target").html2canvas({ logging: true, //taintTest : true, //proxy: "https://skeleton-21.myshopify.com", onrendered: function (canvas) { jQuery('#screenshot_img_val').val(canvas.toDataURL("image/png")); //document.getElementById("screenshot_html_form").submit(); } }); }

在控制台中，我得到了这个
html2canvas: Preload starts: finding background-images html2canvas.js:19 html2canvas: Preload: Finding images html2canvas.js:19 html2canvas: Preload: Done. html2canvas.js:19 html2canvas: start: images: 0 / 0 (failed: 0) html2canvas.js:19 Finished loading images: # 0 (failed: 0) html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/files/1/2186/4293/files/user2_300x300.png?v=1503661428 html2canvas.js:19 html2canvas: Error loading background: html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_300x300.gif html2canvas.js:19 html2canvas: Renderer: Canvas renderer done - returning canvas obj
谢谢。