Html2canvas: ビューポートを超えて拡張する要素を保存する

作成日 2017年11月03日 · 4コメント · ソース: niklasvh/html2canvas

これを使用して、ビューポートを超えて拡張されているページを保存しようとしていますが、途切れ続けています。保存する方法はありますか。以下はimが使用しているコードです。ビューポートに収まるように要素を小さくすると、問題なく機能しますが、取得する画像は必要なものに対して非常に小さく、サイズを大きくするとぼやけるだけです。私が必要とするサイズのこれらの画像のいくつかは1300px以上の高さです

`html2canvas（preview、{
背景： '＃ffffff'、
onrendered：（canvas）=> {

            canvas.toBlob((blob)=>{
                FileSaver.saveAs(blob, 'mysave.png');
            })

        }
    })`

ソース

dking3876

最も参考になるコメント

要素の内容を複製して、キャプチャが行われている間に本体に追加してから、削除してみてください。何かのようなもの

var clone = document.getElementById('my_element').cloneNode(true);
//... style the clone so it doesn't have scroll...

return html2canvas(clone, {
        useCORS: true,
        allowTaint: false,
        logging: false
    }).then(function (canvas) {
        document.body.removeChild(clone);
        return canvas;
    });

ffflabs 2017年11月08日

👍3

全てのコメント4件

内側にスクロールするコンテナ、div、モーダルなどに要素が含まれている場合はどうなりますか？

ffflabs 2017年11月04日

キャプチャしたい直接コンテナにはスクロールがありませんが、親コンテナにはスクロールがあります。直接コンテナにスクロールを配置してみて、それが機能するかどうかを確認します

dking3876 2017年11月06日

ダメ。キャプチャするコンテナが完全なdomを表示するようにスクロールするように調整しましたが、画面の表示セクションで切断されます。

他の考えは??

dking3876 2017年11月07日

要素の内容を複製して、キャプチャが行われている間に本体に追加してから、削除してみてください。何かのようなもの

var clone = document.getElementById('my_element').cloneNode(true);
//... style the clone so it doesn't have scroll...

return html2canvas(clone, {
        useCORS: true,
        allowTaint: false,
        logging: false
    }).then(function (canvas) {
        document.body.removeChild(clone);
        return canvas;
    });

ffflabs 2017年11月08日

👍3

このページは役に立ちましたか？

0 / 5 - 0 評価

Html2canvas: ビューポートを超えて拡張する要素を保存する

最も参考になるコメント

全てのコメント4件

関連する問題