l'utilisateur de capturer des div de l'image et de l'enregistrer sur l'ordinateur

J'ai un Div sur mon site, je veux mettre un bouton/lien (ou d'autres choses de la sorte) que lorsque l'utilisateur clique dessus permettra d'économiser de la div et l'ensemble de son contenu à l'ordinateur de l'utilisateur, un peu comme l'impression de code qui est utilisé pour imprimer des divs. Je suis un codage novice donc toute aide sera aprécié.

Voulez-vous une image capturée à partir de votre div?
ouais je veux que l'utilisateur du site pour être en mesure d'appuyer sur un bouton, puis il télécharge une sorte de capture d'écran de la div au format jpg, gif, png, ou quelque chose

OriginalL'auteur Jack Notman | 2011-11-06

11

Il y a une prise en charge du navigateur de limiter cela. HTML2Canvas peut rendre votre contenu HTML dans un canvas élément. Ensuite, vous pouvez utiliser canvas.toDataURL("image/png"); (docs en MDN) méthode pour exporter le canvas élément à un jpeg ou png image.

Il n'est pas largement pris en charge, mais c'est encore possible.

déjà essayé ce que le contenu de mon habitude de travailler dans une toile d'élément:
Vous n'avez pas à avoir un canvas dans la page.
expliquer plus? il travaillera avec flash?
Eh bien, c'est un nouvel article sur ce que j'ai dit: robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html
Est-ce possible de fournir un peu de code?

OriginalL'auteur Mohsen

Moyen facile

 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;

                    }
                });

utiliser un bouton d'appel d'ur champ caché

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

    }
}

OriginalL'auteur Anoop B.K

0

En supposant que vous voulez un texte ou un fichier HTML, pas un fichier image comme une capture d'écran, JavaScript lui-même ne peut pas initier un dialogue "Enregistrer" sur un navigateur web, seulement une réponse à partir d'une requête web à un serveur de le faire.

Pour commencer, vous aurez besoin d'un formulaire avec votre bouton et un champ caché:
```
<div id="saveme">stuff to save</div>
<form action="saveme.aspx" method="POST">
  <input type="submit" onclick="prepsave()">
  <input type="hidden" id="savemepost">
</form>
```
Et vous avez besoin d'un peu de Javascript pour enregistrer le DIV contenu dans le champ caché avant de soumission:
```
<script>
   function prepsave() {
      document.getElementById("savemepost").value = 
        document.getElementById("saveme").innerHTML;
        return true;
   }
</script>
```
Sur le serveur, vous aurez besoin d'un certain code d'accepter le texte et de le recracher sous la forme d'un fichier en pièce jointe:
```
<script runat="server">
   Response.Clear()
   Response.AddHeader("content-disposition","attachment; filename=saved.html")
   Response.Write(Request.Form("savemepost"))
</script>
```
Mise en garde #1: Il y a probablement quelques bugs mineurs-y, et beaucoup de place pour de l'amélioration, c'est juste une preuve de concept.

Mise en garde n ° 2: du côté serveur, Le code ci-dessus est potentiellement dangereux, car il permet à n'importe quelle page web pour contrôler le contenu va le navigateur web de l'utilisateur à partir de votre domaine. Vous aurez besoin d'ajouter certaines mesures pour protéger cet abus.

Il dit qu'il veut être quelque chose comme une capture d'écran, dans son commentaire sur la question.

OriginalL'auteur richardtallent
0

Un moyen facile de le faire serait d'utiliser GrabzIt de l'API JavaScript pour capture d'une div. Vous auriez juste besoin de faire quelque chose comme ce qui suit. Où #caractéristiques est l'id de la div que vous voulez capturer.
```
<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>
```
Avertissement j'ai construit cette API!

OriginalL'auteur GrabzIt

Vous devez vous connecter pour publier un commentaire.