add generator draft

styleguide/generator/generator.js

@@ -0,0 +1,67 @@
+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 () {
+        filterImage(svgDataUrl, this.width, this.height);
+    };
+    sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image;
+
+
+    let svgString = (new XMLSerializer).serializeToString(svg);
+    svgDataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgString);
+}
+
+
+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);