<p>html2canvas 不呈现位于元素中的图像</p>

创建于 2015-11-09  ·  36评论  ·  资料来源: niklasvh/html2canvas

假设我要添加文本和背景颜色，然后我会按保存，它会显示文本和背景颜色，但如果我将图像添加到 div 它不会显示图像，但仍然是其他的东西.

picture ghost

最有用的评论

插入 de 选项allowTaint以查看屏幕截图中的所有图像

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

picture SebasAlvarez 于 2017-08-23
👍34 👎22 ❤16 🎉7 🚀6 😕2

所有36条评论

你好。
我有完全一样的问题。

RomainKurtz picture RomainKurtz 于 2015-11-26

这里同样的问题。
我正在尝试拍摄一条推文，但附加的图像没有通过。
附图片。

stream-item-tweet-670397195221241856 2

jayantbh picture jayantbh 于 2015-11-28

我相信默认情况下会阻止来自其他站点的图像，因为它“污染了 HTML5 画布”。 这是调用渲染器时需要使用的选项：

属性：allowTaint
类型：布尔值
默认值：假
描述：是否允许跨域图片污染画布

在这里找到它： https://html2canvas.hertzen.com/documentation.html。

ryanabooth picture ryanabooth 于 2015-12-23
👍19

同样的问题....
我的图片来自同一个地方

FJBelmonte picture FJBelmonte 于 2017-06-19

我遇到了同样的问题，解决问题的最好方法是在服务器上运行项目并查看结果。
就我而言，早些时候我在没有任何服务器的情况下直接运行 html 文件，但是在谷歌搜索了一下之后，我得到了一个在服务器上尝试的解决方案。
我使用 Visual Studio 尝试了我的项目，它运行良好，我的 div 标签内的图像也被复制了

sky1508 picture sky1508 于 2017-07-13

插入 de 选项allowTaint以查看屏幕截图中的所有图像

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

SebasAlvarez picture SebasAlvarez 于 2017-08-23
👍34 👎22 ❤16 🎉7 🚀6 😕2

我有 div 元素的列表。
当我尝试通过 id 捕获每个 div 时，捕获了一些 div 半部分，并且一些 div 的捕获图像空白。
你能告诉我问题是什么，我该如何解决。 @

biplabmalakar picture biplabmalakar 于 2017-10-13

同样的问题。感谢您的解决方案。

qiangzi7723 picture qiangzi7723 于 2017-12-26

html2canvas 未将给定 src 的图像转换为 base64 格式。 我已经打印了日志。 请帮助

1283ms html2canvas：文档克隆 html2canvas.js:1487
3936 毫秒 html2canvas：初始化 CanvasRenderer，大小为 601 x 965 html2canvas.js:1487
3937 毫秒 html2canvas：启动 NodeParser html2canvas.js:1487
4014ms html2canvas：获取节点，总数：10 html2canvas.js:1487
4015ms html2canvas：计算溢出剪辑 html2canvas.js:1487
4034ms html2canvas: 开始获取图片 html2canvas.js:1487
4044 毫秒 html2canvas：添加图像 #1数据：image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047 毫秒 html2canvas：添加了图像 #2数据：image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js:1487
4051ms html2canvas: 完成图片搜索 html2canvas.js:1487
4052ms html2canvas: 成功加载图片 #1
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==", image: img, tainted: null, promise: h}
html2canvas.js:1487
4056ms html2canvas: 成功加载图片#2
ImageContainer {src: "数据:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", image: img, tainted: null, promise: h}
html2canvas.js:1487
4059ms html2canvas: 图片加载，开始解析html2canvas.js:1487
4060ms html2canvas：创建堆叠上下文 html2canvas.js:1487
4064ms html2canvas：排序堆叠上下文 html2canvas.js:1487
4066ms html2canvas：使用 9 个项目创建的渲染队列 html2canvas.js:1487
4104ms html2canvas: 完成渲染 html2canvas.js:1487
4109ms html2canvas：裁剪画布：左侧：28 顶部：529 宽度：545 高度：0 html2canvas.js:1487
4111ms html2canvas：产生的裁剪宽度为 545，高度为 0，x 28 和 y 529

manosymbian1 picture manosymbian1 于 2018-01-04
👍2

html2canvsas 不渲染使用 base64 src 给出的图像，调用不会返回到“onrendered”
功能。 请帮助

