Lehetséges gombnyomásra képet készíteni?
válasza:#10: Mint #8-as hozzászólásodban írod: "Nem böngészőből használom."
Szóval nem "klasszikus" böngészőben futó, kliens oldali Javascriptet használod - ami nem fér hozzá a fájlrendszerhez - hanem - mint a #9-es hozzászóló utalt rá, teljesen helyesen - a "futtatókörnyezetet", a NodeJS-t (amit szoktak szerveroldalon - lásd Express keretrendszer - és asztali környezetben - lásd Electron), ami az fs modulon keresztül - mint arra a #4-es hozzászóló is utalt - fér hozzá a fájlrendszerhez.
válasza:Elfogtam egy nem privát tartalmú üzenetet:
"Üdv! Hogyan tudnám átmásolni <canvas>-ba ezt a képet? Valahogy nem sikerül sajnos. Köszönöm!"
A #2-es hozzászólásomban belinkeltem egy oldalt, ami leírja, hogyan kell.
Magát a "másolást" a drawImage() metódus:
végzi,
De csináltam egy példát is, ami az oldal betöltődésekor aktiválódik:
amire érdemes ügyelni - és ezt a cikk nem írja le - hogyha külső forrásból származó (nem a weboldallal egy könyvtárban levő) képet akarnál lementeni, akkor a kép (<img> tag) crossorigin attribútumát anonymous"-ra kell állítani, különben a böngésző - biztonsági okokból (erről bővebben a toBlob() metódus - [link] - leírásában - lásd az Exceptions részt) - nem fogja engedi a <canvas> elembe másolt kép mentését.
Nem nagyon akart összejönni, csak így tudtam megoldani:
Ezzel az a gond, hogy egyszer megnyomom a gombot, megrajzolja a képet a canvasba, de többször ha rányomok nem történik semmi, marad az először megrajzolt kép. Annyira ez nem is volna nagy hiba, ez még bele is férhet, szóval már csak le kéne tölteni.
Ha így próbálkozom:
akkor felajánlja letölteni, de nem tölti le, csak egy üres képet tölt le.
Gondoltam, hogy akkor még nincs megrajzolva, létrehozok egy külön gombot, amit akkor nyomok meg, ha már látom, hogy meg van rajzolva a canvasba a kép:
var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});
Így semmi nem történik az égvilágon a gomb megnyomáskor, még csak az üres képet sem ajánlja fel letöltésre.
További kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!