Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

HTMLCanvasElement.mozGetAsFile()

我們的志工尚未將此文章翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!

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.mozGetAsFille() 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.mozFetchAsStream(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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support Not supported 4.0 (2) Not supported Not supported Not supported
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Not supported Not supported 4.0 (2) Not supported Not supported Not supported

See also

文件標籤與貢獻者

 此頁面的貢獻者: fscholz
 最近更新: fscholz,