1283ms html2canvas：文档克隆 html2canvas.js:1487
3936 毫秒 html2canvas：初始化 CanvasRenderer，大小为 601 x 965 html2canvas.js:1487
3937 毫秒 html2canvas：启动 NodeParser html2canvas.js:1487
4014ms html2canvas：获取节点，总数：10 html2canvas.js:1487
4015ms html2canvas：计算溢出剪辑 html2canvas.js:1487
4034ms html2canvas: 开始获取图片 html2canvas.js:1487
4044 毫秒 html2canvas：添加图像 #1数据：image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047 毫秒 html2canvas：添加了图像 #2数据：image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js:1487
4051ms html2canvas: 完成图片搜索 html2canvas.js:1487
4052ms html2canvas: 成功加载图片 #1
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==", image: img, tainted: null, promise: h}
html2canvas.js:1487
4056ms html2canvas: 成功加载图片#2
ImageContainer {src: "数据:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", image: img, tainted: null, promise: h}
html2canvas.js:1487
4059ms html2canvas: 图片加载，开始解析html2canvas.js:1487
4060ms html2canvas：创建堆叠上下文 html2canvas.js:1487
4064ms html2canvas：排序堆叠上下文 html2canvas.js:1487
4066ms html2canvas：使用 9 个项目创建的渲染队列 html2canvas.js:1487
4104ms html2canvas: 完成渲染 html2canvas.js:1487
4109ms html2canvas：裁剪画布：左侧：28 顶部：529 宽度：545 高度：0 html2canvas.js:1487
4111ms html2canvas：产生的裁剪宽度为 545，高度为 0，x 28 和 y 529

manosymbian1 picture manosymbian1 于 2018-01-04

@SebasAlvarez - allowTaint选项不再起作用。 它仍然对你有用吗？

sandeepnagra picture sandeepnagra 于 2018-03-22

@SebasAlvarez ， @sandeepnagra ：
我正在使用此代码在新选项卡中进行图像屏幕截图，但图像未呈现，而且我对“ llowTaint:true ”感到厌倦，它仅在同一窗口内工作，但不在新选项卡中工作。
这是我的代码：
函数渲染（）{
html2canvas(document.body, { allowTaint : true,
渲染：函数（画布）{
document.body.appendChild(canvas);
window.open(canvas.toDataURL());
}
});
}
你能告诉我是什么问题，你怎么能解决这个问题？

venkateshduddu picture venkateshduddu 于 2018-04-02

@venkateshduddu - 在截屏之前您是否先将焦点转移到新标签？

sandeepnagra picture sandeepnagra 于 2018-04-02

@sandeepnagra - 没有sandeep，我只是使用点击事件。 如果我使用本地图像路径但服务器路径在新选项卡中不起作用，那么还有一件事屏幕截图有效。

venkateshduddu picture venkateshduddu 于 2018-04-03

@venkateshduddu - 点击事件不会自动将焦点转移到新标签，你必须触发它。 所以先试试吧，我100%肯定它会解决你的问题。

关于服务器路径，该网络驱动器是否经过身份验证？ 如果是，您是否在将文件上传到网络驱动器之前进行身份验证？ 如果您想将它们上传到 S3 存储桶，那就完全不同了。

sandeepnagra picture sandeepnagra 于 2018-04-04

嗨，当我尝试使用内部 ip 摄像头筛选 iframe 时，它​​返回一个无效图像，请你帮帮我吗？

AntonioDilorenzo picture AntonioDilorenzo 于 2018-08-21

如果我使用 allowTaint 则下载选项不起作用。 请帮忙

youmakr picture youmakr 于 2019-04-01
👍12

同样的问题....
我的图片来自同一个地方

我刚刚解决了这个问题。
请启用选项“useCORS”为“真”
代码如下：
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

Sotyoyo picture Sotyoyo 于 2019-04-27
👍20 ❤5 🎉5 🚀1

非常感谢@Sotyoyo ，我的错误已用上面的代码修复。 谢谢谢谢

sivagopi5072 picture sivagopi5072 于 2019-05-03

@Sotyoyo 非常感谢兄弟，上帝保佑你 <3

kasim444 picture kasim444 于 2019-05-20

@Sotyoyo 非常感谢，它为我工作:)

CodingApp picture CodingApp 于 2019-05-24
🎉1 😄1

图像未渲染我的代码有什么问题吗？

html2canvas(document.getElementById("html-2-pdfwrapper"), {
记录：真，
字母渲染：1，
允许污染：假，
使用CORS：真，
渲染：函数（画布）{
var img = canvas.toDataURL('image/png');
var doc = new jsPDF();
doc.addImage(img, 'JPEG', 20, 20);
doc.save('test2.pdf');
}
});

M-Yasir-Hussain picture M-Yasir-Hussain 于 2019-05-28

同样的问题....
我的图片来自同一个地方

我刚刚解决了这个问题。
请启用选项“useCORS”为“真”
代码如下：
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

是工作！ 谢谢！

yurimagagnatto picture yurimagagnatto 于 2019-07-16

同样的问题....
我的图片来自同一个地方

我刚刚解决了这个问题。
请启用选项“useCORS”为“真”
代码如下：
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

没错/

html2canvas(document.querySelector("#id-of-element"),{ logging: true, letterRendering: 1, allowTaint: false, useCORS: true }).then(canvas => {
var imgData = canvas.toDataURL('image/jpeg');
});

yurimagagnatto picture yurimagagnatto 于 2019-07-16

插入 de 选项allowTaint以查看屏幕截图中的所有图像

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

谢谢。 它工作正常。

但我无法将图像样式克隆到画布

