search

STRd6 / pixel-editor

It edits pixels
https://danielx.net/pixel-editor/
MIT License
141 stars 29 forks source link

React App Integration #59

Open phoenixbox opened 8 years ago

phoenixbox commented 8 years ago

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?

phoenixbox commented 8 years ago

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 :)

STRd6 commented 8 years ago

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.

phoenixbox commented 8 years ago

Ok cool Ill see how I get on :)

squareRoundHole

STRd6 commented 8 years ago

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.