OLD | NEW |
1 /** | 1 /** |
2 * Common JS that talks XHR back to the server and runs the code and receives | 2 * Common JS that talks XHR back to the server and runs the code and receives |
3 * the results. | 3 * the results. |
4 */ | 4 */ |
5 | 5 |
6 /** | 6 /** |
7 * A polyfill for HTML Templates. | 7 * A polyfill for HTML Templates. |
8 * | 8 * |
9 * This just adds in the content attribute, it doesn't stop scripts | 9 * This just adds in the content attribute, it doesn't stop scripts |
10 * from running nor does it stop other side-effects. | 10 * from running nor does it stop other side-effects. |
(...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
90 return s; | 90 return s; |
91 } | 91 } |
92 | 92 |
93 function drawZoom() { | 93 function drawZoom() { |
94 if (currentImage) { | 94 if (currentImage) { |
95 // Only draw if the mouse has moved from the last time we drew. | 95 // Only draw if the mouse has moved from the last time we drew. |
96 if (lastClientX != clientX || lastClientY != clientY) { | 96 if (lastClientX != clientX || lastClientY != clientY) { |
97 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); | 97 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); |
98 var x = clientX - currentImage.x; | 98 var x = clientX - currentImage.x; |
99 var y = clientY - currentImage.y; | 99 var y = clientY - currentImage.y; |
100 ctx.drawImage(currentImage, | 100 var dx = Math.floor(ctx.canvas.width/PIXELS); |
101 x, y, // src zero | 101 var dy = Math.floor(ctx.canvas.height/PIXELS); |
102 PIXELS, PIXELS, // src dimensions | 102 |
103 0, 0, // dst zero | 103 ctx.lineWidth = 1; |
104 ctx.canvas.width, ctx.canvas.height); // dst dimensions | 104 ctx.strokeStyle = '#000'; |
| 105 |
| 106 // Draw out each pixel as a rect on the target canvas, as this works aro
und |
| 107 // FireFox doing a blur as it copies from one canvas to another. |
| 108 var colors = canvasCopy.getContext('2d').getImageData(x, y, PIXELS, PIXE
LS).data; |
| 109 for (var i=0; i<PIXELS; i++) { |
| 110 for (var j=0; j<PIXELS; j++) { |
| 111 var offset = (j*PIXELS+i)*4; // Offset into the colors array. |
| 112 ctx.fillStyle = 'rgba(' + colors[offset] + ', ' + colors[offset+1] +
', ' + colors[offset+2] + ', ' + colors[offset+3]/255.0 + ')'; |
| 113 ctx.fillRect(i*dx, j*dy, dx-1, dy-1); |
| 114 // Box and label one selected pixel with its rgba values. |
| 115 if (hex && i==PIXELS/2 && j == PIXELS/2) { |
| 116 ctx.strokeRect(i*dx, j*dy, dx-1, dy-1); |
| 117 hex.textContent = 'rgba(' |
| 118 + colors[offset] + ', ' |
| 119 + colors[offset+1] + ', ' |
| 120 + colors[offset+2] + ', ' |
| 121 + colors[offset+3] + ') ' |
| 122 + hexify(colors[offset]) |
| 123 + hexify(colors[offset+1]) |
| 124 + hexify(colors[offset+2]) |
| 125 + hexify(colors[offset+3]); |
| 126 } |
| 127 } |
| 128 } |
105 lastClientX = clientX; | 129 lastClientX = clientX; |
106 lastClientY = clientY; | 130 lastClientY = clientY; |
107 // Box and label one selected pixel with its rgba values. | |
108 if (hex) { | |
109 ctx.lineWidth = 1; | |
110 ctx.strokeStyle = '#000'; | |
111 var dx = ctx.canvas.width/PIXELS; | |
112 var dy = ctx.canvas.height/PIXELS; | |
113 ctx.strokeRect((PIXELS/2)*dx, (PIXELS/2)*dy, dx, dy); | |
114 var p = canvasCopy.getContext('2d').getImageData(x+PIXELS/2, y+PIXELS/
2, 1, 1).data; | |
115 hex.textContent = 'rgba(' | |
116 + p[0] + ', ' | |
117 + p[1] + ', ' | |
118 + p[2] + ', ' | |
119 + p[3] + ') ' | |
120 + hexify(p[0]) | |
121 + hexify(p[1]) | |
122 + hexify(p[2]) | |
123 + hexify(p[3]); | |
124 } | |
125 } | 131 } |
126 setTimeout(drawZoom, 1000/30); | 132 setTimeout(drawZoom, 1000/30); |
127 } | 133 } |
128 } | 134 } |
129 | 135 |
130 function zoomFinished() { | 136 function zoomFinished() { |
131 currentImage = null; | 137 currentImage = null; |
132 if (hex) { | 138 if (hex) { |
133 hex.textContent = ''; | 139 hex.textContent = ''; |
134 } | 140 } |
(...skipping 196 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
331 | 337 |
332 | 338 |
333 // Add the images to the history if we are on a workspace page. | 339 // Add the images to the history if we are on a workspace page. |
334 if (tryHistory && history) { | 340 if (tryHistory && history) { |
335 for (var i=0; i<history.length; i++) { | 341 for (var i=0; i<history.length; i++) { |
336 addToHistory(history[i].hash, '/i/'+history[i].hash+'.png'); | 342 addToHistory(history[i].hash, '/i/'+history[i].hash+'.png'); |
337 } | 343 } |
338 } | 344 } |
339 | 345 |
340 })(workspaceName); | 346 })(workspaceName); |
OLD | NEW |