surma/ewag.jpg Secret

## ewag.jpg

      
    Raw
  

              ewag.jpg
            
          
## index.html
<!doctype html>
<style>
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
header {
  flex: 0 0;
  padding: 20px;
  background-color: #333;
}
header img {
  height: 100px;
  margin: 20px;
}
iframe {
  flex: 1 1;
  border: 0;
}
</style>
<header id="header">
  <img src="ewag.jpg">
  <img src="jakearchibald.jpg">
  <img src="jasonjmiller.jpg">
  <img src="kosamari.jpg">
  <img src="surma.jpg">
  <button id="apply">Apply right side to all</button>
  <button id="append">Open current image</button>
  <button id="openwindow">Open in a window</button>
</header>
<iframe id="ifr"></iframe>

<script type="module">
  import {proxy} from "https://cdn.jsdelivr.net/npm/comlinkjs@3.0.2/comlink.js";
  import squoosh from "http://localhost:8080/sdk.mjs";

  function downloadFile(url, name) {
    const a = document.createElement('a')
    a.href = url;
    a.download = name;
    a.hidden = true;
    document.body.append(a);
    a.click();
  }


  async function init() {
    const {setFile, getBlob} = await squoosh(document.all.ifr, "http://localhost:8080");
    console.log('Squoosh loaded');

    async function load(url) {
      const blob = await fetch(url).then(resp => resp.blob());
      await setFile(blob);
    }
    document.all.header.onclick = ev => load(ev.target.src);

    async function applyAll() {
      for(const img of document.querySelectorAll("header img")) {
        await load(img.src);
        const file = await getBlob(1);
        const url = URL.createObjectURL(file);
        downloadFile(url, img.src.split("/").reverse()[0]);
      }
    }

    async function openCurrent() {
      const blob = await getBlob(1);
      const url = URL.createObjectURL(blob);
      window.open(url);
    }

    document.all.append.onclick = ev => {
      ev.stopPropagation()
      openCurrent();
    }
    document.all.apply.onclick = ev => {
      ev.stopPropagation()
      applyAll();
    }
  }
  init();

  document.all.openwindow.onclick = async ev => {
    const other = window.open('http://localhost:8080');
    ev.stopPropagation();
    const ewa = await await fetch("ewag.jpg").then(resp => resp.blob());
    await new Promise(resolve => setTimeout(resolve, 1000));
    const {setFile} = await proxy(other);
    await setFile(ewa);
    console.log("Opening in window succeeded");
  }
</script>

## jakearchibald.jpg

      
    Raw
  

              jakearchibald.jpg
            
          
## jasonjmiller.jpg

      
    Raw
  

              jasonjmiller.jpg
            
          
## kosamari.jpg

      
    Raw
  

              kosamari.jpg
            
          
## surma.jpg

      
    Raw
  

              surma.jpg
	<!doctype html>
	<style>
	html, body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	}
	body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	}
	header {
	flex: 0 0;
	padding: 20px;
	background-color: #333;
	}
	header img {
	height: 100px;
	margin: 20px;
	}
	iframe {
	flex: 1 1;
	border: 0;
	}
	</style>
	<header id="header">
	<img src="ewag.jpg">
	<img src="jakearchibald.jpg">
	<img src="jasonjmiller.jpg">
	<img src="kosamari.jpg">
	<img src="surma.jpg">
	<button id="apply">Apply right side to all</button>
	<button id="append">Open current image</button>
	<button id="openwindow">Open in a window</button>
	</header>
	<iframe id="ifr"></iframe>

	<script type="module">
	import {proxy} from "https://cdn.jsdelivr.net/npm/comlinkjs@3.0.2/comlink.js";
	import squoosh from "http://localhost:8080/sdk.mjs";

	function downloadFile(url, name) {
	const a = document.createElement('a')
	a.href = url;
	a.download = name;
	a.hidden = true;
	document.body.append(a);
	a.click();
	}


	async function init() {
	const {setFile, getBlob} = await squoosh(document.all.ifr, "http://localhost:8080");
	console.log('Squoosh loaded');

	async function load(url) {
	const blob = await fetch(url).then(resp => resp.blob());
	await setFile(blob);
	}
	document.all.header.onclick = ev => load(ev.target.src);

	async function applyAll() {
	for(const img of document.querySelectorAll("header img")) {
	await load(img.src);
	const file = await getBlob(1);
	const url = URL.createObjectURL(file);
	downloadFile(url, img.src.split("/").reverse()[0]);
	}
	}

	async function openCurrent() {
	const blob = await getBlob(1);
	const url = URL.createObjectURL(blob);
	window.open(url);
	}

	document.all.append.onclick = ev => {
	ev.stopPropagation()
	openCurrent();
	}
	document.all.apply.onclick = ev => {
	ev.stopPropagation()
	applyAll();
	}
	}
	init();

	document.all.openwindow.onclick = async ev => {
	const other = window.open('http://localhost:8080');
	ev.stopPropagation();
	const ewa = await await fetch("ewag.jpg").then(resp => resp.blob());
	await new Promise(resolve => setTimeout(resolve, 1000));
	const {setFile} = await proxy(other);
	await setFile(ewa);
	console.log("Opening in window succeeded");
	}
	</script>