HTMLを使用してスクリーンショットを撮り、ローカル画像として保存するための実装コード

具体的なコードは次のとおりです。

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="UTF-8">
        <title>html2canvas_download</title>
        <スタイル>
            {
                カーソル: ポインタ;
                色: rgb(85, 26, 139);
                テキスト装飾: 下線;
            }
        </スタイル>
    </head>
    <本文>
        <div id="oDiv" style="幅: 300px; 高さ: 300px; 余白: 10px; 背景: 赤; 境界線: 5px 灰色;">
            <h1>こんにちは世界！</h1>
        </div>
        <!-- <script type="text/javascript" src="../dist/html2canvas.js"></script> -->
        <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
        <script type="text/javascript">
            var oDiv = document.getElementById('oDiv');
            //body スクリーンショット//html2canvas(document.body).then(function(canvas) {
            // document.body.appendChild(キャンバス);
            // });
            html2canvas(oDiv).then(function(canvas) {
                document.body.appendChild(キャンバス);
                var oCavans = document.getElementsByTagName('canvas')[0];
                var strDataURI = oCavans.toDataURL();
                ダウンロードFn(strDataURI);
            });
            //ブラウザの種類を判定する function myBrowser() {
                var userAgent = navigator.userAgent; //ブラウザの userAgent 文字列を取得します。 var isOpera = userAgent.indexOf("Opera") > -1;
                if(isOpera) {
                    「オペラ」を返す
                }; //Operaブラウザかどうかを判断します if(userAgent.indexOf("Firefox") > -1) {
                    「FF」を返します。
                } //Firefoxブラウザかどうかを判断します if(userAgent.indexOf("Chrome") > -1) {
                    「Chrome」を返します。
                }
                (userAgent.indexOf("Safari") > -1) の場合 {
                    「Safari」を返します。
                } // Safari ブラウザかどうかを判定します if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
                    「IE」を返します。
                }; //IEブラウザかどうかを判断します if(userAgent.indexOf("Trident") > -1) {
                    「Edge」を返します。
                } //Edge ブラウザかどうかを判定します}
            //IEブラウザは画像をローカルに保存します function SaveAs5(imgURL) {
                var oPop = window.open(imgURL, "", "幅=1、高さ=1、上=5000、左=5000");
                for(; oPop.document.readyState != "complete";) {
                    if(oPop.document.readyState == "complete") break;
                }
                oPop.document.execCommand("名前を付けて保存");
                oPop.close();
            }
            // chrome14+、firefox20+、pera15+、Edge 13+、Safari は関数 download(strDataURI) を実装していません {
                var link = document.createElement('a');
                link.innerHTML = 'download_canvas_image';
                link.download = 'mypainting.png';
                link.addEventListener('click', 関数(ev) {
                    リンクの href = strDataURI;
                }、 間違い）;
                document.body.appendChild(リンク);
            };
            関数downLoadFn(url) {
                if(myBrowser() === "IE" || myBrowser() === "Edge") {
                    SaveAs5(url);
                } それ以外 {
                    ダウンロード(url);
                }
            }
        </スクリプト>
    </本文>
</html>

要約する

上記は、HTML スクリーンショットを使用してローカル画像として保存するために紹介した実装コードです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: uniapp vue および nvue カルーセルコンポーネントのサンプルコード

>>: CSSマウスを画像の上に置いたときにマスクレイヤー効果を追加する実装