trungegd picture trungegd 于 2019-07-18

即使在使用以下选项后，我仍然面临同样的问题是我的代码。
var element = document.querySelector("#map-image-id");
html2canvas（元素，{
记录：真，
字母渲染：1，
允许污染：假，
使用CORS：真
}).then(canvasElm => {
var imageType = "图像/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI(imageData);
console.log("src", src);
console.log("图像数据", imageData);

Swathi178 picture Swathi178 于 2019-11-04

即使在使用以下选项后，我仍然面临同样的问题是我的代码。
var element = document.querySelector("#map-image-id");
html2canvas（元素，{
记录：真，
字母渲染：1，
允许污染：假，
使用CORS：真
}).then(canvasElm => {
var imageType = "图像/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI(imageData);
console.log("src", src);
console.log("图像数据", imageData);

你也一样。 你解决了吗？

zeroone001 picture zeroone001 于 2019-11-14

即使在使用以下选项后，我仍然面临同样的问题是我的代码。
var element = document.querySelector("#map-image-id");
html2canvas（元素，{
记录：真，
字母渲染：1，
允许污染：假，
使用CORS：真
}).then(canvasElm => {
var imageType = "图像/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI(imageData);
console.log("src", src);
console.log("图像数据", imageData);

我有同样的问题任何帮助

aymanElkhouly-sharingGroup picture aymanElkhouly-sharingGroup 于 2019-11-28
👀1

我看到了同样的问题。 我究竟做错了什么？

html2canvas(document.getElementById(<id>), {
    logging: true,
    letterRendering: 1,
    allowTaint: false,
    useCORS: true
}).then(result => {
    var img = result.toDataURL("image/png");
    savePng(img);
});
kkozler picture kkozler 于 2019-12-29

如果您想包含<img src-"..." /> ，则以下内容也适用：

html2canvas(report, {letterRendering: 1, allowTaint: true, useCORS: true})
            .then((canvas) => {      
                const imgData = canvas.toDataURL('image/png');
               // const pdf = new jsPDF();
               // pdf.addImage(imgData, 'PNG', 10, 10);
                //pdf.save("foo.pdf");  
            });
SylarRuby picture SylarRuby 于 2020-02-12
👀1

我的内容包含来自 Aws.s3() 的图像。 上述评论不适用于我的情况。

html2canvas（内容，{letterRendering：1，allowTaint：false，useCORS：true}）
.then(画布 => {
const imgData = canvas.toDataURL('image/png');
控制台.log(imgData);
常量 pdf = 新的 jsPDF();
pdf.addImage(imgData, 'PNG', 10, 10, canvas.width, canvas.height);
pdf.save('下载.pdf');
});

输出画布只包含一个空白框而不是图像。 有人对我的情况有解决方案吗？

venkateshCorezi picture venkateshCorezi 于 2020-03-12
👀8

我的内容包含来自 Aws.s3() 的图像。 上述评论不适用于我的情况。

html2canvas（内容，{letterRendering：1，allowTaint：false，useCORS：true}）
.then(画布 => {
const imgData = canvas.toDataURL('image/png');
控制台.log(imgData);
常量 pdf = 新的 jsPDF();
pdf.addImage(imgData, 'PNG', 10, 10, canvas.width, canvas.height);
pdf.save('下载.pdf');
});

输出画布只包含一个空白框而不是图像。 有人对我的情况有解决方案吗？

同样的问题。 来自 S3 存储桶的图像

alvnrapada picture alvnrapada 于 2020-06-18

同样的问题....
我的图片来自同一个地方

我刚刚解决了这个问题。
请启用选项“useCORS”为“真”
代码如下：
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

谢谢
它对我有用❤❤

saadh393 picture saadh393 于 2020-06-27

CORS 策略已阻止从源“ http://localhost :3000”访问“ https://image/logo链接”处的图像：请求的资源上不存在“Access-Control-Allow-Origin”标头。
这是我的标志没有出现在 pdf 文件中的原因吗？
使用 css 应用所有文本，并且我的静态文件夹中的品牌徽标正在出现。
请回答需要帮助我正在尝试这个超过 2 周。

Vishal-Kank picture Vishal-Kank 于 2020-07-16

对于来到这里的任何人，在尝试了很多事情之后，我发现要从外部资源（例如 S3 存储桶）获取图像，您必须为 html2canvas 启用 useCORS = true ，并对从 S3 提供的图像启用 CORS 策略。

khaiquangnguyen picture khaiquangnguyen 于 2020-09-21

我使用 html2canvas 代理解决了它。 您可以在此处查看有关使用和测试的一些详细信息：
https://github.com/zeusstl/html2canvas-proxy-nodejs

zeusstl picture zeusstl 于 2020-10-14
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

kunal886496 picture kunal886496  ·  3评论
ABHIKSINGHH picture ABHIKSINGHH  ·  3评论
koreanman picture koreanman  ·  4评论
tjchambers32 picture tjchambers32  ·  3评论
Loki180 picture Loki180  ·  4评论