Пользователь захватить Div как изображение и сохранить на компьютер

Question

У меня есть Div на моем сайте, я хочу разместить кнопку / ссылку (или другие подобные вещи), которые при нажатии сохранят div и все его содержимое на компьютер пользователя, так же, как и код печати, которыйиспользуется для печати div.Я начинающий программист, поэтому вся помощь будет оценена.

Answer 1

Для этого существует ограничение поддержки браузера. HTML2Canvas может отобразить ваш HTML-контент в элемент canvas. Затем вы можете использовать метод canvas.toDataURL("image/png"); ( документы в MDN ) для экспорта элемента canvas в изображение jpeg или png.

Это не поддерживается широко, но все еще возможно.

Answer 2

Простой способ

 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;

                    }
                });

используйте кнопку и вызовите значение скрытого поля ur

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

    }
}

Answer 3

Простой способ сделать это - использовать JavaScript API GrabzIt для захвата div .Вам просто нужно сделать что-то вроде следующего.Где #features - это идентификатор div, который вы хотите захватить.

<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!

Answer 4

Предполагая, что вам нужен текстовый или HTML-файл, а не файл изображения, такой как снимок экрана, JavaScript сам по себе не может вызвать диалоговое окно «Сохранить» в веб-браузере, а только ответ на веб-запрос к серверу.Итак.

Для начала вам понадобится форма с вашей кнопкой и скрытым полем:

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

И вам нужен Javascript для сохранения содержимого DIV в скрытое поле перед тем, какsubmittal:

<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: приведенный выше код на стороне сервера потенциально небезопасен, поскольку допускает любую веб-страницу.контролировать контент, идущий в веб-браузер пользователя с вашего домена.Вам нужно будет добавить некоторые меры, чтобы защитить это от злоупотреблений.