artin/miniPaint
1
0
Fork 0
mirror of https://github.com/viliusle/miniPaint.git synced 2026-02-06 13:36:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

example with imprt/export JSON

Browse Source
This commit is contained in:
viliusle 2020-11-07 21:16:16 +02:00
parent f9408070fe
commit 800003347b
2 changed files with 41 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
examples/open-edit-save.html
View File

@ -6,11 +6,18 @@
<div style="height:20vh;margin:10px;">
Click on image to edit.
<br /><br />
<button onclick="my_update()">Update</button>
<button onclick="my_save()">Save</button>
<button onclick="open_image()">Open image</button>
<button onclick="update_image()">Update image</button>
<button onclick="save_image()">Save image</button>
OR
<button onclick="open_json()">Open JSON</button>
<button onclick="save_json()">Save JSON</button>
<br /><br />
<img style="max-height:100%" id="testImage" alt="" src="../images/logo-colors.png" onclick="open_image(this)" />
<textarea rows="8" style="width:500px;" id="testJson"></textarea>
</div>
<script>
@ -20,6 +27,8 @@
* @param {string|image} image image or image id
*/
function open_image(image){
if(image == undefined)
image = document.getElementById('testImage');
if(typeof image == 'string'){
image = document.getElementById(image);
}
@ -37,7 +46,20 @@ function open_image(image){
Layers.insert(new_layer);
}
function my_save(){
function open_json(){
var miniPaint = document.getElementById('myFrame').contentWindow;
var miniPaint_FileOpen = miniPaint.FileOpen;
window.fetch("../images/test-collection.json").then(function(response) {
return response.json();
}).then(function(json) {
miniPaint_FileOpen.load_json(json, false);
}).catch(function(ex) {
alert('Sorry, image could not be loaded.');
});
}
function save_image(){
var Layers = document.getElementById('myFrame').contentWindow.Layers;
var tempCanvas = document.createElement("canvas");
var tempCtx = tempCanvas.getContext("2d");
@ -61,7 +83,16 @@ function my_save(){
}
}
function my_update(){
function save_json(){
var miniPaint = document.getElementById('myFrame').contentWindow;
var miniPaint_FileSave = miniPaint.FileSave;
var data_json = miniPaint_FileSave.export_as_json();
document.getElementById('testJson').value = data_json;
}
function update_image(){
var target = document.getElementById('testImage');
var Layers = document.getElementById('myFrame').contentWindow.Layers;

6
src/js/main.js
View File

@ -18,6 +18,8 @@ import Base_gui_class from './core/base-gui.js';
import Base_layers_class from './core/base-layers.js';
import Base_tools_class from './core/base-tools.js';
import Base_state_class from './core/base-state.js';
import File_open_class from './modules/file/open.js';
import File_save_class from './modules/file/save.js';
window.addEventListener('load', function (e) {
//initiate app
@ -25,11 +27,15 @@ window.addEventListener('load', function (e) {
var Base_tools = new Base_tools_class(true);
var GUI = new Base_gui_class();
var Base_state = new Base_state_class();
var File_open = new File_open_class();
var File_save = new File_save_class();
//register as global for quick or external access
window.Layers = Layers;
window.AppConfig = config;
window.State = Base_state; // window.State.save();
window.FileOpen = File_open;
window.FileSave = File_save;
//render all
GUI.load_modules();