Html2canvas: 背景画像の問題

0.4.1（開発ブランチ内）で修正されているようです。 おそらく＃256に関連している

0.4.1で試して、問題がまだ存在するかどうかを確認できますか？

こんにちは。 私はまったく同じ問題を抱えています。 はい、問題はまだ0.4.1に存在します。 すべての助けをありがとう。

私は同じ問題を抱えています...まだ解決策はありますか？ この素晴らしいスクリプトを提供してくれた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-インデックス：9999 "

background-size：cover;を削除すると気づきました。 私のclass = "mc-image"からは機能します。

@ ymorin007 MacとChrome / Opera / Safariを使用しているか、最新のコミットを使用していますか（つまり、スクリプトを自分で作成していますか）？

Windows7Chromeバージョン30.0.1599.101m

一時的な修正：

行2818をに変更します

ctx.fillStyle = (options.background !== undefined) ? options.background : parsedData.backgroundColor;

これは、背景サイズの2つのオプションであるcontainまたはcoverに確実に関連しています。

最新のコミット（html2canvas 0.4.1）で修正されました

鉱山は、最新のコミット後もまだこれを行っています...

私のbackground-sizeは 'cover'に設定されており、 'auto 100％'も試しましたが、それでも白/透明です。

背景サイズを削除すると、問題なくキャプチャされます...他にヒントはありますか？

一時的な修正、使用：

b ackground：url （ "... base64 ..."）

使用しないでください

また、html2canvasはそれを理解していないようであるため、「スプライト」は使用しないでください。

URLに上位ディレクトリの背景への相対パスが含まれている場合、背景画像に問題があります：url（ "../ i / alerts-16x.png"）

次の方法でpngを再配置すると機能します：url（ "i / alerts-16x.png"）

背景画像をレンダリングできず、カバーまたは背景サイズが含まれているようだったので、0.4.1バージョンの350行目を次のように変更しました。

topPos = isNaN（parseInt（bgposition [1]、10））？ topPos：parseInt（bgposition [1]、10）;

そしてそれは動作します！

バージョン0.4.1のIm

背景にも問題があります。

fperichが提案したようにライブ350を変更しましたが、役に立ちませんでした。

また、hernanが推奨するbase64の背景画像も試してみました。

私が変換しようとしているURLはこれです
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>

基本的に、ページを読み込んで画像に変換します。

私のコードに何か問題がありますか？

ありがとう

fperichuロックマン!! ありがとう

第二に、fperich、あなたは今私の好きな人です！

ありがとうfperich：Dそれはうまくいきました

@shauchenka @niklasvhこの問題は解決されたと思いますか？ この問題を解決できますか/解決する必要がありますか？

0.4.1（リリースと開発者の最新の両方）を使用すると、少なくともChrome for Windowsでは、子要素の背景画像（子はスプライト）がキャンバスに表示されません。 ただし、Firefox forWindowsは正常に動作しています。 Chrome for Macでは、背景画像のスパンが黒い四角になります。 fperich fixを試しましたが、うまくいきませんでした。 背景画像は同じオリジンにあり、すべてのファイルはサーバー上の同じディレクトリにあります。

@ 4gstudios問題を実証するために、簡略化された例をjsfiddle（または一般にアクセス可能なリンク）に配置できますか？

@usmonster確かに。 画像を外部にしたくなかったのでjsfiddleを使用しなかったので、クロスオリジンの問題を除外できます。

今何を推測します。 これを準備しているときに、問題はスプライトに使用したいpngにあるようだと気づきました。 最初はファイルサイズかもしれないと思っていましたが、実際にはpngのサイズに問題があるようです。

より複雑なpngは比較的小さなサイズで問題を示しているように見えるため、pngに含まれる情報の量と関係がある可能性があります。 tinypng.comを介したpngの最適化を少しいじったので、必ずしもファイルサイズとは関係がないと思います。ファイルサイズが小さい大きな画像では問題が発生しますが、ファイルが大きい小さい画像では問題が発生します。サイズはありません。

私の例をチェックしてください： http ：

青いボックスはうまくレンダリングされます（bg画像は100x7800ピクセル/ 374kbです）
赤いボックスは正しくレンダリングされません（bg画像は100x25000ピクセル/ 254kbです）
-OS X Chrome（ブラックボックス）の場合
-OS X Safari（「いいえ」ボックス）
-そしておそらくWinChrome（昨日起こっていたがPCのATMの近くではなかった）
-OS XFirefoxは正常に動作しているようです。

