File size: 1,932 Bytes
b5ba7a5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>openOutpaint embed</title>
</head>
<body>
<iframe
id="openoutpaint"
style="width: 100%; height: 800px"
src="../index.html?v=34d5675"
frameborder="0"></iframe>
<button id="add-res">Add Resource</button>
<script>
document.addEventListener("DOMContentLoaded", async () => {
const frame = document.getElementById("openoutpaint");
const key = (await (await fetch("../key.json")).json()).key;
console.info("[embed] Add message listener");
window.addEventListener("message", ({data, origin, source}) => {
if (source === frame.contentWindow) {
console.debug(data);
switch (data.type) {
case "openoutpaint/ack":
if (data.message.type === "openoutpaint/init") {
console.info("[embed] Received init ack");
clearTimeout(initLoop);
initLoop = null;
}
break;
}
}
});
let initLoop = null;
const sendInit = () => {
console.info("[embed] Sending init message");
frame.contentWindow.postMessage({
type: "openoutpaint/init",
key,
});
initLoop = setTimeout(sendInit, 1000);
};
sendInit();
const canvas = document.createElement("canvas");
const image = document.createElement("img");
image.crossOrigin = "";
image.src = "https://www.w3schools.com/css/paris.jpg";
image.onload = () => {
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
};
document.body.appendChild(image);
document.getElementById("add-res").addEventListener("click", () => {
frame.contentWindow.postMessage({
key,
type: "openoutpaint/add-resource",
image: {
dataURL: canvas.toDataURL(),
resourceName: "Embed Resource",
},
});
});
});
</script>
</body>
</html>
|