Pixo Template Consumer

by pixoeditor

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Pixo Template Creator</title>
    <script src="https://pixoeditor.com/editor/scripts/bridge.m.js"></script>
    <meta charset="UTF-8" />
  </head>

  <body>
    <p>
      Upload an image: <br />
      <input type="file" id="file" />
    </p>
    <p>
      Or paste URL: <br />
      <input type="text" id="url" />
    </p>
  </body>
</html>

CSS

body { 
  height: 450px;
  max-height: 100vh;
}

JavaScript

const openPixo = (img) => {
  // we will use the localStorage to retrieve
  // the template, however you should retrieve the
  // JSON somewhere from your back-end
  const template = JSON.parse(localStorage.getItem("template") || null);
  if (!template) {
    document.body.appendChild(
      document.createTextNode(
        "Please create a template using the Template Editor first!"
      )
    );
    return;
  }

  // attach the user's image and apply the template to it
  template.src = img;

  new window.Pixo.Bridge({
    apikey: "26uqyj79pdgk",
    type: "modal"
  }).edit(template);
};

file.onchange = (e) => {
  // read the image as base64
  const fileReader = new FileReader();
  fileReader.onload = (e) => {
    openPixo(e.target.result);
  };
  fileReader.readAsDataURL(e.target.files[0]);
};

url.onchange = (e) => {
	openPixo(e.target.value);
}