☰

FC 3D Image Tool beta

Fotocommunity Image Tool for 3D Images beta

  1. // ==UserScript==
  2. // @name           FC 3D Image Tool beta
  3. // @namespace      http://userscripts.org/users/75950
  4. // @description    Fotocommunity Image Tool for 3D Images beta
  5. // @include        http://www.fotocommunity.de/*/display/*
  6. // @version 0.0.1.20140527152834
  7. // ==/UserScript==
  8.  
  9. window.addEventListener('load', startUp, false);
  10.  
  11. var ctx = null;
  12. var theImage = null;
  13. var flipped = false;
  14. var theCenter = 0;
  15. var linesshown = false;
  16. var isredcyan = false;
  17. var isinterlaced = false;
  18. var ismonochrom = false;
  19. var sfIsOriginal = 'original';
  20. var sfOffset = 0;
  21. var preselect = '';
  22.  
  23. function detectPage() {
  24. 	if(preselect != '') return preselect;
  25. 	if(location.href.indexOf('/5584/') != -1) return 'kreuz';
  26. 	if(location.href.indexOf('/5585/') != -1) return 'parallel';
  27. 	if(location.href.indexOf('/2616/') != -1) return 'anaglyph';
  28. 	return 'sonstige';
  29. }
  30.  
  31. function startUp() {
  32. 	switch(detectPage()) {
  33. 		case 'kreuz':
  34. 		case 'parallel':
  35. 		case 'anaglyph':	createCanvas();
  36. 							break;
  37. 		case 'sonstige':	createLinks();
  38. 							break;
  39. 		default:			break;
  40. 	}
  41. }
  42.  
  43. function createLinks() {
  44. 	var newSpan = document.createElement('span');
  45. 	newSpan.style.paddingRight = '5px';
  46. 	newSpan.id = 'fc_links_label';
  47. 	var theText = document.createTextNode('Bei diesem Foto handelt es sich um ein: ');
  48. 	newSpan.appendChild(theText);
  49. 	document.getElementById('display_foto').insertBefore(newSpan, document.getElementById('fc_image'));
  50.  
  51. 	newSpan = document.createElement('span');
  52. 	newSpan.style.paddingRight = '5px';
  53. 	newSpan.id = 'fc_links_kreuz';
  54. 	var newAnchor = document.createElement('a');
  55. 	newAnchor.href = '#';
  56. 	theText = document.createTextNode('Kreuzblickstereo');
  57. 	newAnchor.appendChild(theText);
  58. 	newSpan.appendChild(newAnchor);
  59. 	document.getElementById('display_foto').insertBefore(newSpan, document.getElementById('fc_image'));
  60. 	document.getElementById('fc_links_kreuz').addEventListener('click', function() {
  61. 		preselect = 'kreuz';
  62. 		removeLinks();
  63. 		createCanvas();
  64. 		return false;
  65. 	}, false);
  66. 	
  67. 	newSpan = document.createElement('span');
  68. 	newSpan.style.paddingRight = '5px';
  69. 	newSpan.id = 'fc_links_sep1';
  70. 	theText = document.createTextNode('/');
  71. 	newSpan.appendChild(theText);
  72. 	document.getElementById('display_foto').insertBefore(newSpan, document.getElementById('fc_image'));
  73.  
  74. 	newSpan = document.createElement('span');
  75. 	newSpan.style.paddingRight = '5px';
  76. 	newSpan.id = 'fc_links_parallel';
  77. 	newAnchor = document.createElement('a');
  78. 	newAnchor.href = '#';
  79. 	theText = document.createTextNode('Parallelblickstereo');
  80. 	newAnchor.appendChild(theText);
  81. 	newSpan.appendChild(newAnchor);
  82. 	document.getElementById('display_foto').insertBefore(newSpan, document.getElementById('fc_image'));
  83. 	document.getElementById('fc_links_parallel').addEventListener('click', function() {
  84. 		preselect = 'parallel';
  85. 		removeLinks();
  86. 		createCanvas();
  87. 		return false;
  88. 	}, false);
  89. 	
  90. 	newSpan = document.createElement('span');
  91. 	newSpan.style.paddingRight = '5px';
  92. 	newSpan.id = 'fc_links_sep2';
  93. 	theText = document.createTextNode('/');
  94. 	newSpan.appendChild(theText);
  95. 	document.getElementById('display_foto').insertBefore(newSpan, document.getElementById('fc_image'));
  96.  
  97. 	newSpan = document.createElement('span');
  98. 	newSpan.style.paddingRight = '5px';
  99. 	newSpan.id = 'fc_links_anaglyph';
  100. 	newAnchor = document.createElement('a');
  101. 	newAnchor.href = '#';
  102. 	theText = document.createTextNode('Anaglyphenstereo');
  103. 	newAnchor.appendChild(theText);
  104. 	newSpan.appendChild(newAnchor);
  105. 	document.getElementById('display_foto').insertBefore(newSpan, document.getElementById('fc_image'));
  106. 	document.getElementById('fc_links_anaglyph').addEventListener('click', function() {
  107. 		preselect = 'anaglyph';
  108. 		removeLinks();
  109. 		createCanvas();
  110. 		return false;
  111. 	}, false);
  112. }
  113.  
  114. function removeLinks() {
  115. 	document.getElementById('fc_links_label').parentNode.removeChild(document.getElementById('fc_links_label'));
  116. 	document.getElementById('fc_links_kreuz').parentNode.removeChild(document.getElementById('fc_links_kreuz'));
  117. 	document.getElementById('fc_links_sep1').parentNode.removeChild(document.getElementById('fc_links_sep1'));
  118. 	document.getElementById('fc_links_parallel').parentNode.removeChild(document.getElementById('fc_links_parallel'));
  119. 	document.getElementById('fc_links_sep2').parentNode.removeChild(document.getElementById('fc_links_sep2'));
  120. 	document.getElementById('fc_links_anaglyph').parentNode.removeChild(document.getElementById('fc_links_anaglyph'));
  121. }
  122.  
  123. function createCanvas() {
  124. 	theImagesrc = document.getElementById('fc_image').src;
  125. 	
  126. 	GM_xmlhttpRequest({
  127. 	  method: 'GET',
  128. 	  url: theImagesrc,
  129. 	  overrideMimeType: 'text/plain; charset=x-user-defined',
  130. 	  onload: function ( xhr ) {
  131. 		var data = '';
  132. 		theImage = new Image();
  133.  
  134. 		  for ( var i = 0; i < xhr.responseText.length; i++ ) data += String.fromCharCode( ( xhr.responseText[ i ].charCodeAt(0) & 0xff ) );
  135. 		// Convert raw data to base64.
  136. 		data = btoa( data );
  137. 		// Write Base64 data to a image
  138. 		theImage.src = 'data:image/jpg;base64,' + data; // This will change depending on image type
  139.  
  140. 		// Listener fires when image is ready
  141. 		theImage.addEventListener( 'load', function() {
  142. 			GM_addStyle('canvas {position: relative; text-align:center; left: '+window.getComputedStyle(document.getElementById('fc_image'),false).left+';} #showwait {position: fixed; top: 200px; left: 490px; padding: 3px; width: 100px; border: 1px solid black; z-index: 10000; color: black; background-color: white;}');
  143. 			var newCanvas = unsafeWindow.document.createElement('canvas');
  144. 			newCanvas.id = 'fc_image_canvas';
  145. 			newCanvas.width = document.getElementById('fc_image').width;
  146. 			newCanvas.height = document.getElementById('fc_image').height;
  147. 			if(detectPage() == 'anaglyph') newCanvas.style.display = 'none';
  148. 			unsafeWindow.document.getElementById('display_foto').insertBefore(newCanvas, unsafeWindow.document.getElementById('fc_image'));
  149. 			var canvas = unsafeWindow.document.getElementById('fc_image_canvas');  
  150. 			ctx = canvas.getContext('2d');
  151. 			ctx.drawImage(theImage, 0, 0 );
  152. 			theCenter = Math.floor(theImage.width / 2);
  153. 		}, false );
  154.  
  155. 	  }
  156. 	});
  157.  
  158. 	if(detectPage() != 'anaglyph') {
  159. 		document.getElementById('fc_image').style.display = 'none';
  160. 		
  161. 		var theButton = document.createElement('input');
  162. 		theButton.id = 'fc_image_flip';
  163. 		theButton.type = 'button';
  164. 		if(detectPage() == 'kreuz') {
  165. 			theButton.value = '-> Parallelblick';
  166. 		} else {
  167. 			theButton.value = '-> Kreuzblick';
  168. 		}
  169. 		document.getElementById('display_foto').insertBefore(theButton, document.getElementById('fc_image'));
  170. 		document.getElementById('fc_image_flip').addEventListener('click', flipImage, false);
  171.  
  172. 		theButton = document.createElement('input');
  173. 		theButton.id = 'fc_image_showline';
  174. 		theButton.type = 'button';
  175. 		theButton.value = 'Hilfslinien';
  176. 		document.getElementById('display_foto').insertBefore(theButton, document.getElementById('fc_image'));
  177. 		document.getElementById('fc_image_showline').addEventListener('click', showLine, false);
  178.  
  179. 		theButton = document.createElement('input');
  180. 		theButton.id = 'fc_image_redcyan';
  181. 		theButton.type = 'button';
  182. 		theButton.style.marginLeft = '10px';
  183. 		theButton.value = 'Red/Cyan';
  184. 		document.getElementById('display_foto').insertBefore(theButton, document.getElementById('fc_image'));
  185. 		document.getElementById('fc_image_redcyan').addEventListener('click', showWait, false);
  186. 		
  187. 		var theCheckbox = document.createElement('input');
  188. 		theCheckbox.id = 'fc_image_halftone';
  189. 		theCheckbox.type = 'checkbox';
  190. 		theCheckbox.checked = false;
  191. 		document.getElementById('display_foto').insertBefore(theCheckbox, document.getElementById('fc_image'));
  192. 		document.getElementById('fc_image_halftone').addEventListener('click', toggleHalftone, false);
  193.  
  194. 		var theSpan = document.createElement('span');
  195. 		theSpan.id = 'fc_image_halftonelabel';
  196. 		var theText = document.createTextNode('Halbton');
  197. 		theSpan.appendChild(theText);
  198. 		document.getElementById('display_foto').insertBefore(theSpan, document.getElementById('fc_image'));
  199.  
  200. 		theButton = document.createElement('input');
  201. 		theButton.id = 'fc_image_interlaced';
  202. 		theButton.type = 'button';
  203. 		theButton.style.marginLeft = '10px';
  204. 		theButton.value = 'Zalman Interlaced';
  205. 		document.getElementById('display_foto').insertBefore(theButton, document.getElementById('fc_image'));
  206. 		document.getElementById('fc_image_interlaced').addEventListener('click', showWaitInterlaced, false);
  207. 		
  208. 		theCheckbox = document.createElement('input');
  209. 		theCheckbox.id = 'fc_image_interlaceswitch';
  210. 		theCheckbox.type = 'checkbox';
  211. 		theCheckbox.checked = false;
  212. 		document.getElementById('display_foto').insertBefore(theCheckbox, document.getElementById('fc_image'));
  213. 		document.getElementById('fc_image_interlaceswitch').addEventListener('click', toggleInterlace, false);
  214.  
  215. 		theSpan = document.createElement('span');
  216. 		theSpan.id = 'fc_image_iswitchlabel';
  217. 		theText = document.createTextNode('gerade/ungerade tauschen');
  218. 		theSpan.appendChild(theText);
  219. 		document.getElementById('display_foto').insertBefore(theSpan, document.getElementById('fc_image'));
  220.  
  221. 		var newDiv = document.createElement('div');
  222. 		newDiv.id = 'showwait';
  223. 		var theText = document.createTextNode('Bitte warten...');
  224. 		newDiv.appendChild(theText);
  225. 		document.getElementById('display_foto').appendChild(newDiv);
  226. 		document.getElementById('showwait').style.display = 'none';
  227. 	} else {
  228. 		var theSpan = document.createElement('span');
  229. 		theSpan.id = 'fc_image_sfOffsetLabel';
  230. 		theSpan.style.paddingRight = '5px';
  231. 		var theText = document.createTextNode('Horiz. Verschiebung: ');
  232. 		theSpan.appendChild(theText);
  233. 		document.getElementById('display_foto').insertBefore(theSpan, document.getElementById('fc_image'));
  234. 		
  235. 		theSpan = document.createElement('span');
  236. 		theSpan.id = 'fc_image_sfOffset';
  237. 		theSpan.style.paddingRight = '5px';
  238. 		theText = document.createTextNode(sfOffset.toString());
  239. 		theSpan.appendChild(theText);
  240. 		document.getElementById('display_foto').insertBefore(theSpan, document.getElementById('fc_image'));
  241. 		
  242. 		var theButton = document.createElement('input');
  243. 		theButton.id = 'fc_image_monokreuz';
  244. 		theButton.type = 'button';
  245. 		theButton.value = 'Monochrom Kreuzblick';
  246. 		document.getElementById('display_foto').insertBefore(theButton, document.getElementById('fc_image'));
  247. 		document.getElementById('fc_image_monokreuz').addEventListener('click', showWaitMono, false);
  248.  
  249. 		theButton = document.createElement('input');
  250. 		theButton.id = 'fc_image_scheinfenster';
  251. 		theButton.type = 'button';
  252. 		theButton.value = 'Scheinfenster';
  253. 		document.getElementById('display_foto').insertBefore(theButton, document.getElementById('fc_image'));
  254. 		document.getElementById('fc_image_scheinfenster').addEventListener('click', scheinFenster, false);
  255.  
  256. 		var newDiv = document.createElement('div');
  257. 		newDiv.id = 'showwait';
  258. 		var theText = document.createTextNode('Bitte warten...');
  259. 		newDiv.appendChild(theText);
  260. 		document.getElementById('display_foto').appendChild(newDiv);
  261. 		document.getElementById('showwait').style.display = 'none';
  262. 	}
  263. }
  264.  
  265. function scheinFenster() {
  266. 	if(!ctx) return;
  267. 	if(sfIsOriginal=='original') {
  268. 		document.getElementById('fc_image').style.display = 'none';
  269. 		document.getElementById('fc_image_monokreuz').style.display = 'none';
  270. 		document.getElementById('fc_image_canvas').style.display = '';
  271. 		var theButton = document.createElement('input');
  272. 		theButton.id = 'fc_image_ziehen';
  273. 		theButton.type = 'button';
  274. 		theButton.value = 'Scheinfenster ziehen';
  275. 		document.getElementById('display_foto').insertBefore(theButton, document.getElementById('fc_image_canvas'));
  276. 		document.getElementById('fc_image_ziehen').addEventListener('click', sfZiehen, false);
  277.  
  278. 		theButton = document.createElement('input');
  279. 		theButton.id = 'fc_image_druecken';
  280. 		theButton.type = 'button';
  281. 		theButton.value = 'Scheinfenster druecken';
  282. 		document.getElementById('display_foto').insertBefore(theButton, document.getElementById('fc_image_canvas'));
  283. 		document.getElementById('fc_image_druecken').addEventListener('click', sfDruecken, false);
  284. 		
  285. 		theButton = document.createElement('input');
  286. 		theButton.id = 'fc_image_reset';
  287. 		theButton.type = 'button';
  288. 		theButton.value = 'Reset';
  289. 		document.getElementById('display_foto').insertBefore(theButton, document.getElementById('fc_image_canvas'));
  290. 		document.getElementById('fc_image_reset').addEventListener('click', sfReset, false);
  291.  
  292. 		sfDrawLines();
  293. 		
  294. 		document.getElementById('fc_image_scheinfenster').value = 'Anwenden';
  295. 		sfIsOriginal = 'verschoben';
  296. 	} else {
  297. 		if(sfIsOriginal == 'verschoben') {
  298. 			ctx.drawImage(theImage, 0, 0);
  299. 			document.getElementById('showwait').style.display = '';
  300. 			window.setTimeout(redrawAnaglyph, 300);
  301. 		} else {
  302. 			// neuanaglyph (Button Original gedrueckt)
  303. 			document.getElementById('fc_image_scheinfenster').value = 'Scheinfenster';
  304. 			document.getElementById('fc_image').style.display = '';
  305. 			document.getElementById('fc_image_monokreuz').style.display = '';
  306. 			document.getElementById('fc_image_canvas').style.display = 'none';
  307. 			document.getElementById('fc_image_canvas2').parentNode.removeChild(document.getElementById('fc_image_canvas2'));
  308. 			sfIsOriginal = 'original';
  309. 		}
  310. 	}
  311. }
  312.  
  313. function redrawAnaglyph() {
  314. 	// Scheinfensterverschiebung anwenden
  315. 	if(sfOffset!=0) {
  316. 		var newCanvas = unsafeWindow.document.createElement('canvas');
  317. 		newCanvas.id = 'fc_image_canvas2';
  318. 		newCanvas.width = theImage.width*2;
  319. 		newCanvas.height = theImage.height;
  320. 		unsafeWindow.document.getElementById('display_foto').insertBefore(newCanvas, unsafeWindow.document.getElementById('fc_image_canvas'));
  321. 		var canvas = unsafeWindow.document.getElementById('fc_image_canvas2');  
  322. 		ctx2 = canvas.getContext('2d');
  323. 		if(sfOffset<0) {
  324. 			ctx2.drawImage(unsafeWindow.document.getElementById('fc_image_canvas'), theImage.width, 0); // rechts
  325. 			ctx2.drawImage(unsafeWindow.document.getElementById('fc_image_canvas'), sfOffset, 0); // links
  326. 			var theImageData_links = ctx2.getImageData(0, 0, theImage.width+sfOffset, theImage.height);
  327. 			var theImageData_rechts = ctx2.getImageData(theImage.width, 0, theImage.width+sfOffset, theImage.height);
  328. 		} else {
  329. 			ctx2.drawImage(unsafeWindow.document.getElementById('fc_image_canvas'), theImage.width+sfOffset, 0); // rechts
  330. 			ctx2.drawImage(unsafeWindow.document.getElementById('fc_image_canvas'), sfOffset, 0); // links
  331. 			var theImageData_links = ctx2.getImageData(sfOffset, 0, theImage.width-2*sfOffset, theImage.height);
  332. 			var theImageData_rechts = ctx2.getImageData(theImage.width+2*sfOffset, 0, theImage.width-2*sfOffset, theImage.height);
  333. 		}
  334. 		var pixels_links = theImageData_links.data;
  335. 		var pixels_rechts = theImageData_rechts.data;
  336. 		
  337. 		for (var i = 0, n = pixels_links.length; i < n; i += 4) {
  338. 			pixels_links[i] = pixels_links[i]; // rot vom linken Bild, blau und gruen vom rechten
  339. 			pixels_links[i+1] = pixels_rechts[i+1];
  340. 			pixels_links[i+2] = pixels_rechts[i+2];
  341.  
  342. 			// Rechtes Teilbild in FC Farben
  343. 			pixels_rechts[i] = 34;
  344. 			pixels_rechts[i+1] = 34;
  345. 			pixels_rechts[i+2] = 34;
  346. 		}
  347. 		// Draw the ImageData at the given (x,y) coordinates.
  348. 		ctx2.putImageData(theImageData_links, 0, 0);
  349. 		ctx2.putImageData(theImageData_rechts, theImage.width, 0);
  350. 		delete theImageData_links;
  351. 		theImageData_links = null;
  352. 		delete theImageData_rechts;
  353. 		theImageData_rechts = null;
  354.  
  355. 		document.getElementById('showwait').style.display = 'none';
  356. 		sfIsOriginal = 'neuanaglyph';
  357. 		sfRemoveButtons();
  358. 		document.getElementById('fc_image_scheinfenster').value = 'Original';
  359. 		document.getElementById('fc_image').style.display = 'none';
  360. 		document.getElementById('fc_image_monokreuz').style.display = 'none';
  361. 		document.getElementById('fc_image_canvas').style.display = 'none';
  362. 	} else {
  363. 		document.getElementById('showwait').style.display = 'none';
  364. 		sfIsOriginal = 'original';
  365. 		sfRemoveButtons();
  366. 		document.getElementById('fc_image_scheinfenster').value = 'Scheinfenster';
  367. 		document.getElementById('fc_image').style.display = '';
  368. 		document.getElementById('fc_image_monokreuz').style.display = '';
  369. 		document.getElementById('fc_image_canvas').style.display = 'none';
  370. 	}
  371. }
  372.  
  373. function sfDrawLines() {
  374. 	if(sfOffset>=0) {
  375. 		// linker Rand
  376. 		ctx.beginPath();
  377. 		ctx.moveTo(sfOffset, 0);
  378. 		ctx.lineTo(sfOffset, theImage.height);
  379. 		ctx.closePath();
  380. 		ctx.strokeStyle = "rgba(255, 0, 0, 1)";
  381. 		ctx.stroke();
  382. 	}
  383. 	if(sfOffset<=0) {
  384. 		// rechter Rand
  385. 		ctx.beginPath();
  386. 		ctx.moveTo(theImage.width+sfOffset, 0);
  387. 		ctx.lineTo(theImage.width+sfOffset, theImage.height);
  388. 		ctx.closePath();
  389. 		ctx.strokeStyle = "rgba(255, 0, 0, 1)";
  390. 		ctx.stroke();
  391. 	}
  392. 	document.getElementById('fc_image_sfOffset').textContent = sfOffset.toString();
  393. }
  394.  
  395. function sfRemoveButtons() {
  396. 	document.getElementById('fc_image_scheinfenster').value = 'Scheinfenster';
  397. 	var theButton = document.getElementById('fc_image_ziehen');
  398. 	document.getElementById('display_foto').removeChild(theButton);
  399. 	theButton = document.getElementById('fc_image_druecken');
  400. 	document.getElementById('display_foto').removeChild(theButton);
  401. 	theButton = document.getElementById('fc_image_reset');
  402. 	document.getElementById('display_foto').removeChild(theButton);
  403. 	document.getElementById('fc_image').style.display = '';
  404. 	document.getElementById('fc_image_monokreuz').style.display = '';
  405. 	document.getElementById('fc_image_canvas').style.display = 'none';
  406. }
  407.  
  408. function sfZiehen() {
  409. 	sfOffset--;
  410. 	ctx.drawImage(theImage, 0, 0);
  411. 	sfDrawLines();
  412. }
  413.  
  414. function sfDruecken() {
  415. 	sfOffset++;
  416. 	ctx.drawImage(theImage, 0, 0);
  417. 	sfDrawLines();
  418. }
  419.  
  420. function sfReset() {
  421. 	sfOffset = 0;
  422. 	ctx.drawImage(theImage, 0, 0);
  423. 	sfDrawLines();
  424. }
  425.  
  426. function showWaitMono() {
  427. 	if(!ctx) return;
  428. 	document.getElementById('showwait').style.display = 'block';
  429. 	window.setTimeout(monoKreuz, 300);
  430. }
  431.  
  432. function monoKreuz() {
  433. 	if(!ismonochrom) {
  434. 		document.getElementById('fc_image').style.display = 'none';
  435. 		document.getElementById('fc_image_scheinfenster').style.display = 'none';
  436. 		var newCanvas = unsafeWindow.document.createElement('canvas');
  437. 		newCanvas.id = 'fc_image_canvas2';
  438. 		newCanvas.width = theImage.width+20;
  439. 		newCanvas.height = Math.floor(theImage.height/2)+1;
  440. 		unsafeWindow.document.getElementById('display_foto').insertBefore(newCanvas, unsafeWindow.document.getElementById('fc_image_canvas'));
  441. 		var canvas = unsafeWindow.document.getElementById('fc_image_canvas2');  
  442. 		ctx2 = canvas.getContext('2d');
  443. 		ctx2.drawImage(document.getElementById('fc_image_canvas'), 0, 0, Math.floor(theImage.width/2), Math.floor(theImage.height/2) );
  444. 		ctx2.drawImage(document.getElementById('fc_image_canvas'), Math.floor(theImage.width/2)+20, 0, Math.floor(theImage.width/2), Math.floor(theImage.height/2));
  445. 		var theImageData = ctx2.getImageData(0, 0, Math.floor(theImage.width/2), Math.floor(theImage.height/2));
  446. 		var pixels = theImageData.data;
  447. 		
  448. 		for (var i = 0, n = pixels.length; i < n; i += 4) {
  449. 			var theGray = Math.floor((pixels[i+1]+pixels[i+2])/2);
  450. 			pixels[i] = theGray;
  451. 			pixels[i+1] = theGray;
  452. 			pixels[i+2] = theGray;
  453. 		}
  454. 		ctx2.putImageData(theImageData, 0, 0);
  455. 		delete theImageData;
  456. 		theImageData = null;
  457.  
  458. 		theImageData = ctx2.getImageData(Math.floor(theImage.width/2)+20, 0, Math.floor(theImage.width/2), Math.floor(theImage.height/2));
  459. 		pixels = theImageData.data;
  460. 		
  461. 		for (var i = 0, n = pixels.length; i < n; i += 4) {
  462. 			pixels[i+1] = pixels[i];
  463. 			pixels[i+2] = pixels[i];
  464. 		}
  465. 		ctx2.putImageData(theImageData, Math.floor(theImage.width/2)+20, 0);
  466. 		delete theImageData;
  467. 		theImageData = null;
  468. 		ismonochrom = true;
  469. 		document.getElementById('fc_image_monokreuz').value = 'Original';
  470. 	} else {
  471. 		var CanvasToDelete = document.getElementById('fc_image_canvas2');
  472. 		CanvasToDelete.parentNode.removeChild(CanvasToDelete);
  473. 		document.getElementById('fc_image').style.display = '';
  474. 		document.getElementById('fc_image_scheinfenster').style.display = '';
  475. 		ismonochrom = false;
  476. 		document.getElementById('fc_image_monokreuz').value = 'Monochrom Kreuzblick';
  477. 	}
  478. 	document.getElementById('showwait').style.display = 'none';
  479. }
  480.  
  481. function toggleHalftone() {
  482. 	isredcyan = false;
  483. }
  484.  
  485. function toggleInterlace() {
  486. 	isinterlaced = false;
  487. }
  488.  
  489. function flipImage() {
  490. 	if(!ctx) return;
  491. 	if(linesshown) {
  492. 		RemoveButtons();
  493. 		linesshown = false;
  494. 	}
  495. 	if(!flipped) {
  496. 		// Paste image two times
  497. 		// First image is moved half way to the left
  498. 		// second image is moved half way to the right
  499. 		ctx.drawImage(theImage, -theCenter, 0);
  500. 		ctx.drawImage(theImage, theCenter, 0);
  501. 		flipped = true;
  502. 	} else {
  503. 		ctx.drawImage(theImage, 0, 0);
  504. 		flipped = false;
  505. 	}
  506. 	ButtonText();
  507. 	isredcyan = false;
  508. 	isinterlaced = false;
  509. }
  510.  
  511. function ButtonText() {
  512. 	var theButton = document.getElementById('fc_image_flip');
  513. 	if(detectPage() == 'kreuz') {
  514. 		if(flipped) {
  515. 			theButton.value = '-> Kreuzblick';
  516. 		} else {
  517. 			theButton.value = '-> Parallelblick';
  518. 		}
  519. 	} else {
  520. 		if(flipped) {
  521. 			theButton.value = '-> Parallelblick';
  522. 		} else {
  523. 			theButton.value = '-> Kreuzblick';
  524. 		}
  525. 	}
  526. }
  527.  
  528. function showLine() {
  529. 	if(!ctx) return;
  530. 	ctx.drawImage(theImage, 0, 0);
  531. 	flipped = false;
  532. 	ButtonText();
  533. 	isredcyan = false;
  534. 	isinterlaced = false;
  535. 	if(!linesshown) {
  536. 		// linker Rand
  537. 		ctx.beginPath();
  538. 		ctx.moveTo(0, 0);
  539. 		ctx.lineTo(0, theImage.height);
  540. 		ctx.closePath();
  541. 		ctx.strokeStyle = "rgba(0, 255, 0, 0.5)";
  542. 		ctx.stroke();
  543. 		// rechter Rand
  544. 		ctx.beginPath();
  545. 		ctx.moveTo(theImage.width, 0);
  546. 		ctx.lineTo(theImage.width, theImage.height);
  547. 		ctx.closePath();
  548. 		ctx.strokeStyle = "rgba(0, 255, 0, 0.5)";
  549. 		ctx.stroke();
  550. 		// Mitte
  551. 		ctx.beginPath();
  552. 		ctx.moveTo(theCenter, 0);
  553. 		ctx.lineTo(theCenter, theImage.height);
  554. 		ctx.closePath();
  555. 		ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
  556. 		ctx.stroke();
  557.  
  558. 		var theButton = document.createElement('input');
  559. 		theButton.id = 'fc_image_left';
  560. 		theButton.type = 'button';
  561. 		theButton.value = '<';
  562. 		document.getElementById('display_foto').insertBefore(theButton, document.getElementById('fc_image_redcyan'));
  563. 		document.getElementById('fc_image_left').addEventListener('click', moveLineLeft, false);
  564.  
  565. 		theButton = document.createElement('input');
  566. 		theButton.id = 'fc_image_right';
  567. 		theButton.type = 'button';
  568. 		theButton.value = '>';
  569. 		document.getElementById('display_foto').insertBefore(theButton, document.getElementById('fc_image_redcyan'));
  570. 		document.getElementById('fc_image_right').addEventListener('click', moveLineRight, false);
  571. 		
  572. 		theButton = document.createElement('input');
  573. 		theButton.id = 'fc_image_center';
  574. 		theButton.type = 'button';
  575. 		theButton.value = 'Center';
  576. 		document.getElementById('display_foto').insertBefore(theButton, document.getElementById('fc_image_redcyan'));
  577. 		document.getElementById('fc_image_center').addEventListener('click', moveLineCenter, false);
  578.  
  579. 		document.getElementById('fc_image_showline').value = 'Hilfslinien ausblenden';
  580. 		linesshown = true;
  581. 	} else {
  582. 		RemoveButtons();
  583. 		linesshown = false;
  584. 	}
  585. }
  586.  
  587. function RemoveButtons() {
  588. 	document.getElementById('fc_image_showline').value = 'Hilfslinien';
  589. 	var theButton = document.getElementById('fc_image_left');
  590. 	document.getElementById('display_foto').removeChild(theButton);
  591. 	theButton = document.getElementById('fc_image_right');
  592. 	document.getElementById('display_foto').removeChild(theButton);
  593. 	theButton = document.getElementById('fc_image_center');
  594. 	document.getElementById('display_foto').removeChild(theButton);
  595. }
  596.  
  597. function moveLineLeft() {
  598. 	ctx.drawImage(theImage, 0, 0);
  599. 	theCenter--;
  600. 	if(theCenter<0) theCenter = 0;
  601. 	// linker Rand
  602. 	ctx.beginPath();
  603. 	ctx.moveTo(0, 0);
  604. 	ctx.lineTo(0, theImage.height);
  605. 	ctx.closePath();
  606. 	ctx.strokeStyle = "rgba(0, 255, 0, 0.5)";
  607. 	ctx.stroke();
  608. 	// rechter Rand
  609. 	ctx.beginPath();
  610. 	ctx.moveTo(theImage.width, 0);
  611. 	ctx.lineTo(theImage.width, theImage.height);
  612. 	ctx.closePath();
  613. 	ctx.strokeStyle = "rgba(0, 255, 0, 0.5)";
  614. 	ctx.stroke();
  615. 	// Mitte
  616. 	ctx.beginPath();
  617. 	ctx.moveTo(theCenter, 0);
  618. 	ctx.lineTo(theCenter, theImage.height);
  619. 	ctx.closePath();
  620. 	ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
  621. 	ctx.stroke();
  622. }
  623.  
  624. function moveLineRight() {
  625. 	ctx.drawImage(theImage, 0, 0);
  626. 	theCenter++;
  627. 	if(theCenter>(theImage.width-1)) theCenter = theImage.width-1;
  628. 	// linker Rand
  629. 	ctx.beginPath();
  630. 	ctx.moveTo(0, 0);
  631. 	ctx.lineTo(0, theImage.height);
  632. 	ctx.closePath();
  633. 	ctx.strokeStyle = "rgba(0, 255, 0, 0.5)";
  634. 	ctx.stroke();
  635. 	// rechter Rand
  636. 	ctx.beginPath();
  637. 	ctx.moveTo(theImage.width, 0);
  638. 	ctx.lineTo(theImage.width, theImage.height);
  639. 	ctx.closePath();
  640. 	ctx.strokeStyle = "rgba(0, 255, 0, 0.5)";
  641. 	ctx.stroke();
  642. 	// Mitte
  643. 	ctx.beginPath();
  644. 	ctx.moveTo(theCenter, 0);
  645. 	ctx.lineTo(theCenter, theImage.height);
  646. 	ctx.closePath();
  647. 	ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
  648. 	ctx.stroke();
  649. }
  650.  
  651. function moveLineCenter() {
  652. 	ctx.drawImage(theImage, 0, 0);
  653. 	theCenter = Math.floor(theImage.width / 2);
  654. 	// linker Rand
  655. 	ctx.beginPath();
  656. 	ctx.moveTo(0, 0);
  657. 	ctx.lineTo(0, theImage.height);
  658. 	ctx.closePath();
  659. 	ctx.strokeStyle = "rgba(0, 255, 0, 0.5)";
  660. 	ctx.stroke();
  661. 	// rechter Rand
  662. 	ctx.beginPath();
  663. 	ctx.moveTo(theImage.width, 0);
  664. 	ctx.lineTo(theImage.width, theImage.height);
  665. 	ctx.closePath();
  666. 	ctx.strokeStyle = "rgba(0, 255, 0, 0.5)";
  667. 	ctx.stroke();
  668. 	// Mitte
  669. 	ctx.beginPath();
  670. 	ctx.moveTo(theCenter, 0);
  671. 	ctx.lineTo(theCenter, theImage.height);
  672. 	ctx.closePath();
  673. 	ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
  674. 	ctx.stroke();
  675. }
  676.  
  677. function showWait() {
  678. 	if(!ctx) return;
  679. 	if(isredcyan) return;
  680. 	document.getElementById('showwait').style.display = 'block';
  681. 	var isHalftone = document.getElementById('fc_image_halftone').checked;
  682. 	if(!isHalftone) {
  683. 		window.setTimeout(makeAnaglyph, 300);
  684. 	} else {
  685. 		window.setTimeout(HalftoneAnaglyph, 300);
  686. 	}
  687. }
  688.  
  689. function makeAnaglyph() {
  690. 	ctx.drawImage(theImage, 0, 0);
  691. 	flipped = false;
  692. 	ButtonText();
  693. 	isredcyan = true;
  694. 	isinterlaced = false;
  695. 	if(linesshown) {
  696. 		RemoveButtons();
  697. 		linesshown = false;
  698. 	}
  699. 	
  700. 	var centerDiff = theCenter - Math.floor(theImage.width / 2);
  701. 	
  702. 	if(detectPage() == 'kreuz') {
  703. 		// Kreuzblick
  704. 		// links muss rot weg, rechts muss gruen/blau weg
  705. 		if(centerDiff<=0) {
  706. 			var theImageData_links = ctx.getImageData(0, 0, theCenter, theImage.height);
  707. 			var theImageData_rechts = ctx.getImageData(theCenter, 0, theCenter, theImage.height);
  708. 		} else {
  709. 			var theImageData_links = ctx.getImageData(0, 0, theCenter-(centerDiff*2), theImage.height);
  710. 			var theImageData_rechts = ctx.getImageData(theCenter, 0, theCenter-(centerDiff*2), theImage.height);
  711. 		}
  712. 		var pixels_links = theImageData_links.data;
  713. 		var pixels_rechts = theImageData_rechts.data;
  714. 		
  715. 		for (var i = 0, n = pixels_links.length; i < n; i += 4) {
  716. 			pixels_links[i] = pixels_rechts[i]; // rot vom rechten Bild blau und gruen vom linken
  717.  
  718. 			// Rechtes Teilbild in FC Farben
  719. 			pixels_rechts[i] = 34;
  720. 			pixels_rechts[i+1] = 34;
  721. 			pixels_rechts[i+2] = 34;
  722. 		}
  723. 		// Draw the ImageData at the given (x,y) coordinates.
  724. 		ctx.putImageData(theImageData_links, 0, 0);
  725. 		ctx.putImageData(theImageData_rechts, theCenter, 0);
  726. 		delete theImageData_links;
  727. 		theImageData_links = null;
  728. 		delete theImageData_rechts;
  729. 		theImageData_rechts = null;
  730. 	} else {
  731. 		// Parallelblick
  732. 		// links muss gruen/blau weg, rechts muss rot weg
  733. 		if(centerDiff<=0) {
  734. 			var theImageData_links = ctx.getImageData(0, 0, theCenter, theImage.height);
  735. 			var theImageData_rechts = ctx.getImageData(theCenter, 0, theCenter, theImage.height);
  736. 		} else {
  737. 			var theImageData_links = ctx.getImageData(0, 0, theCenter-(centerDiff*2), theImage.height);
  738. 			var theImageData_rechts = ctx.getImageData(theCenter, 0, theCenter-(centerDiff*2), theImage.height);
  739. 		}
  740. 		var pixels_links = theImageData_links.data;
  741. 		var pixels_rechts = theImageData_rechts.data;
  742. 		
  743. 		for (var i = 0, n = pixels_links.length; i < n; i += 4) {
  744. 			pixels_links[i] = pixels_links[i]; // rot vom linken Bild, blau und gruen vom rechten
  745. 			pixels_links[i+1] = pixels_rechts[i+1];
  746. 			pixels_links[i+2] = pixels_rechts[i+2];
  747.  
  748. 			// Rechtes Teilbild in FC Farben
  749. 			pixels_rechts[i] = 34;
  750. 			pixels_rechts[i+1] = 34;
  751. 			pixels_rechts[i+2] = 34;
  752. 		}
  753. 		// Draw the ImageData at the given (x,y) coordinates.
  754. 		ctx.putImageData(theImageData_links, 0, 0);
  755. 		ctx.putImageData(theImageData_rechts, theCenter, 0);
  756. 		delete theImageData_links;
  757. 		theImageData_links = null;
  758. 		delete theImageData_rechts;
  759. 		theImageData_rechts = null;
  760. 	}
  761. 	document.getElementById('showwait').style.display = 'none';
  762. }
  763.  
  764. function HalftoneAnaglyph() {
  765. 	// A halftone algorithm from http://3dtv.at/Knowhow/AnaglyphComparison_en.aspx
  766. 	ctx.drawImage(theImage, 0, 0);
  767. 	flipped = false;
  768. 	ButtonText();
  769. 	isredcyan = true;
  770. 	isinterlaced = false;
  771. 	if(linesshown) {
  772. 		RemoveButtons();
  773. 		linesshown = false;
  774. 	}
  775. 	
  776. 	var centerDiff = theCenter - Math.floor(theImage.width / 2);
  777. 	
  778. 	if(detectPage() == 'kreuz') {
  779. 		// Kreuzblick
  780. 		// links muss rot weg, rechts muss gruen/blau weg
  781. 		if(centerDiff<=0) {
  782. 			var theImageData_links = ctx.getImageData(0, 0, theCenter, theImage.height);
  783. 			var theImageData_rechts = ctx.getImageData(theCenter, 0, theCenter, theImage.height);
  784. 		} else {
  785. 			var theImageData_links = ctx.getImageData(0, 0, theCenter-(centerDiff*2), theImage.height);
  786. 			var theImageData_rechts = ctx.getImageData(theCenter, 0, theCenter-(centerDiff*2), theImage.height);
  787. 		}
  788. 		var pixels_links = theImageData_links.data;
  789. 		var pixels_rechts = theImageData_rechts.data;
  790. 		
  791. 		for (var i = 0, n = pixels_links.length; i < n; i += 4) {
  792. 			// pixels_links[i] = 0.7*pixels_rechts[i+1] + 0.3*pixels_rechts[i+2]; // rot halftone Wimmer
  793. 			pixels_links[i] = 0.299*pixels_rechts[i] + 0.587*pixels_rechts[i+1] + 0.114*pixels_rechts[i+2]; // rot halftone common
  794.  
  795. 			// Rechtes Teilbild in FC Farben
  796. 			pixels_rechts[i] = 34;
  797. 			pixels_rechts[i+1] = 34;
  798. 			pixels_rechts[i+2] = 34;
  799. 		}
  800. 		// Draw the ImageData at the given (x,y) coordinates.
  801. 		ctx.putImageData(theImageData_links, 0, 0);
  802. 		ctx.putImageData(theImageData_rechts, theCenter, 0);
  803. 		delete theImageData_links;
  804. 		theImageData_links = null;
  805. 		delete theImageData_rechts;
  806. 		theImageData_rechts = null;
  807. 	} else {
  808. 		// Parallelblick
  809. 		// links muss gruen/blau weg, rechts muss rot weg
  810. 		if(centerDiff<=0) {
  811. 			var theImageData_links = ctx.getImageData(0, 0, theCenter, theImage.height);
  812. 			var theImageData_rechts = ctx.getImageData(theCenter, 0, theCenter, theImage.height);
  813. 		} else {
  814. 			var theImageData_links = ctx.getImageData(0, 0, theCenter-(centerDiff*2), theImage.height);
  815. 			var theImageData_rechts = ctx.getImageData(theCenter, 0, theCenter-(centerDiff*2), theImage.height);
  816. 		}
  817. 		var pixels_links = theImageData_links.data;
  818. 		var pixels_rechts = theImageData_rechts.data;
  819. 		
  820. 		for (var i = 0, n = pixels_links.length; i < n; i += 4) {
  821. 			// pixels_links[i] = 0.7*pixels_rechts[i+1] + 0.3*pixels_rechts[i+2]; // rot halftone Wimmer
  822. 			pixels_links[i] = 0.299*pixels_links[i] + 0.587*pixels_links[i+1] + 0.114*pixels_links[i+2]; // rot halftone common
  823. 			pixels_links[i+1] = pixels_rechts[i+1];
  824. 			pixels_links[i+2] = pixels_rechts[i+2];
  825.  
  826. 			// Rechtes Teilbild in FC Farben
  827. 			pixels_rechts[i] = 34;
  828. 			pixels_rechts[i+1] = 34;
  829. 			pixels_rechts[i+2] = 34;
  830. 		}
  831. 		// Draw the ImageData at the given (x,y) coordinates.
  832. 		ctx.putImageData(theImageData_links, 0, 0);
  833. 		ctx.putImageData(theImageData_rechts, theCenter, 0);
  834. 		delete theImageData_links;
  835. 		theImageData_links = null;
  836. 		delete theImageData_rechts;
  837. 		theImageData_rechts = null;
  838. 	}
  839. 	document.getElementById('showwait').style.display = 'none';
  840. }
  841.  
  842. function showWaitInterlaced() {
  843. 	if(!ctx) return;
  844. 	if(isinterlaced) return;
  845. 	document.getElementById('showwait').style.display = 'block';
  846. 	window.setTimeout(makeInterlace, 300);
  847. }
  848.  
  849. function makeInterlace() {
  850. 	var isSwitched = document.getElementById('fc_image_interlaceswitch').checked;
  851. 	ctx.drawImage(theImage, 0, 0);
  852. 	flipped = false;
  853. 	ButtonText();
  854. 	isinterlaced = true;
  855. 	isredcyan = false;
  856. 	if(linesshown) {
  857. 		RemoveButtons();
  858. 		linesshown = false;
  859. 	}
  860. 	
  861. 	var centerDiff = theCenter - Math.floor(theImage.width / 2);
  862. 	
  863. 	if(detectPage() == 'kreuz') {
  864. 		// Kreuzblick
  865. 		if(centerDiff<=0) {
  866. 			var theImageData_links = ctx.getImageData(0, 0, theCenter, theImage.height);
  867. 			var theImageData_rechts = ctx.getImageData(theCenter, 0, theCenter, theImage.height);
  868. 			var theWidth = theCenter;
  869. 		} else {
  870. 			var theImageData_links = ctx.getImageData(0, 0, theCenter-(centerDiff*2), theImage.height);
  871. 			var theImageData_rechts = ctx.getImageData(theCenter, 0, theCenter-(centerDiff*2), theImage.height);
  872. 			var theWidth = theCenter-(centerDiff*2);
  873. 		}
  874. 		
  875. 		var pixels_links = theImageData_links.data;
  876. 		var pixels_rechts = theImageData_rechts.data;
  877. 		
  878. 		var zeile = 1;
  879. 		var spalte = 0;
  880. 		if(isSwitched) zeile = 0;
  881.  
  882. 		for (var i = 0, n = pixels_links.length; i < n; i += 4) {
  883. 			if(spalte == theWidth) {
  884. 				zeile++;
  885. 				spalte = 0;
  886. 			}
  887. 			if(zeile % 2 == 0) {
  888. 				// gerade Zeilen von rechts die ungeraden sind automatisch von links
  889. 				pixels_links[i] = pixels_rechts[i];
  890. 				pixels_links[i+1] = pixels_rechts[i+1];
  891. 				pixels_links[i+2] = pixels_rechts[i+2];
  892. 			}
  893. 				
  894. 			// rechte Pixel zuruecksetzen
  895. 			pixels_rechts[i] = 34;
  896. 			pixels_rechts[i+1] = 34;
  897. 			pixels_rechts[i+2] = 34;
  898.  
  899. 			spalte++;
  900. 		}
  901. 		// Draw the ImageData at the given (x,y) coordinates.
  902. 		ctx.putImageData(theImageData_links, 0, 0);
  903. 		ctx.putImageData(theImageData_rechts, theCenter, 0);
  904. 		delete theImageData_links;
  905. 		theImageData_links = null;
  906. 		delete theImageData_rechts;
  907. 		theImageData_rechts = null;
  908. 	} else {
  909. 		// Parallelblick
  910. 		if(centerDiff<=0) {
  911. 			var theImageData_links = ctx.getImageData(0, 0, theCenter, theImage.height);
  912. 			var theImageData_rechts = ctx.getImageData(theCenter, 0, theCenter, theImage.height);
  913. 			var theWidth = theCenter;
  914. 		} else {
  915. 			var theImageData_links = ctx.getImageData(0, 0, theCenter-(centerDiff*2), theImage.height);
  916. 			var theImageData_rechts = ctx.getImageData(theCenter, 0, theCenter-(centerDiff*2), theImage.height);
  917. 			var theWidth = theCenter-(centerDiff*2);
  918. 		}
  919. 		
  920. 		var pixels_links = theImageData_links.data;
  921. 		var pixels_rechts = theImageData_rechts.data;
  922. 		
  923. 		var zeile = 1;
  924. 		var spalte = 0;
  925. 		if(isSwitched) zeile = 0;
  926.  
  927. 		for (var i = 0, n = pixels_links.length; i < n; i += 4) {
  928. 			if(spalte == theWidth) {
  929. 				zeile++;
  930. 				spalte = 0;
  931. 			}
  932. 			if(zeile % 2 != 0) {
  933. 				// ungerade Zeilen von rechts die geraden sind automatisch von links
  934. 				pixels_links[i] = pixels_rechts[i];
  935. 				pixels_links[i+1] = pixels_rechts[i+1];
  936. 				pixels_links[i+2] = pixels_rechts[i+2];
  937. 			}
  938. 				
  939. 			// rechte Pixel zuruecksetzen
  940. 			pixels_rechts[i] = 34;
  941. 			pixels_rechts[i+1] = 34;
  942. 			pixels_rechts[i+2] = 34;
  943.  
  944. 			spalte++;
  945. 		}
  946. 		// Draw the ImageData at the given (x,y) coordinates.
  947. 		ctx.putImageData(theImageData_links, 0, 0);
  948. 		ctx.putImageData(theImageData_rechts, theCenter, 0);
  949. 		delete theImageData_links;
  950. 		theImageData_links = null;
  951. 		delete theImageData_rechts;
  952. 		theImageData_rechts = null;
  953. 	}
  954. 	
  955. 	document.getElementById('showwait').style.display = 'none';
  956. }