2017-12-03 21:58:23 +00:00
|
|
|
<html>
|
|
|
|
|
<body style="margin:0;">
|
|
|
|
|
|
2018-02-02 20:07:37 +00:00
|
|
|
<iframe id="myFrame" style="width:100%;height:70vh;border:0;" src="../"></iframe>
|
2017-12-03 21:58:23 +00:00
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
<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)" />
|
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){
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function my_save(){
|
|
|
|
|
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);
|
|
|
|
|
console.log(blob);
|
|
|
|
|
}, 'image/png');
|
|
|
|
|
}
|
|
|
|
|
else{
|
|
|
|
|
//slow way for IE, Edge
|
|
|
|
|
var data = tempCanvas.toDataURL();
|
|
|
|
|
console.log(data);
|
|
|
|
|
alert('Data length: ' + data.length);
|
|
|
|
|
}
|
2017-12-03 21:58:23 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function my_update(){
|
|
|
|
|
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>
|
