Html2canvas: 由于错误的正则表达式，颜色停止匹配失败并出现 TypeError

带有修复和测试的拉取请求将非常好！

这个周末我试试看。 注意自我：
https://developer.mozilla.org/docs/Web/CSS/color_value
https://developer.mozilla.org/docs/Web/CSS/gradient
http://stackoverflow.com/a/12456392/357774

关于实现边框样式的插图，还需要对颜色进行通用解析，因为它需要按特定百分比使颜色变暗/变亮。 有了这个渐变修复，如果需要将颜色解析为通用格式，它也可能对 border-style: inset 有用。

例如，如果任何颜色（十六进制、rgb、rgba、hls、hlsa、预定义的名称，例如“红色”、“绿色”等）可以解析为定义了 r、g、b 和 a 值的 Color 对象，它将使实施边框插入也变得更加容易。

同意可以并且应该重用通用颜色解析/表示。 我会记住它，可能会有问题。

周末没有机会看这个，明天可能/希望有时间。

这事有进一步更新吗？

呃，抱歉，还没有。 ：/虽然我确实在本地设置了一些测试（还没有实现任何东西），但被淹没并且计算资源有限。

我已经添加了基本的颜色解析（到目前为止的命名、rgb、rgba、hex3 和 hex6）并更改了颜色的所有用途以使用这些。 梯度正则表达式尚未更新。

见https://github.com/niklasvh/html2canvas/commit/313c227a1fed416331978e365ef82000ea7f7aa5

好的！ 这个周末我会看看，看看如何更新这些正则表达式。

@niklasvh你能看看我刚刚在我的分支 (359ee8b) 上所做的提交，让我知道你的想法吗？ 我将删除我多余的评论，并会尽快添加颜色名称测试，但您能否也看看其他更改？

我更正了 Firefox 的方向解析，所以之前没有正确渲染的某些线性渐变现在应该可以工作了。 您可以看到我只是临时放入tests/lineargradients_manual.html的手动测试（基本上是tests/cases/background/linear-gradient.html的副本）。 我想一旦可以运行 selenium 测试，我就可以验证在其他浏览器/版本上的准确性提高和没有回归，但是您能检查一下是否可以吗？ 我怀疑渲染精度的提高可能只会在比较 FF 的最新版本而不是测试版本时才能看到。（看起来 Firefox 测试的唯一版本是 15？？）

嗯，保持这种想法，我可能做了一些奇怪的事情，我家用机器上的方块现在大多是黑色的..

啊，不，看起来像 498527918c3324dce77260057bc47c280cc3324f 是问题提交，我的东西看起来没问题。 ：汗_微笑：

如果百分比不是 100% 或 0%，会发生什么？

截至目前，它不支持任意百分比（将它们保留为默认的 50%），但我可以很容易地添加它。 （更新：添加了对任意百分比的支持：6af1874dc04c81d1aba5d6e8e6c8ef69681a2e49。）

我不太确定的是非百分比长度，可以是px 、 em 、 rem 、 ex 、 cm 、 mm 、 in 、 pc 、 pt等...我还没有在代码中寻找它，但是你呢？已经有办法处理/转换各种单位的长度？ （如果不是，它应该成为此功能的一部分，还是应该单独实现？）

绝对长度应该很容易实现，但我认为 px 应该足够开始。

@niklasvh我刚刚有更多时间来研究和研究这个。 在我提出拉取请求之前，你能看看我的fix-firefox-gradients分支和评论吗？

我应该注意到，虽然正则表达式可以解析像素长度（在渐变开始位置和颜色停止位置），但仍然不支持正确渲染它们。 我认为添加对绝对长度的支持的最简洁的方法是将边界信息与传递到渐变容器构造函数的imageData包含，然后将它们转换为百分比。 不过，这可能应该放在一个单独的拉取请求中。

谢谢！ 很快会仔细研究一下，并回复您我可能有的任何反馈

这方面有什么进展吗？ 还是需要的！

如果@niklasvh可以对我在我的分支上使用的方法竖起大拇指，我准备提出拉取请求..

：+1：我刚刚遇到了这个：

TypeError: Cannot read property '1' of null at GradientContainer.<anonymous> (http://localhost:8100/all.js:34496:44) 
at Array.map (native) 
at GradientContainer.LinearGradientContainer (http://localhost:8100/all.js:34493:66)
at ImageLoader.279.ImageLoader.loadImage (http://localhost:8100/all.js:34367:16) 
at ImageLoader.<anonymous> (http://localhost:8100/all.js:34339:46) 
at Array.forEach (native) 
at ImageLoader.279.ImageLoader.addImage (http://localhost:8100/all.js:34337:23) 
at Array.forEach (native) 
at ImageLoader.279.ImageLoader.findBackgroundImage (http://localhost:8100/all.js:34331:71) 
at 295.exports.bind (http://localhost:8100/all.js:36357:25)

嘿@niklasvh！ 感谢修复 #526。

你有没有机会看看我的fix-firefox-gradients分店？ 在我提出 PR 之前，我会重新设置我的分支（并修复任何新的冲突），但请让我知道 PR 是否仍然受欢迎。 （您认为您能够在合理的时间内审阅它吗？）谢谢！

@usmonster不，抱歉我错过了。 我在做这个修复时考虑的一个潜在问题是，如果浏览器决定不将诸如red或blue类的命名颜色转换为它们各自的rgb或rgba值，仅仅考虑transparent是行不通的。 Color模块考虑了所有不同的颜色变量，但我对master当前的解析方式不太满意。

任何想法如何处理命名颜色？

@niklasvh ， Color构造函数已经完成的查找和规范化应该足以处理所有命名的颜色，除非我误解了什么？

此外，我修复了用于解析颜色和线性渐变的正则表达式，使它们更加健壮、正确和高效，因此我认为命名颜色不应该是一个问题。 你怎么认为？

@usmonster你是对的，我指的是https://github.com/niklasvh/html2canvas/compare/master...usmonster :fix-firefox-gradients#diff-48b5afb6985c457b9f79fcca1cfb499dR21 我现在注意到它确实考虑了命名颜色，所以没问题。 否则看起来不错，您介意重新定位并提出拉取请求吗？

没问题！ 我会在接下来的几天里试着看看——我有点想念我的周末窗口。 ：/

@niklasvh请参阅#708。 :)

我在 FireFox 的 html2canvas.js:1454:13 收到“TypeError: colorStopMatch is null”。 在 Chrome 中它工作。

嗨@ Observer999！ 此问题已关闭。 请搜索类似的未解决问题或创建一个新问题，并提供一个指向重现您遇到的问题的页面的链接。 （还请在那里指定您测试过的 Firefox 版本。）我可以想象它可能与代码中的 TODO有关系..谢谢！

@usmonster @niklasvh大家好，我知道这个问题已经解决，但我使用的是最新版本的 html2canvas，我在 Chrome 最新版本中遇到了同样的错误，但在 Firefox 中它正在工作。

html2canvas.js: formatted:1377 Uncaught (in promise) TypeError: cannot read property '1' of null
在 LinearGradientContainer 处。（html2canvas.js：格式化：1377）
在 Array.map ()
在新的 LinearGradientContainer (html2canvas.js:formatted:1374)
在 ImageLoader.loadImage (html2canvas.js:formatted:1256)
在 ImageLoader。（html2canvas.js：格式化：1227）
在 Array.forEach ()
在 ImageLoader。（html2canvas.js：格式化：1225）
在 Array.forEach ()
在 ImageLoader.findBackgroundImage (html2canvas.js:formatted:1219)
在 html2canvas.js：格式化：2563