うまくいけば、私が問題であると信じていることをうまく説明し、それを解決することができます。 私のプロジェクトで使用したいスプライトには800以上の異なるcssルールがあり、本当に変更する必要はありません！

編集：私の例では0.4.1を使用していますが、0.5.0rc1を試したときに同じ問題が発生しています

テストできるOSXはありませんが、Windows上のChrome 37（Vista）およびLinux上のChrome 38ベータ版（Debian wheezy）では正常に動作するようです。 どのバージョンのChromeを使用していますか？ シークレットモードで/すべての拡張機能をオフにしてテストを試しましたか？

@usmonster Chrome 36（Win7）で試した後、Chrome 37（Win7）に更新しましたが、まだ問題があります

@ 4gstudiosロギングをオンにすると、ブラウザコンソールに何が表示されますか？

また、同じ問題が発生している場合でも、現在マスターブランチにあるもののみを使用するようにサイトの例を更新してください。 デバッグに大いに役立ちます。

第三に、すべてのChrome拡張機能が無効になっている場合でも、この問題が発生するかどうかも確認してください。 （もしそうなら、画像のダウンロードやレンダリングが遅すぎるので、タイミングの問題ではないかと思いますか？）

@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：レンダラー：Canvasレンダラーが完了しました-キャンバスobjを返しますhtml2canvas.js：21

2）マスターブランチhtml2canvas.jsに更新

3）はい、すべて無効にしてみました。 タイミングならダウンロード時間ではないと思いますが、レンダリングは可能性が高いです。

@ 4gstudiosテストする別のマシンはありますか？ また、ライブリンクはまだ0.4.1を使用しているように見えます。

@usmonsterああ、私の悪い、私はそれを修正しました。 WinServer2012マシン、Chrome 37でもテストしたところ、bgの代わりにブラックボックスレンダリングで同じ問題が発生しました

うーん、利用可能などちらのマシンでも問題を再現することはできませんが、同僚はWindows7マシンで再現できます。 @ niklasvh 、 @ brcontainer何かアイデアはありますか？ プラットフォーム固有のGPUアクセラレーションによる合成/ラスタライズと関係があると思います。W7マシンにアクセスできるかどうか、今週後半にテストを試みますが、興味があります...

@usmonsterChromeを搭載したWindows7x64で発生しました。 私はデバッグをしようとします。
windows7x64で発生する問題がいくつかありますが、バージョン32では発生しません。これはChromeのバグだと思います。

これは元の画像のサイズに関係していると確信しています。 大きな画像や大きなキャンバスをレンダリングすると、さまざまな結果が得られます。私が知る限り、それらのサポートを検出するための賢い方法は実際にはありません。

ソース画像のサイズとは直接関係ありませんが、さまざまな結果から、大きな画像やキャンバスの問題についてのアイデアが得られます。

• 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

おそらく、さまざまなブラウザ/ OS /メモリ制限の最大画像サイズとキャンバスサイズの両方についていくつかのテストを設定して、制限がどこにあるのか、たとえばレンダリングを小さなチャンクに分割するなどして制限を回避できるかどうかを実際に理解する必要があります。

@ 4gstudios @brcontainer問題を再現できたデバイスには、どのくらいのメモリがありますか？

@niklasvh

• Windows 7 Home Premium x64
• Intel Core i5 CPU M450 2.40Ghz
• 4 GB RAM

私はWindows32ビットでテストします（可能な限り）が、問題はWindows64ビットでのみ発生すると思います

私が推測したように、問題は「Windows x64」とhttps://github.com/niklasvh/html2canvas/issues/206#issuecomment -17744888でのみ発生し

@brcontainerこの問題は、OS

32ビットのWindows7マシンでもテストしましたが、すべて正常に動作します（バグはありません）。 これは間違いなく64ビットシステムのみの問題のように見えます-いいキャッチ、@ brcontainer！ もう1つの注意点は、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まあ私のWindows7は64ビットです。 このバグは、Win764ビット上の32ビットと64ビットの両方のChromeに影響します。 一部のOSXマシンにも影響すると思います。 Chromeの64ビットバージョンを入手するためのリンクをありがとう、それは私の問題を解決しませんが：cry：

これはChromeのバグのように聞こえますが、「Windows64ビット」（またはMac OSX）との非互換性ではありません。

@brcontainer 4gstudios @であったにもかかわらず、私は、（/ 8 GBのRAMワット私の64ビットのDebianボックスに..しかし、Linuxではなく、少なくともではない）、それは、64ビットのWindows＆Macのクローム＆WebKitのブラウザでは問題のように見えることに同意します32ビットWindowsでバグを確認できますか？ また、この問題の影響を受けたマシンにはどのくらいのRAMがありましたか？

