HTMLCanvasElement.mozGetAsFile()

Nuestros voluntarios aún no han traducido este artículo al Español. ¡Únete a nosotros y ayúdanos a traducirlo!
También puedes leer el artículo en English (US).

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The HTMLCanvasElement.mozGetAsFile() method returns a File object representing the image contained in the canvas; this file is a memory-based file, with the specified name. If type is not specified, the image type is image/png.

Syntax

canvas.mozGetAsFile(name, type);

Parameters

name
A DOMString indicating the file name.
type Optional
A DOMString indicating the image format. The default type is image/png.

Return value

A File object representing the image contained in the canvas.

Examples

Example: Using mozGetAsFile()

HTML snippet:

<canvas id="canvas" width="100" height="100"></canvas>
<p><a href="#" id="link">Click here to try out mozGetAsFile().</a></p>

The following code uses mozGetAsFile to create a File object from the canvas and appends it as an image to the page using FileReader.readAsDataURL():

function draw() {
   var canvas = document.getElementById('canvas');
   var ctx = canvas.getContext('2d');
 
   ctx.fillStyle = 'rgb(200, 0, 0)';
   ctx.fillRect(10, 10, 55, 50);
 
   ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
   ctx.fillRect(30, 30, 55, 50);

   var link = document.getElementById('link');
   link.addEventListener('click', copy);
}
    
function copy() {
  var canvas = document.getElementById('canvas');
  var f = canvas.mozGetAsFile('test.png');
  var reader = new FileReader();
  reader.readAsDataURL(f);
      
  reader.onloadend = function() {
    var newImg = document.createElement('img');
    newImg.src = reader.result;
    document.body.appendChild(newImg);
  }
}

window.addEventListener('load', draw);

Specifications

Not part of any specification.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox Full support 4IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 4Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

See also

Etiquetas y colaboradores del documento

Colaboradores en esta página: fscholz, Jedipedia, nmve, ucsavl
Última actualización por: fscholz,