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.użytkownik przechwytuje div jako obraz i zapisuje na komputerze
Odpowiedz
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.
już wypróbowałem, że moja zawartość nie działa w elementach canvas :( –
Nie musisz mieć "płótna" na stronie. – Mohsen
wyjaśnić więcej? Czy będzie działać z flash? –
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.
Mówi, że chce, żeby było coś w rodzaju zrzutu ekranu w swoim komentarzu do pytanie. –
Ł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
}
}
Ł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!
- 1. Spławik DIV na innym komputerze DIV
- 2. Uruchamianie exec jako inny użytkownik
- 3. Div, Obraz tła i mapa obrazu
- 4. cakephp zapisuje tablicę jako var_dump
- 5. Obraz nie wypełnia div
- 6. SVG jako obraz w tle w div nie działa
- 7. Jak umieścić obraz na dole elementu div?
- 8. Rozwiń obraz wewnątrz DIV
- 9. Odpowiedzialny SSH jako jeden użytkownik i Sudo jako inny
- 10. Jak zapisać obraz jako obraz?
- 11. Fiddler - Przechwytuje i odszyfrowuje ruch HTTPS z aplikacji na iPada
- 12. Wdróż jako użytkownik Jenkins lub zezwól Jenkins na uruchamianie jako inny użytkownik?
- 13. Użytkownik iOS Custom UIActivityItemProvider udostępnia obraz i tekst
- 14. libgdx i aplikacja na Androida. Obraz jako tło
- 15. Przechwytywanie UIView i Zapisz jako obraz
- 16. Generowanie obrazu div i zapisać jako
- 17. Django: openpyxl zapisuje skoroszyt jako załącznik
- 18. Extract Obwiednia i zapisać go jako obraz
- 19. Jak wyświetlić div, gdy użytkownik znajdzie się na dole strony?
- 20. Renderuj HTML jako obraz
- 21. Ładowanie procesu jako inny użytkownik?
- 22. UIImageWriteToSavedPhotosAlbum zapisuje nieprawidłowy rozmiar i jakość.
- 23. IIS 7.5: Ustawienie „użytkownik app pool” jako anonimowy użytkownik programowo
- 24. zestaw obraz jako przycisk
- 25. Jak powtórzyć obraz tła jako blok?
- 26. Rosnące nagłówek w UITableView jako użytkownik ściąga
- 27. Jak uzyskać obraz dynamiczny jako tło CSS?
- 28. Python przechwytuje wszystkie wydruki
- 29. Ustaw obraz src na inny obraz jquery
- 30. Czy ktokolwiek uruchamia VxWorks na komputerze stacjonarnym jako cel?
Czy chcesz, aby obraz został przechwycony z div? – Mohsen
tak, chcę, aby użytkownik strony mógł nacisnąć przycisk, a następnie pobierze coś w rodzaju zrzutu ekranu w jpg/gif/png lub coś w rodzaju –