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.resetAndOpenEditor({image: 'another-image.jpg'});
});
</script>