Bilddownload

[1UnitedPower]

Meine Herren!

Das Canvas-Element hat eine Methode toDataURL() mit der du eine dataURL erzeugen kannst, das ist eine spezielle Form von URL, die für genau diese Zwecke entworfen wurde.

DataURL ist ein Base64-String. Den würde ich nicht zum Download anbieten. Es gibt aber noch eine andere Methode für canvas:

Stimmt, das scheint mir auch eleganter, die Browserunterstützung ist nur leider noch nicht recht mau.

canvas.toBlob(function(blob) {
            saveAs(blob);
        }, 'image/bmp', 1);

  
So könnte eine schemahafte saveAs-Funktion aussehen:  
  
~~~javascript
function saveAs( blob ) {  
   var a = document.createElement( 'a' );  
   a.href = URL.createObjectURL( blob );  
   a.download = 'bild.bmp';  
   a.click();  
}

Das vorgeschlagene FileSaver.js bietet eine robustere Implementation.

womit als Download auch image/jpeg oder image/png möglich sind, nähreres auf dem MDN.

Das ist mit daraURLs auch der Fall. Habe aber gerade nochmal in der Spezifikation nachgelesen, dass nur image/png obligatorisch für die Browser ist.