Added image load/save.

This commit is contained in:
Devine Lu Linvega 2016-11-12 17:54:26 -08:00
parent b6b63e4e48
commit b3040ddb3c
4 changed files with 57 additions and 10 deletions

View File

@ -15,6 +15,9 @@
> >
< Prev Laye < Prev Laye
Background
* ff00ff ; Fill background with color
Files Files
$ new_name.jpg $ new_name.jpg
/ file_name.jpg / file_name.jpg
@ -41,3 +44,9 @@ $ new_name.jpg
Eraser Eraser
Right click should not draw Right click should not draw
Fill background
Image
Eraser

BIN
media/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

View File

@ -44,11 +44,14 @@ function Commander(element,element_input)
// Load // Load
if(parts[0] == "/"){ if(parts[0] == "/"){
base_image = new Image(); parts.shift();
base_image.src = 'img/base.png'; ronin.load_image(parts);
base_image.onload = function(){ }
context.drawImage(base_image, 100, 100);
} // Fill
if(parts[0] == "*"){
parts.shift();
ronin.fill(parts);
} }
// Guides // Guides
@ -71,11 +74,9 @@ function Commander(element,element_input)
// Draw // Draw
if(parts[0] == "/"){ if(parts[0] == "/"){
base_image = new Image(); parts.shift();
base_image.src = 'img/base.png'; parts.shift();
base_image.onload = function(){ ronin.guide(parts);
context.drawImage(base_image, 100, 100);
}
} }
} }
} }

View File

@ -1,10 +1,44 @@
function Ronin() function Ronin()
{ {
this.element = null; this.element = null;
this.load_image = function(p)
{
base_image = new Image();
base_image.src = p[0]; // media/logo.png
base_image.onload = function(){
context.drawImage(base_image, parseFloat(p[1]), parseFloat(p[2]), parseFloat(p[3]), parseFloat(p[4]));
}
this.draw_guides();
}
this.fill = function(p)
{
cvSave = canvas.toDataURL("image/png");
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#"+p[0];
context.fill();
var imgObj = new Image();
imgObj.src = cvSave;
context.drawImage(imgObj,0,0);
}
// Guides
this.guides_element = null; this.guides_element = null;
this.guides_context = null; this.guides_context = null;
this.guides = []; this.guides = [];
this.clear_guides = function()
{
this.guides = [];
this.draw_guides();
}
this.draw_guides = function() this.draw_guides = function()
{ {
this.guides_context.clearRect(0, 0, canvas.width, canvas.height); this.guides_context.clearRect(0, 0, canvas.width, canvas.height);
@ -17,6 +51,7 @@ function Ronin()
this.guide = function(p) this.guide = function(p)
{ {
this.guides_context.clearRect(0, 0, canvas.width, canvas.height); this.guides_context.clearRect(0, 0, canvas.width, canvas.height);
this.draw_guides();
var x = p[0] ? p[0] : 0 ; var x = p[0] ? p[0] : 0 ;
var y = p[1] ? p[1] : 0 ; var y = p[1] ? p[1] : 0 ;
@ -30,6 +65,8 @@ function Ronin()
this.add_guide = function(p) this.add_guide = function(p)
{ {
if(p == "-"){ this.clear_guides(); return; }
var x = p[0] ? p[0] : 0 ; var x = p[0] ? p[0] : 0 ;
var y = p[1] ? p[1] : 0 ; var y = p[1] ? p[1] : 0 ;
var w = p[2] ? p[2] : 0 ; var w = p[2] ? p[2] : 0 ;