My favorites | Sign in
Project Logo
Project Home
  
Wiki
  
Issues
  
Source
    
Checkout | Browse | Changes |
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<!--
Copyright 2008, Google Inc.

Redistribution and use in source and binary forms, with or without 
modification, are permitted provided that the following conditions are met:

 1. Redistributions of source code must retain the above copyright notice, 
    this list of conditions and the following disclaimer.
 2. Redistributions in binary form must reproduce the above copyright notice,
    this list of conditions and the following disclaimer in the documentation
    and/or other materials provided with the distribution.
 3. Neither the name of Google Inc. nor the names of its contributors may be
    used to endorse or promote products derived from this software without
    specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR IMPLIED
WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
EVENT SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 
OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF 
ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->

<html>
  <head>
    <title>Canvas API</title>
    <link rel="stylesheet" type="text/css" href="gears.css" />
  </head>

<body>

<h1>Canvas API</h1>

<div id="pagecontent">

<p>The Canvas module provides an image manipulation API to JavaScript.</p>


<h3>Contents</h3>

  <ol class="toc">
  <li><a href="#overview">Overview</a>
  <li><a href="#canvas_class">Canvas class</a>
  </ol>



<h2 id="overview">Overview</h2>

<p>The Canvas module is a graphics API that is inspired by <a
href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">the
HTML5 canvas</a>, with additional methods to decode from and encode to binary
formats (such as PNG and JPEG), represented by Blobs.</p>

<p>A Gears Canvas is not yet a complete implementation of the HTML5 canvas
specification, and there are two significant differences:</p>

<ul>
<li>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.</li>
<li>A Gears Canvas does not implement <code>getContext</code>, and in particular
does not provide a 2D context.</li>
</ul>


<h4>Permission</h4>

<p>This API requires user permission.  If you would like to customize the default dialog, you can explicitly call <code>google.gears.factory.getPermission()</code> - <a href="api_factory.html">see how.</a></p>


<h2 id="canvas_class">Canvas class</h2>

<pre><code>readwrite attribute int <b>height</b>
readwrite attribute int <b>width</b>
void <b>crop</b>(x, y, w, h)
void <b>decode</b>(blob)
Blob <b>encode</b>([mimeType, options])
void <b>flipHorizontal</b>()
void <b>flipVertical</b>()
void <b>resize</b>(w, h, [filter])
void <b>rotate180</b>()
void <b>rotateCCW</b>()
void <b>rotateCW</b>()
</code></pre>
<br>


<h3>Attributes</h3>

<table>
  <tr class="odd">
    <th width="158">Attribute</th>
    <th width="109">Type</th>
    <th width="432">Description</th>
  </tr>
  <tr class="odd">
    <td><a name="height"></a><strong>height</strong></td>
    <td class="odd">readwrite attribute int</td>
    <td class="odd">The height of the Canvas. The default value is 150.</td>
  </tr>
  <tr class="odd">
    <td><a name="width"></a><strong>width</strong></td>
    <td class="odd">readwrite attribute int</td>
    <td class="odd">The width of the Canvas. The default value is 300.</td>
  </tr>
</table>


<h3>Methods</h3>

<table>
  <tr class="odd">
    <th colspan="2"><code>void crop(x, y, w, h)</code></th>
  </tr>
  <tr class="odd">
    <td width="113">Summary:</td>
    <td width="550" class="odd">
      Crops the Canvas. The crop happens &quot;in-place&quot;, as opposed
      to returning a new Canvas.
    </td>
  </tr>
  <tr class="odd">
    <td>Parameters:</td>
    <td class="odd">
      <code>x</code> - The left co-ordinate of the crop rectangle.
      <br/>
      <code>y</code> - The top co-ordinate of the crop rectangle.
      <br/>
      <code>w</code> - The width of the crop rectangle.
      <br/>
      <code>h</code> - The height of the crop rectangle.
    </td>
  </tr>
</table>

<table>
  <tr class="odd">
    <th colspan="2"><code>void decode(blob)</code></th>
  </tr>
  <tr class="odd">
    <td width="113">Summary:</td>
    <td width="550" class="odd">
      Loads an image into this Canvas, replacing the Canvas' current dimensions
      and contents.
    </td>
  </tr>
  <tr class="odd">
    <td>Parameters:</td>
    <td class="odd">
      <code>blob</code> - The Blob to decode. The image should be in PNG or
        JPEG format.
    </td>
  </tr>
  <tr class="odd">
    <td>Return value:</td>
    <td>A new Blob containing the specified subset.</td>
  </tr>
</table>

