How to specify default image URL

[codewillcome]

Excellent work, this editor is one sweet package!

Is there any way to pass a picture URL for opening as default image by appending something like ?open=encoded_url to the minipaint location?

Alternatively, is there any syntax for opening an image from a supplied URL?
e.g. FILE.open_handler(URL)?

[viliusle]

There is no ability to use default image, can you tell why you need that? But there is way to use quick-save (F9) and then after each refresh using quick-load (F10) will give you similar results.

Are you talking about sending link that includes sample image(s) to friend? That's interesting...

Opening urls is not supported directly, but you can copy image from web-page into clipboard and using ctrl+v in miniPaint will import that image. I will add this request to todo list. But keep in mind that only some images can be imported, (CORS restriction sometimes apply... unless website admin allows it using special headers)

[codewillcome]

Thanks for considering my question!
'Default image' may not be the best wording...
Example case : auto "click to edit image" link on all img tags - launches minipaint, source image is autoloaded - url to auto-open is passed by http param e.g. '?load=[URL]' appended to minipaint base url

What is the best way to achieve this?

[Secured20]

The best way to achieve this:
1.) rename index.html to index.php
2.) Use this code inside index.php:

// Get image from url
function getDataUri(url, callback) {
    var image = new Image();
    image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = this.naturalWidth;
        canvas.height = this.naturalHeight;
        canvas.getContext('2d').drawImage(this, 0, 0);
        var dataUri = canvas.toDataURL('image/png');
        // Get raw image data
        callback(createJsonData(dataUri,canvas.width,canvas.height));
    };
    image.src = url;
}
function createJsonData(dataUri,width,height){
		var export_data = {};
		//get date
		var today = new Date();
		var yyyy = today.getFullYear();
		var mm = today.getMonth()+1; //January is 0!
		var dd = today.getDate();
		if(dd < 10)
			dd = '0'+dd;
		if(mm < 10)
			mm = '0'+mm;
		var today = yyyy+'-'+mm+'-'+dd;
		//basic info
		export_data.info = {
			width: width,
			height: height,
			about: 'Image data.',
			date: today,
		};
		//layers
		export_data.layers = [];
		var layer = {
			name:"Your file name",
			title:"Your file name", 
			visible: 1,
			opacity: 0,
		};
		export_data.layers.push(layer);
		//image data
		export_data.image_data = [];
		export_data.image_data.push({name: "Your name", data: dataUri});
		var data_json = JSON.stringify(export_data, null, 6);
		delete export_data;
		return data_json;
}
// Load image from url to canvas
var imgUrl = "<?php echo $imgUrl; ?>"; // url from post or like img/colorwheel.png
if(imgUrl){
	getDataUri(imgUrl, function(jsonData) {
		FILE.load_json(jsonData);
	});
}

[viliusle]

current method:

<img alt="" id="my_image" src="img/colorwheel.png" alt="" onclick="open_image('my_image');"  />

<script>
function open_image(image_id){
	var img = document.getElementById(image_id);
	//set name
	var name = img.src.replace(/^.*[\\\/]/, '');
	LAYER.layer_add(name);
	LAYER.layer_remove(1);
	//draw canvas
	canvas_active().drawImage(img, 0, 0);
}
</script>

method on next version: (3.4+)
<img alt="" id="my_image" src="example.png" onclick="FILE.open_image('my_image');" />

p.s. code works after all JS are loaded.

[riz537]

Hi viliusle,

I am using mini paint using iFrame in my application but I have a requirement to load an image from a URL into this mini paint .

Can you please give me the code and any JS to be added .

I tried this below

<script> function open_image(image_id){ var img = document.getElementById(image_id); //set name var name = img.src.replace(/^.*[\\\/]/, ''); LAYER.layer_add(name); LAYER.layer_remove(1); //draw canvas canvas_active().drawImage(img, 0, 0); } </script>

but its giving "LAYER is not defined" error . Please suggest..

This will a a great help for me , thanks in advance
RIzwan

[viliusle]

check this example. Basically you have to query iframe and take Layers object from there.
https://github.com/viliusle/miniPaint/blob/master/examples/open-edit-save.html#L26

p.s. you should create separate ticket next time.