web-dev-qa-db-ja.com

ユーザーはdivを画像としてキャプチャし、コンピューターに保存します

私のサイトにDivがあります。クリックすると、印刷に使用される印刷コードと同じように、divとそのすべてのコンテンツがユーザーのコンピューターに保存されるボタン/リンク（またはその他の種類のもの）を配置したいと思います。 div私はコーディングの初心者なので、すべての助けに感謝します。

javascripthtmlscreenshotwebcam
9
Jack Notman

これを行うには、ブラウザのサポート制限があります。 HTML2Canvas HTMLコンテンツをcanvas要素にレンダリングできます。次に、canvas.toDataURL("image/png");（ MDNのドキュメント ）メソッドを使用して、canvas要素をjpegまたはpngイメージにエクスポートできます。 。

広くサポートされていませんが、それでも可能です。

11
Mohsen

簡単な方法

 var MyDiv1 = document.getElementById('DIV1');
 var MyDiv3 = document.getElementById('DIV2');
 MyDiv3.innerHTML = MyDiv1.innerHTML;


 html2canvas(MyDiv3, {
                    useCORS: true,
                    onrendered: function (canvas) {
                    var dataUrl = canvas.toDataURL("image/png");
                    document.getElementById("HiddenField1").value = dataUrl;

                    }
                });

ボタンを使用して、隠しフィールドの値を呼び出します

ButtonClick1()
{
    string imgval = HiddenField1.Value;
    imgval = imgval.Replace("data:image/png;base64,", "");
    byte[] imgData = Convert.FromBase64String(imgval);

    using (System.Drawing.Image image = System.Drawing.Image.FromStream(new MemoryStream(imgData)))
    {
        String path = Server.MapPath("~/imgFolder");
         image.Save(path + "\\output.jpg", ImageFormat.Jpeg);  // Or Png

    }
}
1
Anoop B.K

スクリーンショットのような画像ファイルではなく、テキストまたはHTMLファイルが必要な場合、JavaScript自体はWebブラウザで[保存]ダイアログを開始できません。Web要求からサーバーへの応答のみが開始します。

まず、ボタンと非表示フィールドを備えたフォームが必要です。

<div id="saveme">stuff to save</div>
<form action="saveme.aspx" method="POST">
  <input type="submit" onclick="prepsave()">
  <input type="hidden" id="savemepost">
</form>

また、送信前にDIVの内容を非表示フィールドに保存するためのJavascriptが必要です。

<script>
   function prepsave() {
      document.getElementById("savemepost").value = 
        document.getElementById("saveme").innerHTML;
        return true;
   }
</script>

サーバーでは、テキストを受け入れて添付ファイルの形式で吐き出すためのコードが必要になります。

<script runat="server">
   Response.Clear()
   Response.AddHeader("content-disposition","attachment; filename=saved.html")
   Response.Write(Request.Form("savemepost"))
</script>

警告＃1：そこにはおそらくいくつかの小さなバグがあり、改善の余地がたくさんあります。これは概念実証にすぎません。

警告＃2：上記のサーバー側コードは、ドメインからユーザーのWebブラウザーに送信されるコンテンツを任意のWebページで制御できるため、潜在的に安全ではありません。これを悪用から保護するために、いくつかの対策を追加する必要があります。

0
richardtallent

これを行う簡単な方法は、GrabzItのJavaScript APIを使用して divをキャプチャ することです。次のようなことをする必要があります。 #featuresは、キャプチャするdivのIDです。

<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "bheight": -1, "height": -1, "width": -1}).Create();
</script>

免責事項私はこのAPIを作成しました！

0
GrabzIt