toDataURL image téléchargement n'a pas d'extension

Question

Je télécharge une image lorsqu'un utilisateur clique sur div en utilisant ...

document.location.href = save_canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); 

Cela fonctionne, mais l'image que les téléchargements n'a pas d'extension et est simplement appelé « télécharger »

J'ai essayé de placer le nom comme celui-ci ...

document.location.download = "myfile.jpg"; 
document.location.href = save_canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); 

Mais il est sans effet, où vais-je tort?

Answer 1

L'attribut download ne fait pas partie de l'objet Location en tant que document.location, uniquement pour les balises d'ancrage HTML (A) (sauf dans IE). En fonction du navigateur et de la version, vous pouvez à la place essayer de convertir le canvas en objet Blob, puis en File afin de définir un nom de fichier, et le servir comme URL via URL.createObjectURL(). Également ici, toBlob() n'est pas pris en charge dans IE (mais vous pouvez polyfilltoBlob() et utiliser msSaveBlob à la place).

(et que vous voulez aussi de remplacer "l'image" de type mime avec "application" pour le type MIME (par exemple, "application/octet-stream").)

c.toBlob(function(blob) { 
 
    var file = new File([blob], "test.png", {type: "application/octet-stream"}); 
 
    document.location.href = URL.createObjectURL(file); 
 
})

A save request with PNG and filename should appear when running this code... 
 
<canvas id=c></canvas>

En option, essayez le FileSaver.js library qui traite de nombreux cas particuliers.