Opening Photos

Opening existing image

This will open an existing image in the editor. You can specify url, data, or a reference to html image element in image configuration option.

<script>
  var pixie = new Pixie({ image: "url/to/some/image.png" });
</script>

Creating blank image

This will create a new, empty canvas instead of an existing image.

<script>
  var pixie = new Pixie({ blankCanvasSize: { width: 800, height: 600 } });
</script>

Upload image dialog

If there's no image or canvas size to specify, upload image dialog can be opened by default instead.

<script>
  var pixie = new Pixie({ ui: { openImageDialog: { show: true } } });
</script>

Changing sample images

Samples in upload image dialog, can be specified via ui.openImageDialog.sampleImages option. Pixie state files can be used in url option as well as regular images.

<script>
  var pixie = new Pixie({
    ui: {
      openImageDialog: {
        show: true,
        sampleImages: [
          {
            url: "images/samples/sample1.jpg",
            thumbnail: "images/samples/sample1_thumbnail.jpg",
          },
          {
            url: "images/samples/sample2.jpg",
            thumbnail: "images/samples/sample2_thumbnail.jpg",
          },
          {
            url: "images/samples/sample3.jpg",
            thumbnail: "images/samples/sample3_thumbnail.jpg",
          },
        ],
      },
    },
  });
</script>

Opening photo on button click

Different main image can be loaded into pixie on button click or some other action like so:

<button class="open-button">Open Image</button>
<script>
  var pixie = new Pixie({ image: "some-image.jpg" });
  document
    .querySelector(".open-button")
    .addEventListener("click", function (e) {
      pixie.tools.import.openBackgroundImage("another-image.jpg");
    });
</script>