mirror of https://github.com/piskelapp/piskel.git
Add inline image option for PixiJS Movie export
This commit is contained in:
parent
3804afbeb5
commit
5ebf83badf
|
@ -33,6 +33,8 @@
|
||||||
var dataUriButton = document.querySelector('.datauri-open-button');
|
var dataUriButton = document.querySelector('.datauri-open-button');
|
||||||
var selectedFrameDownloadButton = document.querySelector('.selected-frame-download-button');
|
var selectedFrameDownloadButton = document.querySelector('.selected-frame-download-button');
|
||||||
|
|
||||||
|
this.pixiInlineImageCheckbox = document.querySelector('.png-pixi-inline-image-checkbox');
|
||||||
|
|
||||||
this.initLayoutSection_();
|
this.initLayoutSection_();
|
||||||
this.updateDimensionLabel_();
|
this.updateDimensionLabel_();
|
||||||
|
|
||||||
|
@ -169,7 +171,15 @@
|
||||||
var canvas = this.createPngSpritesheet_();
|
var canvas = this.createPngSpritesheet_();
|
||||||
var name = this.piskelController.getPiskel().getDescriptor().name;
|
var name = this.piskelController.getPiskel().getDescriptor().name;
|
||||||
|
|
||||||
zip.file(name + '.png', pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
|
var image;
|
||||||
|
|
||||||
|
if (this.pixiInlineImageCheckbox.checked) {
|
||||||
|
image = canvas.toDataURL('image/png');
|
||||||
|
} else {
|
||||||
|
image = name + '.png';
|
||||||
|
|
||||||
|
zip.file(image, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
|
||||||
|
}
|
||||||
|
|
||||||
var width = canvas.width / this.getColumns_();
|
var width = canvas.width / this.getColumns_();
|
||||||
var height = canvas.height / this.getRows_();
|
var height = canvas.height / this.getRows_();
|
||||||
|
@ -194,7 +204,7 @@
|
||||||
'meta': {
|
'meta': {
|
||||||
'app': 'https://github.com/piskelapp/piskel/',
|
'app': 'https://github.com/piskelapp/piskel/',
|
||||||
'version': '1.0',
|
'version': '1.0',
|
||||||
'image': name + '.png',
|
'image': image,
|
||||||
'format': 'RGBA8888',
|
'format': 'RGBA8888',
|
||||||
'size': {'w': canvas.width,'h': canvas.height}
|
'size': {'w': canvas.width,'h': canvas.height}
|
||||||
}
|
}
|
||||||
|
|
|
@ -37,6 +37,10 @@
|
||||||
<div style="padding-bottom: 5px">
|
<div style="padding-bottom: 5px">
|
||||||
<span class="highlight export-panel-row">PixiJS Movie export: </span>
|
<span class="highlight export-panel-row">PixiJS Movie export: </span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="checkbox-container" style="margin: 5px 0;">
|
||||||
|
<input id="png-pixi-inline-image" class="png-pixi-inline-image-checkbox checkbox-fix" type="checkbox" />
|
||||||
|
<label for="png-pixi-inline-image">Inline spritesheet as data-uri</label>
|
||||||
|
</div>
|
||||||
<div class="export-panel-row">
|
<div class="export-panel-row">
|
||||||
<button type="button" class="button button-primary png-pixi-download-button"/>Download</button>
|
<button type="button" class="button button-primary png-pixi-download-button"/>Download</button>
|
||||||
<span class="export-info">Spritesheet with JSON metadata</span>
|
<span class="export-info">Spritesheet with JSON metadata</span>
|
||||||
|
|
Loading…
Reference in New Issue