użytkownik przechwytuje div jako obraz i zapisuje na komputerze

Question

Mam div na mojej stronie, chcę umieścić przycisk/link (lub inne rzeczy tego rodzaju), który po kliknięciu zapisze div i całą jego zawartość dla użytkowników komputer, podobnie jak kod drukowania, który jest używany do drukowania elementów div. Jestem początkującym programistą, więc wszelka pomoc zostanie doceniona.

Answer 1

Istnieje limit obsługiwanych przeglądarek. HTML2Canvas może renderować treść HTML do elementu canvas. Następnie można użyć metody canvas.toDataURL("image/png"); (docs in MDN) do wyeksportowania elementu canvas do obrazu jpeg lub png.

Nie jest szeroko obsługiwany, ale nadal jest możliwy.

Answer 2

Zakładając, że chcesz, aby plik tekstowy lub HTML, a nie plik obrazu, taki jak zrzut ekranu, JavaScript sam w sobie nie może zainicjować okna dialogowego "Zapisz" w przeglądarce, tylko odpowiedź z żądania internetowego na serwer będzie Zrób tak.

Aby zacząć, trzeba się formularz z przyciskiem i ukrytym polu:

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

I trzeba niektóre JavaScript, aby zapisać zawartość DIV do pola ukrytego przed Dostarczanie:

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

na serwerze, trzeba jakiś kod, aby zaakceptować tekst i pluć go w postaci pliku załącznika:

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

Zastrzeżenie # 1: Prawdopodobnie są tam drobne błędy i dużo miejsca na ulepszenia, to tylko dowód koncepcji.

Zastrzeżenie # 2: Powyższy kod po stronie serwera jest potencjalnie niebezpieczny, ponieważ pozwala dowolnej stronie kontrolować zawartość przechodzącą do przeglądarki użytkownika z Twojej domeny. Będziesz musiał dodać pewne środki, aby uchronić to przed nadużywaniem.

Answer 3

Łatwy sposób

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; 

        } 
       }); 

użyć przycisku i nazywają ur ukryte wartość pola

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 4

Łatwy sposób to zrobić byłoby użyć GrabzIt w JavaScript API do capture a div. Po prostu musisz zrobić coś takiego. Gdzie #features jest identyfikatorem elementu div, który chcesz przechwycić.

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

Zrzeczenie się Zbudowałem ten interfejs API!