STRd6
React App Integration
Hey!
I've been looking for a while for a pixel editor which I might be able to integrate into an app Im making. Its for a design interface for a 3D printer which makes clothes :)
Your pixel editor is great! I was wondering if you had an idea of how I might go about integrating the editor into a React app which uses webpack?
Is there a hello world style demo app which uses the pixel-editor?
actually I ran through the closed issues and saw that this one might indicate the gh-pages version might be embeddable in an iframe
I might try that :)
Yeah, I think embedding in an iframe is a good way to go. The editor can communicate with the parent window when "Save" is clicked through postMessage. Let me know if you have any questions about it. I'll also try and look into a way of making the editor easier to use with webpack when I have some time.
Here's a sample page using an iframe embed, let me know if it helps.
<html>
<body>
</body>
<iframe src="https://danielx.net/pixel-editor/" width="100%" height="100%"></iframe>
<script>
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
var origin = event.origin;
if (origin !== "https://danielx.net") {
return;
}
var data = event.data;
if (data.method === "save") {
var image = data.image; // HTML5 Blob object
var width = data.width;
var height = data.height;
var title = data.title;
// Post to your server, etc
console.log(data);
}
}
</script>
</html>
One thing to note is that this is pointing to the latest version of danielx.net/pixel-editor so it might break out from under you. You'd probably want to host a stable version of the editor on your own service after you get it working if you care about that kind of thing.