Scarica un elemento canvas Html5 come un’immagine con l’estensione del file con Javascript

Mi piacerebbe essere in grado di scaricare un elemento canvas Html5 come un’immagine con l’estensione del file con Javascript.

La libreria CanvasToImage non sembra in grado di raggiungere questo objective.

Ecco il mio codice finora che puoi vedere in questo JsFiddle .

create download

$("#create_image").click(function() { var cnvs = createSmileyOnCanvas(); $('#canvas_container').append(cnvs); }); $("#download_image").click(function() { var img = $('#smiley_canvas').toDataURL("image/png"); var uriContent = "data:application/octet-stream," + encodeURIComponent(img); window.open(uriContent, 'download smiley image'); }); function createSmileyOnCanvas() { var canvas = document.createElement('canvas'); canvas.id = 'smiley_canvas'; var ctx = canvas.getContext('2d'); // Draw shapes ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke(); return canvas; }

Per forzare / suggerire un nome di file nella finestra di dialogo di download del browser, è necessario inviare Content-Disposition: attachment; filename=foobar.png Content-Disposition: attachment; filename=foobar.png header.

Non è ansible farlo tramite window.open , quindi sei sfortunato a meno che non ci siano alcuni hack specifici del browser per questo.

Se hai davvero bisogno del nome del file, puoi provare a utilizzare il nuovo attributo download in a . Tuttavia non è ancora ampiamente supportato.

Un’altra alternativa sarebbe quella di inviare prima i dati al server usando ajax, quindi redirect il browser ad uno script sul lato server che poi servirebbe i dati con l’intestazione corretta.

Questo sembra funzionare per me:

Download Drawing

Ciao ho creato un plugin jQuery che ti permetterà di fare lo stesso compito con facilità, ma anche di usare php per scaricare l’immagine. lascia che ti spieghi come funziona

Il plugin ha 2 sottofunzioni che puoi chiamare in modo indipendente per aggiungere un’immagine alla canvas e l’altra è scaricare l’immagine corrente che giace sulla canvas.

Aggiungi un’immagine alla canvas

Per questo è necessario passare l’id dell’elemento canvas e il percorso dell’immagine che si desidera aggiungere

scarica l’immagine dalla canvas

Per questo è necessario passare l’id dell’elemento canvas

  $('body').CanvasToPhp.upload({ canvasId: "canvas", // passing the canvasId image: "455.jpg" // passing the image path }); // downloading file $('#download').click(function(){ $('body').CanvasToPhp.download({ canvasId: "canvas" // passing the canvas id }); // }); 

Per prima cosa devi scaricare il file plugin che puoi trovare qui http://www.thetutlage.com/post=TUT213

Ho anche creato una piccola demo http://thetutlage.com/demo/canvasImageDownload