1 <!DOCTYPE html>
2 <!--
3 * Copyright (c) 2010 The Chromium Authors. All rights reserved. Use of this
4 * source code is governed by a BSD-style license that can be found in the
5 * LICENSE file.
6 -->
7 <html
8 <head>
9 <script src="imageinfo/binaryajax.js"></script>
10 <script src="imageinfo/imageinfo.js" ></script>
11 <script src="imageinfo/exif.js" ></script>
12 <style>
13 body {
14 font: 14px Arial;
15 }
16
17 h1 {
18 margin: 30px 0 5px 0;
19 padding: 0;
20 }
21 code {
22 padding: 0;
23 margin: 5px 0;
24 display: block;
25 }
26 table {
27 border-collapse: collapse;
28 width: 100%;
29 margin: 15px 0;
30 }
31 td, th {
32 padding: 4px;
33 }
34 th {
35 text-align: left;
36 width: 130px;
37 }
38 tr {
39 display: none;
40 }
41 tr.rendered {
42 display: block;
43 }
44 tr.rendered:nth-child(odd) {
45 background: #eee;
46 }
47 #thumbnail {
48 position: fixed;
49 right: 20px;
50 top: 20px;
51 -webkit-box-shadow: 1px 1px 6px #000;
52 border: 4px solid #fff;
53 background: #fff;
54 }
55 #loader {
56 font: 30px Arial;
57 text-align: center;
58 padding: 100px;
59 }
60 </style>
61 <script>
62 /**
63 * Quick template rendering function. For each cell passed to it, check
64 * to see if the cell's text content is a key in the supplied data array.
65 * If yes, replace the cell's contents with the corresponding value and
66 * unhide the cell. If no, then remove the cell's parent (tr) from the
67 * DOM.
68 */
69 function renderCells(cells, data) {
70 for (var i = 0; i < cells.length; i++) {
71 var cell = cells[i];
72 var key = cell.innerText;
73 if (data[key]) {
74 cell.innerText = data[key];
75 cell.parentElement.className = "rendered";
76 } else {
77 cell.parentElement.parentElement.removeChild(cell.parentElement);
78 }
79 }
80 };
81
82 /**
83 * Returns true if the supplies object has no properties.
84 */
85 function isEmpty(obj) {
86 for (var key in obj) {
87 if (obj.hasOwnProperty(key)) {
88 return false;
89 }
90 }
91 return true;
92 };
93
94 /**
95 * Resizes the window to the current dimensions of this page's body.
96 */
97 function resizeWindow() {
98 window.setTimeout(function() {
99 chrome.tabs.getCurrent(function (tab) {
100 var newHeight = Math.min(document.body.offsetHeight + 140, 700);
101 chrome.windows.update(tab.windowId, {
102 height: newHeight,
103 width: 520
104 });
105 });
106 }, 150);
107 };
108
109 /**
110 * Called directly by the background page with information about the
111 * image. Outputs image data to the DOM.
112 */
113 function renderImageInfo(imageinfo) {
114 console.log('imageinfo', imageinfo);
115
116 var divloader = document.querySelector('#loader');
117 var divoutput = document.querySelector('#output');
118 divloader.style.display = "none";
119 divoutput.style.display = "block";
120
121 var divinfo = document.querySelector('#info');
122 var divexif = document.querySelector('#exif');
123
124 // Render general image data.
125 var datacells = divinfo.querySelectorAll('td');
126 renderCells(datacells, imageinfo);
127
128 // If EXIF data exists, unhide the EXIF table and render.
129 if (imageinfo['exif'] && !isEmpty(imageinfo['exif'])) {
130 divexif.style.display = 'block';
131 var exifcells = divexif.querySelectorAll('td');
132 renderCells(exifcells, imageinfo['exif']);
133 }
134 };
135
136 /**
137 * Renders the URL for the image, trimming if the length is too long.
138 */
139 function renderUrl(url) {
140 var divurl = document.querySelector('#url');
141 var urltext = (url.length < 45) ? url : url.substr(0, 42) + '...';
142 var anchor = document.createElement('a');
143 anchor.href = url;
144 anchor.innerText = urltext;
145 divurl.appendChild(anchor);
146 };
147
148 /**
149 * Renders a thumbnail view of the image.
150 */
151 function renderThumbnail(url) {
152 var canvas = document.querySelector('#thumbnail');
153 var context = canvas.getContext('2d');
154
155 canvas.width = 100;
156 canvas.height = 100;
157
158 var image = new Image();
159 image.addEventListener('load', function() {
160 var src_w = image.width;
161 var src_h = image.height;
162 var new_w = canvas.width;
163 var new_h = canvas.height;
164 var ratio = src_w / src_h;
165 if (src_w > src_h) {
166 new_h /= ratio;
167 } else {
168 new_w *= ratio;
169 }
170 canvas.width = new_w;
171 canvas.height = new_h;
172 context.drawImage(image, 0, 0, src_w, src_h, 0, 0, new_w, new_h);
173 });
174 image.src = url;
175 };
176
177 /**
178 * Returns a function which will handle displaying information about the
179 * image once the ImageInfo class has finished loading.
180 */
181 function getImageInfoHandler(url) {
182 return function() {
183 renderUrl(url);
184 renderThumbnail(url);
185 var imageinfo = ImageInfo.getAllFields(url);
186 renderImageInfo(imageinfo);
187 resizeWindow();
188 };
189 };
190
191
192
193
194 Loading...
loader.gif" />
195
196
278
286
287