この問題を根本的に減らすことができれば素晴らしいと思います。 2番目のPNGには、最初のPNGよりもグラデーションがあり、サイズがはるかに大きくなっています。 影響を受けたマシンをテストする場合は、特定の問題のある領域またはサイズが原因であるかどうかがわかるまで、「不良」PNGを切り取ります。 （おそらく@niklasvhにも関心があり//wkbug.com/52391 ）

@usmonster @niklasvh

AppleWebkit（バージョン538.1）および "Safari 5.1.7"（バージョン534.57.2-このブラウザーはそれ以上の更新を取得しません）では、Windows .thenは実行されません（起動/トリガーではありません）。

そのため、「Webkit」の障害なのか、「Blink」（ChromeのWebkitのエンジンフォーク）の障害なのか、さらには「RAM」の不足による障害なのかをテストできませんでした。

@brcontainer @ 4gstudiosによると、このバグはOS XのSafariとChromeの両方で再現可能であったため、少なくともBlinkエンジンとWebKitエンジンの両方に共通のバグであると考えるのが安全だと思います。

@usmonster .then(...)がAppleWebkit（バージョン538.1）で実行されないためにウィンドウをテストできませんでした

@usmonster例を作成しているときに、

@ usmonster 、 @ brcontainer 、 @ niklasvh 、この問題についてご協力いただきありがとうございます

@niklasvhonrenderedは非推奨です。 では、代わりに何を使用できますか？ 0.5.0-alpha1を使用しています。

また、画像は同じドメインにありますが、背景画像はダウンロードされていません。

html2canvas（$（ "＃foredownload table"）、{
ロギング：true、
onrendered：function（c）{
var myImage = c.toDataURL（ "images / jpeg"）;
$（ '＃downloadableImage'）。prop（ 'href'、myImage）;
}
}）;
どんな助けでもありがたいです。 ありがとう

@ codegiant2https ：//github.com/niklasvh/html2canvas#usage 。

Thanxfperichそれは私のために働いた!!

@fperich
あなたは私を大いに助けてくれます！どうもありがとう！

私はトリミングされた体の背景画像の顔でした
（ bounds.heightからの小さなNodeContainer.prototype.parseBackgroundSize -html2canvas 0.5.0-beta3）my

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とすべての貢献者に、この素​​晴らしいコードをありがとう！

私も同じ問題を抱えています、キャンバスに表示されていないs3画像からロードしていますが、システムにローカルでロードしていますが、どのように解決できますか？

私も同じ問題を抱えています。

背景画像の読み込みに失敗しました。 エラーメッセージが表示されますバックグラウンドの読み込み中にエラーが発生しました

jsFiddleはこちら

この問題を解決するのを手伝ってください。
ありがとう、

こんにちは@gopiss 、

corseオプションを使用します。

html2canvas(document.body, {
            onrendered: function (canvas) {
.....
            },
            useCORS: true
        });

@fxmontigny。
それでも、境界線画像の読み込みの問題は存在します。 更新されたJSFiddleを参照してください。
境界線の画像が読み込まれず、黒色の境界線のみが表示されます。

私は同じ問題に直面しています。 以下は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：レンダラー：Canvasレンダラーが完了しました-canvasobjを返します

これはまだv1.0.0の問題ですか？ もしそうなら、 jsfiddleで例を共有して

この問題は、元の作成者からの詳細情報の要求に対する応答がなかったため、自動的にクローズされました。 現在問題になっている情報だけでは、行動を起こすのに十分な情報がありません。 さらに調査できるように、必要な回答がある場合はご連絡ください。

これは誰かを助けるかもしれないのでコメントするだけです。
私の問題は、ローカルではすべてが機能していたが、本番環境ではcss背景画像のレンダリングに失敗していたことでした。
理由は、CloudFrontを使用していたことです。つまり、JSが別のドメインで実行されているときに、cssファイルのURLがクラウドフロントドメインのアセットを参照していました。
ただし、html2canvasログは、それがcorsの問題であることを示していませんでした。
「useCORS」はプロキシURLか何かが必要だと思うので、それ自体では機能しないようです。

@jacobclarkeは、html2canvasを使用してローカルS3画像のキャンバス上の背景画像をキャプチャするときにも同じ問題をキャプチャしていますが、本番環境では背景画像をキャプチャしていません。 私のhtml2canvasバージョンはv1.0.0です