Here is follow-up to the last post. To get pictures into MiniPaint on startup we need edit.php
<iframe id="myFrame" style="width:100%;height:100%;border:0;" src="/library/miniPaint"></iframe>
<div style="display:none">
<img style="max-height:100%" id="myImage" alt="" src="../<? echo $fn; ?>" onclick="open_image(this)" />
</div>
<script>
window.onload = function () {
open_image(document.getElementById('myImage'));
};
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);
}
</script>
To upload the pictures to the server, we need to patch miniPaintSource/src/js/modules/file/. The trick here are the new options to toDataURL().
//ask data
var quality = 0.8;
var data_url = canvas.toDataURL('image/jpeg', quality);
max = 5 * 1000 * 1000;
if (data_url.length > max) {
alertify.error('Size is too big, max ' + this.Helper.number_format(max, 0) + ' bytes.');
return;
}
var settings = {
title: 'Data URL',
params: [
{name: "url", title: "URL:", type: "textarea", value: data_url},
],
};
var file_name = config.layers[0].name;
var parts = file_name.split('.');
if (parts.length > 1)
file_name = parts[parts.length - 2];
file_name = file_name.replace(/ /g, "-");
$.ajax({
url: '/library/save.php',
dataType: 'json',
data: { fn: file_name, pic: data_url },
type: 'POST'
});
And here is the corresponding save.php, check for escape codes in $_POST[“fn”]
$fn = __DIR__ . "/../current/" . $_POST["fn"] . date('-d-H-i', time()) . ".jpg";
$baseFromJavascript = $_POST["pic"];
$base_to_php = explode(',', $baseFromJavascript);
$data = base64_decode($base_to_php[1]);
file_put_contents($fn,$data);
As a last step I wanted also to Quit eg close tab menu function. This can be done in miniPaintSource/src/js/config-menu.js where we insert a new line under the “File” menu
<li><a class="trn" data-target="file/save.quit" href="#">Quit</a></li>
The readout is in miniPaintSource/src/js/modules/file/save.js under class File_save_class
quit() {
parent.closeIframe();
}
Sorry, yes we need to add a new function to edit.php
function closeIframe(){
var myWindow = window.open("", "_self");
myWindow.document.write("");
setTimeout (function() {myWindow.close();},100);
}