Javascript: vytvoření linku ke stažení
Dobrý den,
Prošel jsem mnoho diskuzí a tutorialů na toto téma, ale žádná nefungovala, tak, jak bych si přál.
Problém se má tak:
V HTML5 jsem si vytvořil canvas a chci při kliknutí na tlačítko načíst obrázek z canvasu a poté druhým tlačítkem tento obrázek uložit do PC. Bohužel má JS funkce má mnoho chyb( tou základní je to, že to nic moc neukládá :D ).
Tlačítka:
<button onclick="saveCanvas()">SavePicture</button>
<a href="#" download="img.png" id="stahuj">Download</a>
JS funkce saveCanvas():
function saveCanvas(){
var canvas = document.getElementById("imageView");
var img = canvas.toDataURL("image/png");
var url = img.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
var odkaz = document.getElementById("stahuj");
odkaz.setAttribute("download",img);
}
Budu rád za každou radu.
Děkuji
O co konkrétně ti jde? Ukládání dat na server nelze dělat přes javascript, ale přes serverové skripty.
Nechci ukládat na server, ale do počítače( všechno to má fungovat pouze na klientovi- teda pokud to tak jde). Myslel jsem, že by to tak mohlo fungovat, když si obrázek uložím do proměnné a tu pak nějakým kouzelným způsobem uložím jako .png obrázek.
Keď píšeš JavaScript, tak sa hlavne pozeraj do konzoly webového inšpektora.
1. Do premennej img si ukladáš URL (reťazec), a v ďalšom riadku pristupuješ k vlastnosti img.src - taká neexistuje.
1a. Načo vôbec nahrádzaš MIME type z image/png na application/octet-stream? O to, aby sa to stiahlo, sa stará atribút download a nie to, že prehliadač nerozpozná typ obsahu.
1b. Premennú url ďalej v kóde nikde nepoužívaš. Celý ten riadok zmaž.
2. V atribúte download má byť názov súboru, nie URL. Tá patrí do atribútu href.
Super diky funguje!!