Pobierz element canvas Html5 jako obraz z rozszerzeniem pliku z Javascriptem

Question

Chciałbym móc pobrać element canvas Html5 jako obraz z rozszerzeniem pliku z Javascriptem.

Biblioteka zdaje się, że biblioteka CanvasToImage nie jest w stanie tego osiągnąć.

Oto mój kod do tej pory, który można zobaczyć na tym JsFiddle.

<div id="canvas_container"> 
</div> 
<p> 
<a href='#' id="create_image">create</a> 
<a href="#" id="download_image">download</a> 
</p> 




$("#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; 
} 

Answer 1

W celu zmuszenia/zaproponować nazwę pliku w oknie pobierania przeglądarki, trzeba by wysłać nagłówek Content-Disposition: attachment; filename=foobar.png.

Nie można tego zrobić za pomocą window.open, więc nie masz szczęścia, chyba że są jakieś hacki związane z przeglądarką.

Jeśli naprawdę potrzebujesz nazwy pliku, możesz spróbować użyć nowego atrybutu pobierania w a, <a href="put stuff here" download="filename here">. Jednak nie jest jeszcze bardzo szeroko wspierana.

Inną opcją byłoby najpierw przesłać dane do serwera przy użyciu ajax, a następnie przekierować przeglądarkę do jakiegoś skryptu po stronie serwera, który następnie serwowałby dane z poprawnym nagłówkiem.

Answer 2

Witam Stworzyłem wtyczkę jQuery, która pozwoli ci z łatwością wykonać to samo zadanie, ale także użyć php do pobrania obrazu. Pozwól mi wyjaśnić, jak działa

Plugin ma 2 funkcje podrzędne, które możesz wywołać niezależnie, aby dodać obraz do płótna, a drugi to pobrać bieżący obraz leżący na płótnie.

dodać zdjęcie na płótnie

Do tego trzeba zdać id elementu canvas i ścieżkę do obrazu, który chcesz dodać

Pobierz plik z płótna

W tym celu należy podać id elementu 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 
    }); // 
}); 

Najpierw trzeba pobrać plik wtyczki, które można znaleźć tutaj http://www.thetutlage.com/post=TUT213

Mam również stworzony trochę demo http://thetutlage.com/demo/canvasImageDownload

Answer 3

To wydaje się działać dla mnie:

<a id="downloadImgLink" onclick="$('#downloadImgLink').attr('href', canvas.toDataURL());" download="MyImage.png" href="#" target="_blank">Download Drawing</a>