yoya/iframe.html

## iframe.html
<html>
  <body>
    <div>
      This is iframe
    </div>
    <script>
      const origin = location.origin;
      window.onload = () => {
          window.addEventListener("message", (resp) => {
              console.log("iframe", resp)
              const blob = resp.data.get("blob");
              const parentWindow = window.parent;
              const map = new Map();
              map.set('blob',blob);
              parentWindow.postMessage(map, origin);
          })
      };
    </script>
  </body>
</html>

## parent.html
<html>
  <body>
    <div>
      this is parent page
      <iframe id="iframe" src="iframe.html"> </iframe>
    </div>
    <script>
      const origin = location.origin;
      window.onload = () => {
          console.log("index.html")
          const imgsrc = "./test.jpg";
          const image = new Image()
          image.src = imgsrc;
      	  image.onload = () => {
	  　　　　　const c = document.createElement("canvas");
　　　　　　　　　　　　　　　　　　　　　　　　　const ctx = c.getContext("2d");
　　　　　　　　　　　　　　　　　　　　　　　　　c.width = image.naturalWidth;
　　　　　　　　　　　　　　　　　　　　　　　　　c.height = image.naturalHeight;
　　　　　　　　　　　　　　　　　　　　　　　　　ctx.drawImage(image, 0, 0);
　　　　　　　　　　　　　　　　　　　　　　　　　c.toBlob( (blob) => {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　const map = new Map();
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　map.set('blob', blob);
              iframe.contentWindow.postMessage(map, origin);
       　　　　   }, "image/jpeg")
   　　　　   }
    　　　　  window.addEventListener('message', (resp) => {
   　　　　       console.log("parent", resp);
   　　　　   });
      }
    </script>
  </body>
</html>
	<html>
	<body>
	<div>
	This is iframe
	</div>
	<script>
	const origin = location.origin;
	window.onload = () => {
	window.addEventListener("message", (resp) => {
	console.log("iframe", resp)
	const blob = resp.data.get("blob");
	const parentWindow = window.parent;
	const map = new Map();
	map.set('blob',blob);
	parentWindow.postMessage(map, origin);
	})
	};
	</script>
	</body>
	</html>