web-dev-qa-db-fra.com

Comment créer un lien de téléchargement d'image en HTML pour une page mobile?

J'ai une page html mobile qui contient des images. Je veux créer un bouton ou un lien qui est utilisé pour télécharger une image. L'image doit ensuite être enregistrée dans la galerie d'images mobiles de l'utilisateur. 

J'ai vu ce post: Comment créer un lien de téléchargement en HTML?

La solution 

<a href="link/to/your/download/file" download="filename">Download link</a>

fonctionne dans les navigateurs de bureau, mais pas sur mobile. 

Voici un JSFiddle que j'ai réalisé: http://jsfiddle.net/tDVqH/4/

Remarque: l’image est créée dans le navigateur, c’est-à-dire dans un élément de canevas HTML5. Cette image peut être générée avec canvas.toDataUrl (). L'image résultante doit être enregistrée dans la galerie d'images mobiles.

Comment enregistrer une image dans la galerie d'images de l'utilisateur mobile en un clic/robinet? Existe-t-il une solution JavaScript sans le circuit aller-retour avec un en-tête inconnu?

Edit: J'ai aussi trouvé les questions suivantes mais elles n'ont pas de réponse. Enregistrez une image dans le dossier local du site Web en cliquant sur un lien ou un bouton dans le navigateur mobile et Enregistrez une image dans la galerie d'un téléphone mobile à partir d'un navigateur

javascripthtmlgoogle-chromemobilemobile-safari
13
confile

Quelqu'un semble avoir a déjà répondu à cette question ,

<a href="/path/to/image" download="ImageName" title="ImageName">
    <img src="/path/to/image" alt="ImageName">
</a> It's not yet fully supported http://caniuse.com/#feat=download, but you can use with modernizr

http://modernizr.com/download/#-a_download (sous Détection non centrale) à soutenir tous les navigateurs.

Je n'ai pas testé, mais cela devrait également fonctionner sur les mobiles.

J'ajouterais qu'en tant que solution côté serveur, vous pouvez également ajouter des en-têtes de réponse à votre terminal de téléchargement en:

  • Configuration dans Apache (.htaccess)/configuration de nginx
  • Dès le code
4
theunexpected1

Utilisez l'attribut de téléchargement html5 comme solution ci-dessus de @ theunexpected1. Pour les navigateurs qui ne le prennent pas en charge, supprimez la balise A pour obliger l’utilisateur à cliquer avec le bouton droit de la souris ou à appuyer longuement pour télécharger.

<script>
var downloadAttrSupported = ("download" in document.createElement("a"))
if (!downloadAttrSupported){
   $('img.media').unwrap();
}
</script>
1
mikesl

Prise en charge de l'attribut de téléchargement: http://caniuse.com/download

Vous pouvez définir des en-têtes sur le serveur, si c'est une option pour vous. L'en-tête HTTP que vous souhaitez envoyer est Content-Disposition: attachment; filename = "imagename.jpg".

Diffère selon votre serveur. 

Dans Node/Express:

// only on imgs
function(req, res){
    res.setHeader('Content-disposition', 'attachment; filename=imagename.jpg');
}

Dans le HTML:

<a href="imagename.jpg">Download link</a>

Le serveur enverra un en-tête Content-Disposition lorsqu’il recevra la demande de fichier et forcera les navigateurs à télécharger.

0
John Williams