2017-12-03 21:58:23 +00:00
|
|
|
<html>
|
|
|
|
|
<body style="margin:0;">
|
|
|
|
|
|
2021-04-24 14:33:40 +00:00
|
|
|
<iframe id="myFrame" style="width:100%;height:70vh;border:0;" src="../" allow="camera"></iframe>
|
2017-12-03 21:58:23 +00:00
|
|
|
|
|
|
|
|
<div style="height:20vh;margin:10px;">
|
|
|
|
|
Click on image to edit.
|
|
|
|
|
<br /><br />
|
2020-11-07 19:16:16 +00:00
|
|
|
<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>
|
2017-12-03 21:58:23 +00:00
|
|
|
<br /><br />
|
|
|
|
|
|
2020-11-01 17:25:04 +00:00
|
|
|
<img style="max-height:100%" id="testImage" alt="" src="../images/logo-colors.png" onclick="open_image(this)" />
|
2020-11-07 19:16:16 +00:00
|
|
|
|
|
|
|
|
<textarea rows="8" style="width:500px;" id="testJson"></textarea>
|
|
|
|
|
|
2017-12-03 21:58:23 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
/**
|
|
|
|
|
* will open image on minipaint
|
|
|
|
|
*
|
|
|
|
|
* @param {string|image} image image or image id
|
|
|
|
|
*/
|
|
|
|
|
function open_image(image){
|
2020-11-07 19:16:16 +00:00
|
|
|
if(image == undefined)
|
|
|
|
|
image = document.getElementById('testImage');
|
2017-12-03 21:58:23 +00:00
|
|
|
if(typeof image == 'string'){
|
|
|
|
|
image = document.getElementById(image);
|
|
|
|
|
}
|
|
|
|
|
var Layers = document.getElementById('myFrame').contentWindow.Layers;
|
|
|
|
|
var name = image.src.replace(/^.*[\\\/]/, '');
|
|
|
|
|
var new_layer = {
|
|
|
|
|
name: name,
|
|
|
|
|
type: 'image',
|
|
|
|
|
data: image,
|
|
|
|
|
width: image.naturalWidth || image.width,
|
|
|
|
|
height: image.naturalHeight || image.height,
|
|
|
|
|
width_original: image.naturalWidth || image.width,
|
|
|
|
|
height_original: image.naturalHeight || image.height,
|
|
|
|
|
};
|
|
|
|
|
Layers.insert(new_layer);
|
|
|
|
|
}
|
|
|
|
|
|
2020-11-07 19:16:16 +00:00
|
|
|
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(){
|
2017-12-03 21:58:23 +00:00
|
|
|
var Layers = document.getElementById('myFrame').contentWindow.Layers;
|
|
|
|
|
var tempCanvas = document.createElement("canvas");
|
|
|
|
|
var tempCtx = tempCanvas.getContext("2d");
|
|
|
|
|
var dim = Layers.get_dimensions();
|
|
|
|
|
tempCanvas.width = dim.width;
|
|
|
|
|
tempCanvas.height = dim.height;
|
|
|
|
|
Layers.convert_layers_to_canvas(tempCtx);
|
2018-02-02 20:07:37 +00:00
|
|
|
|
|
|
|
|
if(is_edge_or_ie() == false){
|
|
|
|
|
//update image using blob (faster)
|
|
|
|
|
tempCanvas.toBlob(function (blob) {
|
|
|
|
|
alert('Data length: ' + blob.size);
|
2020-12-25 05:22:23 +00:00
|
|
|
console.log(blob);
|
2018-02-02 20:07:37 +00:00
|
|
|
}, 'image/png');
|
|
|
|
|
}
|
|
|
|
|
else{
|
|
|
|
|
//slow way for IE, Edge
|
|
|
|
|
var data = tempCanvas.toDataURL();
|
|
|
|
|
alert('Data length: ' + data.length);
|
2020-12-25 05:22:23 +00:00
|
|
|
console.log(data);
|
2018-02-02 20:07:37 +00:00
|
|
|
}
|
2017-12-03 21:58:23 +00:00
|
|
|
}
|
|
|
|
|
|
2020-11-07 19:16:16 +00:00
|
|
|
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(){
|
2017-12-03 21:58:23 +00:00
|
|
|
var target = document.getElementById('testImage');
|
|
|
|
|
|
|
|
|
|
var Layers = document.getElementById('myFrame').contentWindow.Layers;
|
|
|
|
|
var tempCanvas = document.createElement("canvas");
|
|
|
|
|
var tempCtx = tempCanvas.getContext("2d");
|
|
|
|
|
var dim = Layers.get_dimensions();
|
|
|
|
|
tempCanvas.width = dim.width;
|
|
|
|
|
tempCanvas.height = dim.height;
|
|
|
|
|
Layers.convert_layers_to_canvas(tempCtx);
|
|
|
|
|
|
|
|
|
|
target.width = dim.width;
|
|
|
|
|
target.height = dim.height;
|
|
|
|
|
target.src = tempCanvas.toDataURL();
|
|
|
|
|
}
|
2018-01-06 14:17:38 +00:00
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* will auto load image on page load. Uncomment line below to make it work
|
|
|
|
|
*/
|
|
|
|
|
window.onload = function () {
|
|
|
|
|
//open_image(document.getElementById('testImage')); //uncomment me
|
|
|
|
|
};
|
2018-02-02 20:07:37 +00:00
|
|
|
|
|
|
|
|
//if IE 11 or Edge
|
|
|
|
|
function is_edge_or_ie() {
|
|
|
|
|
//ie11
|
|
|
|
|
if( !(window.ActiveXObject) && "ActiveXObject" in window )
|
|
|
|
|
return true;
|
|
|
|
|
//edge
|
|
|
|
|
if( navigator.userAgent.indexOf('Edge/') != -1 )
|
|
|
|
|
return true;
|
|
|
|
|
return false;
|
|
|
|
|
}
|
2017-12-03 21:58:23 +00:00
|
|
|
</script>
|
