| OLD | NEW |
| (Empty) |
| 1 /* | |
| 2 * Copyright (c) 2010 Google Inc. All rights reserved. | |
| 3 * | |
| 4 * Redistribution and use in source and binary forms, with or without | |
| 5 * modification, are permitted provided that the following conditions are | |
| 6 * met: | |
| 7 * | |
| 8 * * Redistributions of source code must retain the above copyright | |
| 9 * notice, this list of conditions and the following disclaimer. | |
| 10 * * Redistributions in binary form must reproduce the above | |
| 11 * copyright notice, this list of conditions and the following disclaimer | |
| 12 * in the documentation and/or other materials provided with the | |
| 13 * distribution. | |
| 14 * * Neither the name of Google Inc. nor the names of its | |
| 15 * contributors may be used to endorse or promote products derived from | |
| 16 * this software without specific prior written permission. | |
| 17 * | |
| 18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS | |
| 19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT | |
| 20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR | |
| 21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT | |
| 22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, | |
| 23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT | |
| 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, | |
| 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY | |
| 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | |
| 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | |
| 28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | |
| 29 */ | |
| 30 | |
| 31 var LOUPE_MAGNIFICATION_FACTOR = 10; | |
| 32 | |
| 33 function Loupe() | |
| 34 { | |
| 35 this._node = $('loupe'); | |
| 36 this._currentCornerX = -1; | |
| 37 this._currentCornerY = -1; | |
| 38 | |
| 39 var self = this; | |
| 40 | |
| 41 function handleOutputClick(event) { self._handleOutputClick(event); } | |
| 42 $('expected-image').addEventListener('click', handleOutputClick); | |
| 43 $('actual-image').addEventListener('click', handleOutputClick); | |
| 44 $('diff-canvas').addEventListener('click', handleOutputClick); | |
| 45 | |
| 46 function handleLoupeClick(event) { self._handleLoupeClick(event); } | |
| 47 $('expected-loupe').addEventListener('click', handleLoupeClick); | |
| 48 $('actual-loupe').addEventListener('click', handleLoupeClick); | |
| 49 $('diff-loupe').addEventListener('click', handleLoupeClick); | |
| 50 | |
| 51 function hide(event) { self.hide(); } | |
| 52 $('loupe-close').addEventListener('click', hide); | |
| 53 } | |
| 54 | |
| 55 Loupe.prototype._handleOutputClick = function(event) | |
| 56 { | |
| 57 // The -1 compensates for the border around the image/canvas. | |
| 58 this._showFor(event.offsetX - 1, event.offsetY - 1); | |
| 59 }; | |
| 60 | |
| 61 Loupe.prototype._handleLoupeClick = function(event) | |
| 62 { | |
| 63 var deltaX = Math.floor(event.offsetX/LOUPE_MAGNIFICATION_FACTOR); | |
| 64 var deltaY = Math.floor(event.offsetY/LOUPE_MAGNIFICATION_FACTOR); | |
| 65 | |
| 66 this._showFor( | |
| 67 this._currentCornerX + deltaX, this._currentCornerY + deltaY); | |
| 68 } | |
| 69 | |
| 70 Loupe.prototype.hide = function() | |
| 71 { | |
| 72 this._node.style.display = 'none'; | |
| 73 }; | |
| 74 | |
| 75 Loupe.prototype._showFor = function(x, y) | |
| 76 { | |
| 77 this._fillFromImage(x, y, 'expected', $('expected-image')); | |
| 78 this._fillFromImage(x, y, 'actual', $('actual-image')); | |
| 79 this._fillFromCanvas(x, y, 'diff', $('diff-canvas')); | |
| 80 | |
| 81 this._node.style.display = ''; | |
| 82 }; | |
| 83 | |
| 84 Loupe.prototype._fillFromImage = function(x, y, type, sourceImage) | |
| 85 { | |
| 86 var tempCanvas = document.createElement('canvas'); | |
| 87 tempCanvas.width = sourceImage.width; | |
| 88 tempCanvas.height = sourceImage.height; | |
| 89 var tempContext = tempCanvas.getContext('2d'); | |
| 90 | |
| 91 tempContext.drawImage(sourceImage, 0, 0); | |
| 92 | |
| 93 this._fillFromCanvas(x, y, type, tempCanvas); | |
| 94 }; | |
| 95 | |
| 96 Loupe.prototype._fillFromCanvas = function(x, y, type, canvas) | |
| 97 { | |
| 98 var context = canvas.getContext('2d'); | |
| 99 var sourceImageData = | |
| 100 context.getImageData(0, 0, canvas.width, canvas.height); | |
| 101 | |
| 102 var targetCanvas = $(type + '-loupe'); | |
| 103 var targetContext = targetCanvas.getContext('2d'); | |
| 104 targetContext.fillStyle = 'rgba(255, 255, 255, 1)'; | |
| 105 targetContext.fillRect(0, 0, targetCanvas.width, targetCanvas.height); | |
| 106 | |
| 107 var sourceXOffset = (targetCanvas.width/LOUPE_MAGNIFICATION_FACTOR - 1)/2; | |
| 108 var sourceYOffset = (targetCanvas.height/LOUPE_MAGNIFICATION_FACTOR - 1)/2; | |
| 109 | |
| 110 function readPixelComponent(x, y, component) { | |
| 111 var offset = (y * sourceImageData.width + x) * 4 + component; | |
| 112 return sourceImageData.data[offset]; | |
| 113 } | |
| 114 | |
| 115 for (var i = -sourceXOffset; i <= sourceXOffset; i++) { | |
| 116 for (var j = -sourceYOffset; j <= sourceYOffset; j++) { | |
| 117 var sourceX = x + i; | |
| 118 var sourceY = y + j; | |
| 119 | |
| 120 var sourceR = readPixelComponent(sourceX, sourceY, 0); | |
| 121 var sourceG = readPixelComponent(sourceX, sourceY, 1); | |
| 122 var sourceB = readPixelComponent(sourceX, sourceY, 2); | |
| 123 var sourceA = readPixelComponent(sourceX, sourceY, 3)/255; | |
| 124 sourceA = Math.round(sourceA * 10)/10; | |
| 125 | |
| 126 var targetX = (i + sourceXOffset) * LOUPE_MAGNIFICATION_FACTOR; | |
| 127 var targetY = (j + sourceYOffset) * LOUPE_MAGNIFICATION_FACTOR; | |
| 128 var colorString = | |
| 129 sourceR + ', ' + sourceG + ', ' + sourceB + ', ' + sourceA; | |
| 130 targetContext.fillStyle = 'rgba(' + colorString + ')'; | |
| 131 targetContext.fillRect( | |
| 132 targetX, targetY, | |
| 133 LOUPE_MAGNIFICATION_FACTOR, LOUPE_MAGNIFICATION_FACTOR); | |
| 134 | |
| 135 if (i == 0 && j == 0) { | |
| 136 $('loupe-coordinate').textContent = sourceX + ', ' + sourceY; | |
| 137 $(type + '-loupe-color').textContent = colorString; | |
| 138 } | |
| 139 } | |
| 140 } | |
| 141 | |
| 142 this._currentCornerX = x - sourceXOffset; | |
| 143 this._currentCornerY = y - sourceYOffset; | |
| 144 }; | |
| OLD | NEW |