<table>
  <tr class="odd">
    <th colspan="2"><code>Blob encode([mimeType, options])</code></th>
  </tr>
  <tr class="odd">
    <td width="113">Summary:</td>
    <td width="550" class="odd">
      Saves the Canvas' contents to a binary format, such as PNG or JPEG.
    </td>
  </tr>
  <tr class="odd">
    <td>Parameters:</td>
    <td class="odd">
      <code>mimeType</code> - Optional. The image format to encode to. Valid
        values include &quot;image/png&quot; and &quot;image/jpeg&quot;. The
        default encoding is PNG.
      <br/>
      <code>options</code> - Optional. A JavaScript object (i.e. key-value map)
        that specifies encoding options. For lossy formats, such as JPEG, one
        can specify a &quot;quality&quot; key, whose value should be a number
        between 0.0 and 1.0 inclusive.
    </td>
  </tr>
  <tr class="odd">
    <td>Return value:</td>
    <td>A new Blob encoding the Canvas' image data.</td>
  </tr>
</table>

<table>
  <tr class="odd">
    <th colspan="2"><code>void flipHorizontal()</code></th>
  </tr>
  <tr class="odd">
    <td width="113">Summary:</td>
    <td width="550" class="odd">
      Flips the Canvas horizontally. The transform happens
      &quot;in-place&quot;, as opposed to returning a new Canvas.
    </td>
  </tr>
</table>

<table>
  <tr class="odd">
    <th colspan="2"><code>void flipVertical()</code></th>
  </tr>
  <tr class="odd">
    <td width="113">Summary:</td>
    <td width="550" class="odd">
      Flips the Canvas vertically. The transform happens &quot;in-place&quot;,
      as opposed to returning a new Canvas.
    </td>
  </tr>
</table>

<table>
  <tr class="odd">
    <th colspan="2"><code>void resize(w, h, [filter])</code></th>
  </tr>
  <tr class="odd">
    <td width="113">Summary:</td>
    <td width="550" class="odd">
      Resizes the Canvas. The transform happens &quot;in-place&quot;, as
      opposed to returning a new Canvas.
    </td>
  </tr>
  <tr class="odd">
    <td>Parameters:</td>
    <td class="odd">
      <code>w</code> - The new width.
      <br/>
      <code>h</code> - The new height.
      <br/>
      <code>filter</code> - Optional. A string specifying the image filter.
        There are four options: &quot;fastest&quot; or &quot;nearest&quot; for
        nearest-neighbor filtering, &quot;bilinear&quot; for bi-linear
        filtering, and &quot;nicest&quot; for highest quality filtering.
        The default filter, if unspecified, is &quot;nicest&quot;.
    </td>
  </tr>
</table>

<table>
  <tr class="odd">
    <th colspan="2"><code>void rotate180()</code></th>
  </tr>
  <tr class="odd">
    <td width="113">Summary:</td>
    <td width="550" class="odd">
      Rotates the Canvas by 180 degrees. The transform happens
      &quot;in-place&quot;, as opposed to returning a new Canvas.
    </td>
  </tr>
</table>

<table>
  <tr class="odd">
    <th colspan="2"><code>void rotateCCW()</code></th>
  </tr>
  <tr class="odd">
    <td width="113">Summary:</td>
    <td width="550" class="odd">
      Rotates the Canvas counter-clockwise by 90 degrees. The transform happens
      &quot;in-place&quot;, as opposed to returning a new Canvas.
    </td>
  </tr>
</table>

<table>
  <tr class="odd">
    <th colspan="2"><code>void rotateCW()</code></th>
  </tr>
  <tr class="odd">
    <td width="113">Summary:</td>
    <td width="550" class="odd">
      Rotates the Canvas clockwise by 90 degrees. The transform happens
      &quot;in-place&quot;, as opposed to returning a new Canvas.
    </td>
  </tr>
</table>


</div>
</body>
</html>
Show details Hide details

Change log

r3411 by gears.daemon on Nov 22, 2009   Diff 
[Author: nigeltao]

API documentation updates for
canvas.rotate and Exif orientation.

PRESUBMIT=passed
R=noel
CC=gears-eng@googlegroups.com
DELTA=78  (75 added, 0 deleted, 3 changed)
OCL=13535083
SCL=13663276
Go to: 
Project members, sign in to write a code review

Older revisions

r3367 by gears.daemon on Jun 29, 2009   Diff 
[Author: nigeltao]

Introduce trilinear filtering, for
canvas.resize().

...
r3355 by gears.daemon on Jun 10, 2009   Diff 
[Author: nigeltao]

SDK documentation update for 0.5.21.

PRESUBMIT=passed
...
All revisions of this file

File info

Size: 8837 bytes, 292 lines
Hosted by Google Code