salva l'immagine sul disco dell'utente usando javascript

Ho passato l'origine per il tag html come base64String usando javascript. l'immagine è stata visualizzata chiaramente. ora voglio salvare quell'immagine sul disco dell'utente usando javascript.salva l'immagine sul disco dell'utente usando javascript

<html> 
<head> 
<script> 
function saveImageAs() { 
var imgOrURL; 
embedImage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA"+ 
"AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO"+ 
"9TXL0Y4OHwAAAABJRU5ErkJggg=="; 
imgOrURL = embedImage; 
if (typeof imgOrURL == 'object') 
    imgOrURL = embedImage.src; 
window.win = open(imgOrURL); 
setTimeout('win.document.execCommand("SaveAs")', 0); 
} 
</script> 
</head> 
<body> 
    <a href="#" ONCLICK="saveImageAs(); return false" >save image</a> 

    <img id="embedImage" alt="Red dot"> 

</body> 
</html>

questo codice aveva lavorato quando passiamo l'ImagePath come sorgente per il tag, ma non aveva funzionato quando si passa il sorce come base64String per etichettare.

per favore suggerirmi su questo problema.

grazie in anticipo.

fonte

2011-10-31 vengatesh

So che esistono limiti sull'utilizzo dei dati: immagine in IE ... dimensione del file e altro. Prova a cercarlo prima. – Fabio

se ha dei limiti, quindi non dovrebbe essere stato visualizzato sullo schermo. ma l'immagine viene visualizzata anche per immagini di dimensioni lunghe. non potrei essere in grado di salvare quel disco tom dell'immagine. – vengatesh

posso passare bytearray come sorgente per il tag utilizzando javascript? – vengatesh

Solo per consentire all'utente di scaricare l'immagine o altro file è possibile utilizzare l'attributo HTML5 download.

statico file scaricare

<a href="/images/image-name.jpg" download> 
<!-- OR --> 
<a href="/images/image-name.jpg" download="new-image-name.jpg">

download di file dinamico

Nei casi che richiedono immagini in modo dinamico, è possibile emulare tale download.

Se l'immagine è già caricato e si dispone la fonte base64 poi:

saveBase64AsFile(base64, fileName) { 

    var link = document.createElement("a"); 

    link.setAttribute("href", base64); 
    link.setAttribute("download", fileName); 
    link.click(); 
}

Altrimenti se il file immagine viene scaricato come Blob è possibile utilizzare FileReader per convertirlo in Base64:

saveBlobAsFile(blob, fileName) { 

    var reader = new FileReader(); 

    reader.onloadend = function() {  
     var base64 = reader.result ; 
     var link = document.createElement("a"); 

     link.setAttribute("href", base64); 
     link.setAttribute("download", fileName); 
     link.click(); 
    }; 

    reader.readAsDataURL(blob); 
}

Cattive notizie! Fai attenzione: IE non è supportato: Caniuse link

fonte

2016-05-30 08:43:37

Ora Safari è supportato. – Alex78191

In JavaScript non è possibile avere accesso diretto al filesystem. Tuttavia, è possibile fare in modo che il browser compaia una finestra di dialogo che consente all'utente di selezionare la posizione di salvataggio. Per fare questo, utilizzare il metodo replace con il Base64String e sostituiscono "image/png" con "image/octet-stream":

"data:image/png;base64,iVBORw0KG...".replace("image/png", "image/octet-stream");

Inoltre, i browser W3C compliant forniscono 2 metodi per lavorare con codifica base64 e dati binari:

Probabilmente, li troverete utili in un certo senso ...

Ecco una versione riscritta di quello che ho capito è necessario:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"/> 
     <script type="text/javascript"> 
      window.onload = function() { 
       var img = document.getElementById('embedImage'); 
       var button = document.getElementById('saveImage'); 
       img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+ 
       'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+ 
       '9TXL0Y4OHwAAAABJRU5ErkJggg=='; 
       img.onload = function() { 
        button.removeAttribute('disabled'); 
       }; 
       button.onclick = function() { 
        window.location.href = img.src.replace('image/png', 'image/octet-stream'); 
       }; 
      }; 
     </script> 
    </head> 
    <body> 
     <img id="embedImage" alt="Red dot"/> 
     <input id="saveImage" type="button" value="save image" disabled="disabled"/> 
    </body> 
</html>

Potete vederlo in azione HERE.

fonte

2011-10-31 10:25:46

Nota che 'atob' e' btoa' non sono mai stati parte di nessuno standard. Sono supportati da * alcuni * browser conformi agli standard, ma non contano su di essi in tutti loro. –

@AndyE corretto. Ecco perché è necessario eseguire test delle funzionalità prima di utilizzare questi metodi. –

@John Doe: ancora non sono riuscito a ottenere la finestra di dialogo di salvataggio per il salvataggio dell'immagine sul disco dell'utente – vengatesh

salva l'immagine sul disco dell'utente usando javascript

risposta

Problemi correlati