| 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 |