Add wiki dump and instructions

eh22.easterhegg.eu/design/assets/script/generator.js

@@ -0,0 +1,86 @@
+let can = document.createElement("canvas");
+let ctx = can.getContext("2d");
+let result;
+const downloadButton = document.querySelector("#download");
+
+function filterImage(svgDataUrl, width, height) {
+  const filteredImage = new Image();
+  const resultPreview = document.querySelector("#result_img");
+
+  can.width = width;
+  can.height = height;
+
+  filteredImage.onload = function () {
+    ctx.drawImage(filteredImage, 0, 0, width, height);
+    result = can.toDataURL();
+    downloadButton.disabled = false;
+    resultPreview.src = result;
+  };
+  filteredImage.src = svgDataUrl;
+}
+
+function loadImage(base64Image) {
+  const sourceImage = new Image();
+  const svg = document.querySelector("svg");
+  const svgImage = svg.querySelector("image");
+  const sourcePreview = document.querySelector("#source_img");
+  let svgDataUrl;
+
+  sourceImage.onload = function () {
+    let svgViewBox = `0 0 ${Math.trunc((800 / this.height) * this.width)} 800`;
+    svg.setAttribute("height", this.height);
+    svg.setAttribute("width", this.width);
+    svg.setAttribute("viewBox", svgViewBox);
+
+    let svgString = new XMLSerializer().serializeToString(svg);
+    svgDataUrl = "data:image/svg+xml," + encodeURIComponent(svgString);
+
+    filterImage(svgDataUrl, this.width, this.height);
+  };
+  sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image;
+}
+
+function handleFileSelect(e) {
+  const files = e.target.files;
+  if (!files || !files.length) return;
+  const file = files[0];
+  if (!file.type.match("image.*")) return;
+
+  const reader = new FileReader();
+
+  reader.onload = (readerEvent) => {
+    loadImage(readerEvent.target.result);
+  };
+
+  reader.readAsDataURL(file);
+}
+
+document
+  .querySelector("#file_input")
+  .addEventListener("change", handleFileSelect, false);
+
+function downloadURI(_uri, _name) {
+  let link = document.createElement("a");
+  link.download = "distortedImageEH22.png";
+  link.href = result;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  delete link;
+}
+
+downloadButton.addEventListener("click", downloadURI);
+
+(async () => {
+  let exampleImageBlob = await fetch("../assets/image/example_qrcode.png").then(
+    (r) => r.blob(),
+  );
+
+  let dataUrl = await new Promise((resolve) => {
+    let reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.readAsDataURL(exampleImageBlob);
+  });
+
+  loadImage(dataUrl);
+})();