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でも役立つ可能性があります。

たとえば、任意の色（hex、rgb、rgba、hls、hlsa、「red」、「green」などの事前定義された名前）を、r、g、b、および値が定義された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コピー）に一時的に入れた手動テストを見ることができます。 セレンテストを実行できるようになると、精度の向上と他のブラウザ/バージョンでのリグレッションがないことを確認できると思いますが、これで問題がないことを確認してください。 レンダリング精度の向上は、テストされたものよりも新しいバージョンのFFを比較した場合にのみ見られるのではないかと思います。（テストされたFirefoxの唯一のバージョンは15ですか??）

うーん、その考えを持って、私は何か奇妙なことをしたかもしれません、私の家のマシンの正方形は今ほとんど黒です。

ああ、いや、498527918c3324dce77260057bc47c280cc3324fが問題のコミットのように見えます、私のものは大丈夫に見えます。 ：sweat_smile：

パーセンテージが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いいえ、申し訳ありませんが、それを逃しました。 その修正を行っているときに私が考えていた潜在的な問題の1つは、ブラウザが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：colorStopMatchisnull」を受け取りました。 Chromeでは動作します。

こんにちは@ Observer999！ この問題は解決されました。 同様の未解決の問題を検索するか、発生している問題を再現するページへのリンクを使用して新しい問題を作成してください。 （テストしたFirefoxのバージョンも指定してください。）コード内のTODOと関係があるのではないかと思います。ありがとうございます。

@usmonster @niklasvhこんにちは、この問題が解決したことは知っていますが、最新バージョンのhtml2canvasを使用しており、Chromeの最新バージョンでも同じエラーが発生しますが、Firefoxでは機能しています。

html2canvas.js： formatted：1377 Uncaught（in promise）TypeError：nullのプロパティ「1」を読み取れません
LinearGradientContainerで。（html2canvas.js：formatted：1377）
Array.mapで（）。
新しいLinearGradientContainer（html2canvas.js：formatted：1374）
ImageLoader.loadImage（html2canvas.js：formatted：1256）で
ImageLoaderで。（html2canvas.js：formatted：1227）
Array.forEachで（）。
ImageLoaderで。（html2canvas.js：formatted：1225）
Array.forEachで（）。
ImageLoader.findBackgroundImage（html2canvas.js：formatted：1219）で
html2canvas.jsで： formatted：2563