嗨，大家好！
感谢您的工作，h2c 是一个很棒的工具！
我在页面上有一个小问题： http :
body { ... 背景：#070707 url(../img/bg.jpg) 不重复 50% 0;
不渲染。 通过简单的 h2c 调用：
html2canvas($('body'), {
allowTaint: false,
logging:true,
onrendered: function (canvas) {
document.body.appendChild(canvas);
}
});
和你的测试控制台http://html2canvas.hertzen.com/screenshots.html我有相同的结果：
原来的：
渲染：
html2canvas：0.4.0
MacOs 10.6 铬 29.0.1547.62
谢谢！
shauchenka
所有56条评论
似乎已用 0.4.1 修复（在开发分支中）。 可能与#256有关
niklasvh
于 2013-09-04
您可以尝试使用0.4.1并查看问题是否仍然存在？
niklasvh
于 2013-09-07
你好。 我有完全一样的问题。 是的，问题在 0.4.1 中仍然存在。 感谢所有的帮助。
manuelpaulo
于 2013-10-23
我有同样的问题......有任何解决方案吗？ 感谢 Niklas 提供了这个惊人的脚本。
此代码不会呈现。
div class="mc-image" title="" style="background- image:url ('http://eterni-t.design.s3.amazonaws.com/381/theme-154-original-1.jpg' )；宽度：1025px；高度：780px； z-index：9999"
ymorin007
于 2013-11-14
我注意到如果我删除 background-size: cover; 从我的 class="mc-image" 开始就可以了。
ymorin007
于 2013-11-15
@ymorin007您是否使用 Mac 和 Chrome/Opera/Safari 和/或使用最新提交（即自己构建脚本）？
niklasvh
于 2013-11-15
Windows7 Chrome 版本 30.0.1599.101 m
ymorin007
于 2013-11-15
临时修复：
将第 2818 行更改为
ctx.fillStyle = (options.background !== undefined) ? options.background : parsedData.backgroundColor;
BarryDam
于 2013-12-03
它肯定与背景大小的两个选项有关：包含或覆盖。
alexandrethsilva
于 2013-12-14
最新的提交 (html2canvas 0.4.1) 为我修复了它
ymorin007
于 2013-12-15
即使在最近一次提交之后，我的仍在这样做......
我的背景大小设置为“覆盖”，我也尝试过“自动 100%”，但它仍然只是白色/透明。
如果我删除背景大小，它捕获就好了......还有更多提示吗？
jfrux
于 2014-01-13
hernan604
于 2014-01-15
当 url 包含到上层目录背景的相对路径时，我对背景图像有问题： url("../i/alerts-16x.png")
如果以以下方式重新定位 png 背景，它会起作用： url("i/alerts-16x.png")
mobichel
于 2014-03-03
我无法渲染背景图像，它似乎被覆盖或包含背景大小，因此我将 0.4.1 版本中的第 350 行更改为：
topPos = isNaN(parseInt(bgposition[1], 10)) ? topPos : parseInt(bgposition[1], 10);
它有效！
fperich
于 2014-03-06
我使用的是 0.4.1 版
我也有背景问题。
我按照 fperich 的建议更改了 live 350，但没有帮助。
也试过hernan推荐的base64背景图片也没有什么乐趣。
我试图转换的网址是这个
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123
当我在这里使用网页渲染器时，它会转换为背景
http://html2canvas.hertzen.com/screenshots.html
但在我自己的页面上它没有背景。 在此处查看示例
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123
我使用的代码是这个
<script type="text/javascript">
$(window).load(function() {
html2canvas(document.body, {
onrendered: function(canvas) {
window.location.href = canvas.toDataURL('image/jpeg');
},
allowTaint: true,
taintTest: false
});
});
</script>
它基本上让页面加载并将其自身转换为图像。
我的代码有什么问题吗？
谢谢
janmd
于 2014-03-21
fperich 你是摇滚人！！ 谢谢
oso0521
于 2014-04-22
我第二点，fperich，你现在是我最喜欢的人！
mitni455
于 2014-07-13
谢谢 fperich :D 效果很好
Jehyeok
于 2014-09-01
@sauchenka @niklasvh你说这个问题解决了吗？ 这个问题可以/应该关闭吗？
usmonster
于 2014-09-01
使用 0.4.1（版本和开发人员最新版本），我的子元素的背景图像（子元素是精灵）不会显示在画布上，至少在 Windows 版 Chrome 中。 Firefox for Windows 运行良好。 在 Mac 版 Chrome 上，我得到一个黑色方块，其中背景图像的跨度是。 我试过 fperich fix 但它对我不起作用。 背景图片来自同一个来源，所有文件都在服务器上的同一目录中。
r14n
于 2014-09-05
@4gstudios您能否在 jsfiddle（或某些可公开访问的链接）中放置一个简化的示例来演示该问题？
usmonster
于 2014-09-06
@usmonster当然。 我没有使用 jsfiddle 因为我不希望图像是外部的，所以我们可以排除跨域问题。
现在你猜怎么着。 在我准备这个时，我意识到问题似乎出在我想用于我的精灵的 png 上。 起初我以为可能是文件大小，但实际上似乎是 png 的尺寸问题。
它可能与 png 中包含的信息量有关，因为更复杂的 png 似乎在相对较小的维度上展示了这个问题。 我认为这不一定与文件大小有关，因为我通过 tinypng.com 对 png 优化进行了一些处理，并且文件大小较小的较大尺寸图像会出现问题，而文件较大的较小尺寸图像会出现问题大小不会。
看看我的例子：http: //4gstudios.com/html2canvas/
蓝色框呈现良好（bg 图像为 100x7800 像素/374kb）
红色框无法正确呈现（背景图像为 100x25000 像素/254kb）
-in OS X Chrome（黑匣子）
-OS X Safari（“否”框）
- 并且可能赢得 Chrome（昨天发生但不在 PC 自动取款机附近）
-OS X Firefox 似乎工作正常。
希望我已经很好地说明了我认为的问题，我们可以解决它。 我想在我的项目中使用的精灵有 800 多个不同的 css 规则，我真的不想改变它！
编辑：我的示例使用 0.4.1，但是当我尝试 0.5.0rc1 时遇到了同样的问题
r14n
于 2014-09-06
我没有可供测试的 OS X，但它似乎在 Windows (Vista) 上的 Chrome 37 和 Linux (Debian wheezy) 上的 Chrome 38 beta 上运行良好。 您使用的是哪个版本的 Chrome？ 您是否尝试在隐身模式/关闭所有扩展程序的情况下进行测试？
usmonster
于 2014-09-08
@usmonster刚刚在 Chrome 36 (Win7) 上试过，然后更新到 Chrome 37 (Win7)，仍然有问题
r14n
于 2014-09-08
@4gstudios如果您打开日志记录，您会在浏览器控制台中看到什么？
另外，请更新您站点上的示例，以仅使用 master 分支中的当前内容，即使它有相同的问题。 它将极大地帮助调试。
第三，请验证即使禁用了所有 Chrome 扩展程序，是否也会出现此问题。 （如果是这样，我想知道这是否是时间问题，因为图像的下载和/或渲染可能太慢了？）
usmonster
于 2014-09-08
@usmonster
1) 正在登录....
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 html2canvas.js:21
2) 更新到主分支 html2canvas.js
3）是的，我试过所有残疾人。 如果是时间，我认为不是下载时间，但渲染很可能是。
r14n
于 2014-09-08
@4gstudios你有另一台机器要测试吗？ 此外，实时链接看起来仍然使用 0.4.1。
usmonster
于 2014-09-08
@usmonster哦，好吧，我的错，我解决了这个问题。 刚刚在 WinServer2012 机器上测试了它，Chrome 37，同样的问题与黑盒渲染代替 bg
r14n
于 2014-09-08
嗯，我仍然无法在我的任何一台可用机器上重现该问题，但一位同事可以在他的 Windows 7 机器上重现。 @niklasvh ， @brcontainer 有什么想法吗？ 我认为这与特定于平台的 GPU 加速合成/光栅化有关.. 如果我可以访问我的 W7 机器，我将在本周晚些时候尝试对此进行测试，但我很好奇...... @4gstudios ，如果将第二张图像减半并再次测试会发生什么？ 并继续将其减半（并调整 CSS 规则）直到错误消失？ 我想看看是否有 PNG 的“有趣”区域触发了这个问题。
usmonster
于 2014-09-08
@usmonster发生在我的带有 Chrome 的 Windows 7 x64 上。 我会尝试做一个调试。
有一些问题在windows7x64下出现但32版没有出现，我认为是Chrome的一个bug。
brcontainer
于 2014-09-08
我相当确定这与原始图像的大小有关。 渲染大图像或大画布有很多不同的结果，据我所知，没有任何智能方法可以检测对其中任何一个的支持。
虽然与源图像的大小没有直接关系，但不同的结果会让您了解大图像和画布的问题：
- http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element
- http://social.msdn.microsoft.com/Forums/windowsapps/en-US/53c368e5-042b-4c3f-8903-ee024f4f7933/canvas-max-size?forum=winappswithhtml5
- https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482 -SW15
可能应该为不同浏览器/操作系统/内存限制的最大图像大小和画布大小设置一些测试，以便更深入地了解限制在哪里以及是否可以以某种方式规避它们，例如将渲染拆分为更小的块.
@4gstudios @brcontainer您的设备有多少内存可以复制该问题？
niklasvh
于 2014-09-08
@niklasvh
- Windows 7 家庭高级版 x64
- 英特尔酷睿 i5 CPU M450 2.40Ghz
- 4 GB 内存
我将在 windows 32bit 上测试（所以可能），但我相信问题只发生在 windows64bit
brcontainer
于 2014-09-08
正如我所怀疑的，该问题仅出现在“Windows x64”以及https://github.com/niklasvh/html2canvas/issues/206#issuecomment -17744888 中，换句话说，在 Windows 32bit 中工作，在 Windows 64bit 中失败，一个可能的错误 Chrome。
brcontainer
于 2014-09-08
@brcontainer我在 OS X 10.7 上的 Chrome 和 Safari 中也出现了这个问题......
r14n
于 2014-09-08
我还在我的 32 位 Windows 7 机器上进行了测试，一切正常（没有错误）。 这绝对看起来像一个 64 位系统唯一的问题——很好，@brcontainer！ 另一件需要注意的是，最近发布了一个专门针对 64 位系统的新版 Chrome：
http://blog.chromium.org/2014/08/64-bits-of-awesome-64-bit-windows_26.html
https://www.google.com/chrome/browser/?platform=win64（Windows下载链接）
http://blog.chromium.org/2014/08/mac-chrome-when-im-sixty-four-bits.html（Mac仍处于测试阶段）
对于那些遇到过这个问题的人，你确定你不是还在运行 32 位版本吗？ 我认为您需要手动下载 64 位版本才能获得它。 它有可能解决这些问题。
usmonster
于 2014-09-09
@usmonster好吧，我的 Windows7 是 64 位。 该错误会影响 Win7 64 位上的 32 位和 64 位 Chrome。 我想它也会影响一些 OSX 机器。 感谢您提供获取 64 位版本 Chrome 的链接，尽管它并没有解决我的问题 :cry:
r14n
于 2014-09-09
这听起来像是 Chrome 中的错误，而不是与“Windows 64bit”（或 Mac OSX）不兼容
brcontainer
于 2014-09-09
@brcontainer我同意，它看起来像在64位Windows和Mac Chrome浏览器和WebKit浏览器的问题（但不是Linux ..至少不会在我的64位Debian的盒中/ 8 GB RAM），虽然@ 4gstudios，分别为你能在 32 位 Windows 上看到这个错误吗？ 受此问题影响的计算机上有多少 RAM？
能够将这个问题归结为根源就好了。 第二个 PNG 具有渐变和比第一个 PNG 大得多的尺寸。 如果我有一台受影响的机器要测试，我会剪掉“坏”的 PNG，直到我能判断是否有特定的问题区域或大小导致了它。 （可能也对@niklasvh感兴趣：http:
usmonster
于 2014-09-10
@usmonster @niklasvh
在 AppleWebkit（版本 538.1）和“Safari 5.1.7”（版本 534.57.2 - 此浏览器未获得更多更新）中，Windows .then不执行（不触发/触发）。
所以我无法测试是“Webkit”失败还是“Blink”失败（Chrome 中 Webkit 的引擎分支），甚至是“RAM”不足导致的失败。
brcontainer
于 2014-09-10
@brcontainer我认为可以安全地假设，因为根据@4gstudios 的说法，该错误在 OS X 上的 Safari 和 Chrome 中都可以重现，所以它至少是 Blink 和 WebKit 引擎
usmonster
于 2014-09-10
@usmonster我无法测试 Windows，因为.then(...)不在 AppleWebkit（版本 538.1）中运行
brcontainer
于 2014-09-10
@usmonster我在创建我的例子时做了一些
@usmonster ， @brcontainer ， @niklasvh ，感谢您对这个问题的所有帮助
r14n
于 2014-09-11
@niklasvh onrendered 已弃用。 那我可以用什么代替呢？ 我正在使用 0.5.0-alpha1。
此外，尽管图像在同一域中，但背景图像并未下载。
html2canvas($("#foredownload table"), {
记录：真实，
渲染：函数（c）{
var myImage = c.toDataURL("图片/jpeg");
$('#downloadableImage').prop('href', myImage);
}
});
任何帮助将不胜感激。 谢谢
codegiant2
于 2015-08-20
@codegiant2 https://github.com/niklasvh/html2canvas#usage 。
usmonster
于 2015-08-20
感谢 fperich 它对我有用！！
ankitgandhi452
于 2016-02-23
@fperich
你帮了我很多！非常感谢！
AndyBoat
于 2016-09-02
我是一个裁剪过的身体背景图片的脸
（小bounds.height来自NodeContainer.prototype.parseBackgroundSize - html2canvas 0.5.0-beta3 ）我的
body {
background-image: url(./res/bg.jpeg);
background-repeat:no-repeat;
background-position:center center;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
解决添加
html, body {
margin: 0;
padding: 0;
height: 100%;
}
感谢 niklasvh 和所有贡献者为这段漂亮的代码！
d-j-a-y
于 2016-10-22
我也有同样的问题，我正在从 s3 图像加载未显示在画布中，但我正在本地加载我的系统工作正常我该如何解决
balajibecs20
于 2017-06-24
gopiss
于 2017-08-18
嗨@gopiss ，
使用 corse 选项。
html2canvas(document.body, {
onrendered: function (canvas) {
.....
},
useCORS: true
});
fxmontigny
于 2017-08-22
@fxmontigny。
仍然存在边框图像加载问题。 查看我更新的JSFiddle 。
边框图像未加载仅显示黑色边框。
gopiss
于 2017-08-23
我面临同样的问题。 下面是来自 chrome 控制台的日志
html2canvas：预加载开始：查找背景图像
html2canvas.js:21 html2canvas: 开始: 图像: 1 / 1 (失败: 0)
html2canvas.js:21 html2canvas: 开始: 图像: 2 / 2 (失败: 0)
html2canvas.js:21 html2canvas：预加载：查找图像
html2canvas.js:21 html2canvas：预加载：完成。
html2canvas.js:21 html2canvas: 开始: 图像: 2 / 2 (失败: 0)
html2canvas.js:21 完成加载图像：#2（失败：0）
html2canvas.js:21 html2canvas：加载背景时出错：
html2canvas.js:21 html2canvas: 渲染器：画布渲染器完成 - 返回画布 obj
hikmat30ce
于 2017-09-05
此问题已自动关闭，因为我们要求原作者提供更多信息的请求没有得到回应。 只有当前问题中的信息，我们没有足够的信息来采取行动。 如果您有或找到我们需要的答案，请联系我们，以便我们进一步调查。
![no-response[bot] picture](https://avatars2.githubusercontent.com/u/26350515?v=4&s=40)
no-response[bot]
于 2017-12-12
只是评论，因为这可能会帮助某人。
我的问题是本地一切正常，但在生产中它无法呈现 css 背景图像。
原因是我们使用的是 CloudFront——这意味着 css 文件中的 url 指的是 cloudfront 域上的资产，而 JS 是在单独的域上执行的。
但是 html2canvas 日志并没有表明这是一个 cors 问题。
'useCORS' 似乎不能单独工作，因为我认为它需要一个代理 url 或其他东西。
jacobclarke92
于 2018-06-15
@jacobclarke对我来说也是同样的问题，当使用 html2canvas 捕获本地 S3 图像中画布上的背景图像正在捕获但在生产中它没有捕获背景图像。 我的 html2canvas 版本是 v1.0.0
RamyaGonchigar
于 2018-08-23
相关问题
dking3876
·
4评论
tibewww
·
4评论
rrutkows
·
4评论
arzyu
·
3评论
anthonymejia
·
4评论
最有用的评论
我无法渲染背景图像，它似乎被覆盖或包含背景大小，因此我将 0.4.1 版本中的第 350 行更改为：
topPos = isNaN(parseInt(bgposition[1], 10)) ? topPos : parseInt(bgposition[1], 10);
它有效！