OLD | NEW |
1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @fileoverview | 6 * @fileoverview |
7 * 'settings-camera' is the Polymer control used to take a picture from the | 7 * 'settings-camera' is the Polymer control used to take a picture from the |
8 * user webcam to use as a ChromeOS profile picture. | 8 * user webcam to use as a ChromeOS profile picture. |
9 */ | 9 */ |
10 (function() { | 10 (function() { |
11 | 11 |
12 /** | 12 /** |
13 * Dimensions for camera capture. | 13 * Dimensions for camera capture. |
14 * @const | 14 * @const |
15 */ | 15 */ |
16 var CAPTURE_SIZE = { | 16 var CAPTURE_SIZE = {height: 480, width: 480}; |
17 height: 480, | |
18 width: 480 | |
19 }; | |
20 | 17 |
21 Polymer({ | 18 Polymer({ |
22 is: 'settings-camera', | 19 is: 'settings-camera', |
23 | 20 |
24 properties: { | 21 properties: { |
25 /** | 22 /** |
26 * True if the user has selected the camera as the user image source. | 23 * True if the user has selected the camera as the user image source. |
27 * @type {boolean} | 24 * @type {boolean} |
28 */ | 25 */ |
29 cameraActive: { | 26 cameraActive: { |
(...skipping 116 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
146 }, | 143 }, |
147 | 144 |
148 /** | 145 /** |
149 * Flip the live camera stream. | 146 * Flip the live camera stream. |
150 * @private | 147 * @private |
151 */ | 148 */ |
152 onTapFlipPhoto_: function() { | 149 onTapFlipPhoto_: function() { |
153 this.isFlipped_ = !this.isFlipped_; | 150 this.isFlipped_ = !this.isFlipped_; |
154 this.$.userImageStreamCrop.classList.toggle('flip-x', this.isFlipped_); | 151 this.$.userImageStreamCrop.classList.toggle('flip-x', this.isFlipped_); |
155 | 152 |
156 var flipMessageId = this.isFlipped_ ? | 153 var flipMessageId = this.isFlipped_ ? 'photoFlippedAccessibleText' : |
157 'photoFlippedAccessibleText' : 'photoFlippedBackAccessibleText'; | 154 'photoFlippedBackAccessibleText'; |
158 announceAccessibleMessage(loadTimeData.getString(flipMessageId)); | 155 announceAccessibleMessage(loadTimeData.getString(flipMessageId)); |
159 }, | 156 }, |
160 | 157 |
161 /** | 158 /** |
162 * Captures a single still frame from a <video> element, placing it at the | 159 * Captures a single still frame from a <video> element, placing it at the |
163 * current drawing origin of a canvas context. | 160 * current drawing origin of a canvas context. |
164 * @param {!HTMLVideoElement} video Video element to capture from. | 161 * @param {!HTMLVideoElement} video Video element to capture from. |
165 * @param {!CanvasRenderingContext2D} ctx Canvas context to draw onto. | 162 * @param {!CanvasRenderingContext2D} ctx Canvas context to draw onto. |
166 * @private | 163 * @private |
167 */ | 164 */ |
168 captureFrame_: function(video, ctx) { | 165 captureFrame_: function(video, ctx) { |
169 var width = video.videoWidth; | 166 var width = video.videoWidth; |
170 var height = video.videoHeight; | 167 var height = video.videoHeight; |
171 if (width < CAPTURE_SIZE.width || height < CAPTURE_SIZE.height) { | 168 if (width < CAPTURE_SIZE.width || height < CAPTURE_SIZE.height) { |
172 console.error('Video capture size too small: ' + | 169 console.error( |
173 width + 'x' + height + '!'); | 170 'Video capture size too small: ' + width + 'x' + height + '!'); |
174 } | 171 } |
175 var src = {}; | 172 var src = {}; |
176 if (width / CAPTURE_SIZE.width > height / CAPTURE_SIZE.height) { | 173 if (width / CAPTURE_SIZE.width > height / CAPTURE_SIZE.height) { |
177 // Full height, crop left/right. | 174 // Full height, crop left/right. |
178 src.height = height; | 175 src.height = height; |
179 src.width = height * CAPTURE_SIZE.width / CAPTURE_SIZE.height; | 176 src.width = height * CAPTURE_SIZE.width / CAPTURE_SIZE.height; |
180 } else { | 177 } else { |
181 // Full width, crop top/bottom. | 178 // Full width, crop top/bottom. |
182 src.width = width; | 179 src.width = width; |
183 src.height = width * CAPTURE_SIZE.height / CAPTURE_SIZE.width; | 180 src.height = width * CAPTURE_SIZE.height / CAPTURE_SIZE.width; |
184 } | 181 } |
185 src.x = (width - src.width) / 2; | 182 src.x = (width - src.width) / 2; |
186 src.y = (height - src.height) / 2; | 183 src.y = (height - src.height) / 2; |
187 ctx.drawImage(video, src.x, src.y, src.width, src.height, | 184 ctx.drawImage( |
188 0, 0, CAPTURE_SIZE.width, CAPTURE_SIZE.height); | 185 video, src.x, src.y, src.width, src.height, 0, 0, CAPTURE_SIZE.width, |
| 186 CAPTURE_SIZE.height); |
189 }, | 187 }, |
190 | 188 |
191 /** | 189 /** |
192 * Flips frame horizontally. | 190 * Flips frame horizontally. |
193 * @param {!(HTMLImageElement|HTMLCanvasElement|HTMLVideoElement)} source | 191 * @param {!(HTMLImageElement|HTMLCanvasElement|HTMLVideoElement)} source |
194 * Frame to flip. | 192 * Frame to flip. |
195 * @return {string} Flipped frame as data URL. | 193 * @return {string} Flipped frame as data URL. |
196 */ | 194 */ |
197 flipFrame_: function(source) { | 195 flipFrame_: function(source) { |
198 var canvas = document.createElement('canvas'); | 196 var canvas = document.createElement('canvas'); |
199 canvas.width = CAPTURE_SIZE.width; | 197 canvas.width = CAPTURE_SIZE.width; |
200 canvas.height = CAPTURE_SIZE.height; | 198 canvas.height = CAPTURE_SIZE.height; |
201 var ctx = canvas.getContext('2d'); | 199 var ctx = canvas.getContext('2d'); |
202 ctx.translate(CAPTURE_SIZE.width, 0); | 200 ctx.translate(CAPTURE_SIZE.width, 0); |
203 ctx.scale(-1.0, 1.0); | 201 ctx.scale(-1.0, 1.0); |
204 ctx.drawImage(source, 0, 0); | 202 ctx.drawImage(source, 0, 0); |
205 return canvas.toDataURL('image/png'); | 203 return canvas.toDataURL('image/png'); |
206 }, | 204 }, |
207 }); | 205 }); |
208 | 206 |
209 })(); | 207 })(); |
OLD | NEW |