Comments (6)
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.
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.
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.
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.
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.
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)
- ctx.DrawImage() not working HOT 2
- Constraining image dimensions HOT 1
- Dynamic theme switch HOT 1
- Move image and zoom HOT 1
- Can it support images of size in 4-5 GBs? HOT 9
- Can we embed this as a library in an Angular file? HOT 1
- Unable to open an image using URL HOT 1
- Improving general image rendering quality (Resolution changes having no effect) HOT 9
- Problem in showing Rtl Fonts like 'Fa' & 'Ar' HOT 2
- Problem in showing Rtl Fonts like 'Fa' & 'Ar' HOT 1
- Dear Developer HOT 2
- preload image. HOT 1
- Feature request: Ability to change the image and color of rectangles in the draw editor HOT 2
- Contiguous being glitchy HOT 1
- Make sure effects and other color management is being calculated in linear RGB space. HOT 9
- Inserting an image resizes the canvas, even when the canvas is bigger than the image inserted HOT 2
- Potential security issue HOT 1
- Pan HOT 3
- Brush size isn't remembered on page refresh HOT 2
- Reversing the Persian text HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from minipaint.