Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    211

    Salvare una canvas in un file immagine

    Desidererei sapere se si può salvare una canvas in un file immagine e se sì, come fare. Grazie

    lanvoel

  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,654
    Ciao, probabilmente con questa funzione https://developer.mozilla.org/en-US/...ment/toDataURL come in questi esempi anche se un po' datati https://stackoverflow.com/questions/...nt-to-an-image

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    211
    Grazie m4rko80 per le soluzioni proposte che io applicate nel codice qui sotto, senza però ottenere il file immagine di estensione .jpg che vorrei ottenere.
    Infatti con l'istruzione var mia_immagine = canvas.toDataURL("image/jpg"); il canvas diventa il DataURL mia_immagine
    e con l'istruzione document.write('<img src="'+mia_immagine+'"/>'); viene visualizzata mia_immagine.
    Ma il file immagine di estensione .jpg è stato creato? E se sì, dove è memorizzato? Grazie per l'aiuto

    lanvoel

    codice:
    <!DOCTYPE html>
    <html>
    <body>
    <canvas id="myCanvas" width="500" height="400"
    style="border:1px solid blue;">
    Your browser does not support the canvas element.
    </canvas>
    <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
      ctx.strokeStyle="red"
    ctx.beginPath();
      ctx.moveTo(10,80);  
      ctx.lineTo(190,80);  
    ctx.closePath();
      ctx.stroke();
      ctx.fillStyle="red";
      ctx.fillText("red",10,90);
      ctx.strokeStyle="blue";
    ctx.beginPath();
      ctx.moveTo(10,160);  
      ctx.lineTo(190,160);  
    ctx.closePath();
      ctx.stroke();
      ctx.fillStyle="blue";
      ctx.fillText("blue",10,170);
      ctx.strokeStyle="green"
    ctx.beginPath();
      ctx.moveTo(10,240);  
      ctx.lineTo(190,240);  
    ctx.closePath();
      ctx.stroke();
      ctx.fillStyle="green";
      ctx.fillText("green",10,250);
      ctx.strokeStyle="magenta";
    ctx.beginPath();
      ctx.moveTo(10,320);  
      ctx.lineTo(190,320); 
    ctx.closePath(); 
      ctx.stroke();
      ctx.fillStyle="magenta";
      ctx.fillText("magenta",10,330);
    
     ctx.fillStyle="red";
     ctx.fillRect(210,80,180,40);
     ctx.fillText("red",210,130);
     ctx.fillStyle="blue";
     ctx.fillRect(210,160,180,40);
     ctx.fillText("blue",210,210);
     ctx.fillStyle="green";
     ctx.fillRect(210,240,180,40);
     ctx.fillText("green",210,290);
     ctx.fillStyle="magenta";
     ctx.fillRect(210,320,180,40);
     ctx.fillText("magenta",210,370);
        var mia_immagine    = canvas.toDataURL("image/jpg");
        document.write('<img src="'+mia_immagine+'"/>');
    </script>
    </body>
    </html>

  4. #4
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    211
    Mi sono accorto che con i due tag:
    var mia_immagine = canvas.toDataURL("image/jpg");
    document.write('<img src="'+mia_immagine+'"/>');
    il problema di salvare le immagini create con <canvas> è già risolto.
    Infatti basta cliccare destro sull'immagine ottenuta con:
    document.write('<img src="'+mia_immagine+'"/>');
    e, nel menu a discesa che si ottiene, scegliere "salva immagine con il nome" per ottenere finalmente il file immagine desiderato.
    Grazie ancora a m4rko80 e un saluto

    lanvoel

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.