web-dev-qa-db-fra.com

Enregistrer le canevas au format jpg sur le bureau

J'essaie d'enregistrer une image (JPEG) sur le bureau à partir d'un HTML5canvas. Je peux ouvrir dans une nouvelle fenêtre window.open(canvas.toDataURL('png'), "");, mais comment puis-je l'enregistrer sur le bureau? Merci.

javascripthtml5canvashtml5-canvas
21
Rajkamal

Attribut de téléchargement

Il existe un nouveau attribut de téléchargement en HTML5 qui vous permet de spécifier un nom de fichier pour les liens.

Je l'ai fait pour enregistrer la toile. Il a un lien ("Télécharger comme image") -

<a id="downloadLnk" download="YourFileName.jpg">Download as image</a>

Et la fonction:

function download() {
    var dt = canvas.toDataURL('image/jpeg');
    this.href = dt;
};
downloadLnk.addEventListener('click', download, false);

Vous pouvez même changer le nom de fichier dynamiquement en définissant l'attribut downloadLnk.download = 'myFilename.jpg'.

Demo à partir des archives.

48
user1693593

Cochez cela si cela aide, Un jsfiddle implémenté pour la même exigence. http://jsfiddle.net/5whKM/

<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"/>

<script>
  var img = document.images[0];
  img.onclick = function() {
    var url = img.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
    location.href = url;
  };
</script>
8
Ashish Chopra

Ce que vous devez faire dans ce cas, est d'envoyer l'utilisateur window.location=canvas.toDataURL('png') à l'emplacement du fichier que vous souhaitez qu'il "télécharge". Donc, votre solution d'ouvrir une nouvelle fenêtre est ce que vous devez faire, et c'est ce qu'est le "téléchargement".

Par exemple, si vous souhaitez qu'ils enregistrent un EXE pour un fichier, vous les laissez simplement cliquer sur une ancre, et le navigateur gère la demande du fichier et le télécharge. Vous pouvez également le faire avec JavaScript, mais c'est un problème de sécurité et d'expérience utilisateur que de simplement enregistrer SaveAs pour les utilisateurs.

Vérifiez également ceci: Navigateur/HTML Force le téléchargement de l'image depuis src = "data: image/jpeg; base64 ..."

2
Mzn