<!-- Ideally before closing body tag -->
<script data-preload="true" data-path="pixie" src="assets/js/pixie-integrate.js"></script>
data-preload="true"
is optional. Use it to preload all the pixie assets with the initial page load. Without this attribute assets will be loaded when the editor is first shown. It will take slightly longer for editor to appear withtout it, but the initial page load will be faster.
Use data-path="yourPathHere"
to specify the path to pixie folder on your server. It's optional and will default to pixie.
<script>
var myPixie = Pixie.setOptions({
replaceOriginal: true,
appendTo: 'body'
});
$('#edit-me').on('click', function(e) {
myPixie.open({
url: e.target.src,
image: e.target
});
});
</script>
var myPixie = Pixie.setOptions({
onSave: function(data, img) {
$.ajax({
type: 'POST',
url: '/save-image.php',
data: { imgData: data },
}).success(function(response) {
alert('image saved successfully!');
});
}
});
//save-image.php
<?php
$data = file_get_contents($_REQUEST['imgData']);
file_put_contents('image.jpg', $data);
?>
Interactive mode will automatically open images in specified container when they are clicked and replace them with edited ones once user saves.
<script>
var myPixie = Pixie.setOptions({
replaceOriginal: true,
appendTo: 'body'
});
myPixie.enableInteractiveMode({
selector: '.img-responsive',
container: '#images',
preventDefault: true
});
</script>
Name | Default | Description |
---|---|---|
url |
false |
Url of image to load into editor. Can be relative or absolute. |
enableCORS |
false |
Whether or not pixie should assume that image is cross-domain enabled. With set to false pixie will use image laundering service to fetch image trough domains which will be slower (no laundering will occur if image is hosted on the same domain as pixie). |
forceLaundering |
false |
Setting this to true will force image laundering even if image is hosted on the same domain. |
path |
pixie |
Path to or the name of pixie folder on your server. |
saveUrl |
false |
Edited image data will be sent to this url via ajax post request on save. |
replaceOriginal |
false |
Whether or not passed in (or clicked on in interactive mode) image DOM node should be replace with modified one after saving. |
appendTo |
body |
What element pixie container should be appended to in the DOM. Should be a string that is acceptable by document.querySelector() |
noManualClose |
false |
When this is set to true editor will not be automatically closed when clicking on backdrop and the close button will not be visible. |
openDelay |
400 |
Fade In delay in milliseconds when opening the editor. |
closeDelay |
400 |
Fade out delay in milliseconds when closing the editor. |
Name | Description |
---|---|
onSave |
Called after image is fully processed and ready to be saved.
|
onLoad |
Called after all editor assets are fully loaded and it's ready to be shown.
|
onError |
Called after all an error occurs in the editor. Will log error object to console by default.
|
onSaveButtonClick |
Called after save button is clicked in the editor. If you pass in this callback the dialog window with image quality, name etc will not be shown and you will need to save it manualy.
|
onClose |
Called after editor is closed. No parameters are passed in. |
All methods should be called on the instance that is ruturned from Pixie.setOptions({})
Name | Description |
---|---|
.open(options) |
Open image editor. Can pass in all options described above. |
.close() |
Close the editor. |
.enableInteractiveMode(options) |
Enable interactive mode. Look for example above. |
.getParams(options) |
Get current pixie parameters. |
.setOptions(options) |
Set options. Can do it via open(options) as will, but it will open the editor. |
.save(format, quality) |
Manually save image currently open in the editor. Will trigger all callbacks normal save would. |
.getService(name) |
Get an angular.js service instance. Familiarity with angular.js recommended. |