The Canvas module provides an image manipulation API to JavaScript.
Contents
- Overview
- Canvas class
Overview
The Canvas module is a graphics API that is inspired by the
HTML5 canvas, with additional methods to decode from and encode to binary
formats (such as PNG and JPEG), represented by Blobs.
A Gears Canvas is not yet a complete implementation of the HTML5 canvas
specification, and there are two significant differences:
- A Gears Canvas is off-screen, in that creating a Canvas object doesn't
directly paint any pixels on the screen. Furthermore, for technical reasons, a
Gears Canvas is not a DOM Element. On the other hand, you can create a Gears
Canvas in a Worker.
- A Gears Canvas does not implement
getContext
, and in particular
does not provide a 2D context.
Permission
This API requires user permission. If you would like to customize the default dialog, you can explicitly call google.gears.factory.getPermission()
- see how.
Canvas class
readwrite attribute int height
readwrite attribute int width
void crop(x, y, w, h)
void decode(blob)
Blob encode([mimeType, options])
void flipHorizontal()
void flipVertical()
void resize(w, h, [filter])
void rotate180()
void rotateCCW()
void rotateCW()
Attributes
Attribute |
Type |
Description |
height |
readwrite attribute int |
The height of the Canvas. The default value is 150. |
width |
readwrite attribute int |
The width of the Canvas. The default value is 300. |
Methods
void crop(x, y, w, h) |
Summary: |
Crops the Canvas. The crop happens "in-place", as opposed
to returning a new Canvas.
|
Parameters: |
x - The left co-ordinate of the crop rectangle.
y - The top co-ordinate of the crop rectangle.
w - The width of the crop rectangle.
h - The height of the crop rectangle.
|
void decode(blob) |
Summary: |
Loads an image into this Canvas, replacing the Canvas' current dimensions
and contents.
|
Parameters: |
blob - The Blob to decode. The image should be in PNG or
JPEG format.
|
Return value: |
A new Blob containing the specified subset. |
Blob encode([mimeType, options]) |
Summary: |
Saves the Canvas' contents to a binary format, such as PNG or JPEG.
|
Parameters: |
mimeType - Optional. The image format to encode to. Valid
values include "image/png" and "image/jpeg". The
default encoding is PNG.
options - Optional. A JavaScript object (i.e. key-value map)
that specifies encoding options. For lossy formats, such as JPEG, one
can specify a "quality" key, whose value should be a number
between 0.0 and 1.0 inclusive.
|
Return value: |
A new Blob encoding the Canvas' image data. |
void flipHorizontal() |
Summary: |
Flips the Canvas horizontally. The transform happens
"in-place", as opposed to returning a new Canvas.
|
void flipVertical() |
Summary: |
Flips the Canvas vertically. The transform happens "in-place",
as opposed to returning a new Canvas.
|
void resize(w, h, [filter]) |
Summary: |
Resizes the Canvas. The transform happens "in-place", as
opposed to returning a new Canvas.
|
Parameters: |
w - The new width.
h - The new height.
filter - Optional. A string specifying the image filter.
There are four options: "fastest" or "nearest" for
nearest-neighbor filtering, "bilinear" for bi-linear
filtering, and "nicest" for highest quality filtering.
The default filter, if unspecified, is "nicest".
|
void rotate180() |
Summary: |
Rotates the Canvas by 180 degrees. The transform happens
"in-place", as opposed to returning a new Canvas.
|
void rotateCCW() |
Summary: |
Rotates the Canvas counter-clockwise by 90 degrees. The transform happens
"in-place", as opposed to returning a new Canvas.
|
void rotateCW() |
Summary: |
Rotates the Canvas clockwise by 90 degrees. The transform happens
"in-place", as opposed to returning a new Canvas.
|