Utilisateur:Seudo/facsimile.js

Note : après avoir enregistré vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

Firefox / Safari : Maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac) ;
Google Chrome : Appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac) ;
Internet Explorer : Maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ;
Opera : Allez dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite à Confidentialité & sécurité → Effacer les données d'exploration → Images et fichiers en cache.

// Test : récupère l'image du fac-similé et l'affiche quelque part en la décalant d'un certain nombre de lignes.
// Remarque : impossible de le mettre dans le canvas existant pour des raisons de sécurité apparemment.

// Idée : analyser cette image sans l'afficher, puis en tirer les conséquences sur le fac-similé affiché en utilisant
// l'API OpenSeaDragon (mw.proofreadpage.openseadragon.viewer.viewport.zoomTo, etc.)

function doit() {
	let imageURL = 
	$("img")[0].src;
	  // "https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Euripide%2C_trad._Leconte_de_Lisle%2C_I%2C_1884.djvu/page546-1536px-Euripide%2C_trad._Leconte_de_Lisle%2C_I%2C_1884.djvu.jpg"; 
	// "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
	let imageDescription = "Une image";

	function imageReceived() {
		const canvas = document.createElement("canvas");
		const context = canvas.getContext("2d");

		canvas.width = downloadedImg.width;
		canvas.height = downloadedImg.height;
		canvas.innerText = downloadedImg.alt;

		context.drawImage(downloadedImg, 0, 0);
		$("#firstHeadingTitle")[0].appendChild(canvas);
		console.log("image appended");

		var imagedata = canvas.getContext("2d").getImageData(0, 0, downloadedImg.width, downloadedImg.height);
		var msg = `${imagedata.height} x ${imagedata.width} : ${imagedata.data.length} pixels`;

		const newimagedata = context.createImageData(imagedata.width, imagedata.height);

		// Iterate through every pixel
		const decalage = 500;
		for (let i = decalage * imagedata.width * 4; i < newimagedata.data.length; i += 1) {
			newimagedata.data[i - decalage * imagedata.width * 4] = imagedata.data[i];
			// newimagedata.data[i] = 128;
		}

		context.putImageData(newimagedata, 20, 20);
	};

	let downloadedImg = new Image();
	downloadedImg.crossOrigin = "Anonymous";
	downloadedImg.addEventListener("load", imageReceived, false);
	downloadedImg.alt = imageDescription;
	downloadedImg.src = imageURL;
}



function tests(e) {
	e.preventDefault();
	try {
        doit(e);
	}
	catch(exc) {
		OO.ui.alert("Erreur : " + exc);
		return;
	}
}

function addCommande(libelle, id, desc, fn) {
	mw.util.addPortletLink("p-cactions",
		"#",
		libelle,
		id,
		desc);

	$('#' + id).on('click', function(e) {
		fn(e);
	});
}

$(function($) {
    addCommande("Tests", 
	    "sd-tests", 
		"Tests perso", 
		tests
    );
})