Git Product home page Git Product logo

Comments (6)

viliusle avatar viliusle commented on August 9, 2024

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)

from minipaint.

codewillcome avatar codewillcome commented on August 9, 2024

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?

from minipaint.

Secured20 avatar Secured20 commented on August 9, 2024

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);
	});
}

from minipaint.

viliusle avatar viliusle commented on August 9, 2024

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.

from minipaint.

riz537 avatar riz537 commented on August 9, 2024

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

from minipaint.

viliusle avatar viliusle commented on August 9, 2024

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.

from minipaint.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.