How to extract an image from an other using kinetic JS? - javascript

I have an image and I need to extract and create another kinetic image from it (without modifying the original image).
The extracted image will be a rectangle, and I have the coordinates of its 4 points.
I checked on http://kineticjs.com/docs/Kinetic.Image.html if there is any function that enables to do that but didn't find anything.
I tried with the crop method:
var newImage = new Image();
newImage.onload = function () {
var roikImage = new Kinetic.Image({
x: 10,
y: 100,
image: this,
width:100,
heigth:100,
crop: {
x:0 , y:0 , width:100, heigth:100
}
});
//Here I add the image to the layer, and draw the stage
};
newImage.src= 'src/of/my/image';
but I got a small portion of the image. I couldn't figure out how to do to crop the image using the coordinates of the 4 points of the rectangle.
Any ideas?

If I understand correctly, than you are on the right track by using crop.
You can grab the image of another Kinetic Image by using the .getImage() function and then you can use the crop attribute or setCrop() and getCrop() methods to achieve what you want.
var imageObj = new Image();
imageObj.onload = function () {
var yoda = new Kinetic.Image({
x: 100,
y: 50,
image: imageObj,
width: 106,
height: 118
});
// add the shape to the layer
layer.add(yoda);
var newImage = new Kinetic.Image({
x: 300,
y: 50,
width: 100,
height: 100,
image: yoda.getImage(), //get the original image from yoda
crop: {
x:0 , y:0 , width:100, height:100
}
});
layer.add(newImage);
// add the layer to the stage
stage.add(layer);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
Change the x,y values inside crop to choose where you want to start the crop, and then set the width and height to the dimensions you would your crop size to be starting at the x,y point of the image. x:0, y:0 is the top left corner of the image.
jsfiddle

Related

What is Fabricjs alternative for context.drawImage full syntax?

I am trying to use fabricjs to render images and do some processing.
I can use this when it comes to normal rendering onto canvas , but I am failing in case of FabricJS:
This is canvas code without fabricjs :
Clip the image and position the clipped part on the canvas:
JavaScript syntax: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
How to achieve the same using FabricJS?
hiddenContext.putImageData(imageDataArr, 0, 0);
var hc = document.getElementById(hid);
//assigning last working canvas.
LWC = CWC;
CWC = fabricFH;
CWC.backgroundColor = "white";
CWC.add(new fabric.Image(hc,
{
alignX : "mid",
alignY : "mid",
selectable : false,
hasBorders : false,
hasControls : false,
hasRotatingPoint : false,
lockUniScaling: true,
centeredScaling: true,
scaleX: $("#"+activeCanvas).find("canvas").get(0).width/hc.width,
scaleY: $("#"+activeCanvas).find("canvas").get(0).height/hc.height,
}
));
Above code lets me maintain aspect ratio and render perfectly onto the canvas, but I am loosing quality of the image, because my canvas is 1000*800 and image is 2130*1800.
Can you help me in rendering the image with exact quality as per the actual image?
Try this:
var canvas = new fabric.Canvas('canvas');
var img = new Image();
img.src = 'http://i2.ooshirts.com/images/lab_shirts/Cobalt-1-F.jpg';
var imgInstance = new fabric.Image(img, {
left: 10,
top: 10,
angle: 0,
width:300,
height:240,
clipTo: function(ctx){
ctx.rect(-100,-100,200,200);
}
});
canvas.add(imgInstance);
canvas.renderAll();
If we wanna map it with:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); where
img=Specifies the image ,
sx= Optional. The x coordinate where to start clipping,
sy= Optional. The y coordinate where to start clipping,
swidth= Optional. The width of the clipped image,
sheight= ptional. The height of the clipped image,
x= The x coordinate where to place the image on the canvas,
y= The y coordinate where to place the image on the canvas,
width= Optional. The width of the image to use,
height= Optional. The height of the image to use then
fabric img <=> img
clipTo->ctx.rect <=> sx,sy,swidth,sheight,
left <=> x,
top <=> y,
width <=> width ,
height <=> height
Hope this is clear now :)

Making a kineticjs layer without a background

I currently have some javascript that receives an image from a variable and loads it into the canvas. The canvas is inside a div in order to use kineticjs. I'm loading a regular hexagon with the following code:
function MakeShape()
{
var stage = new Kinetic.Stage({
container: 'container',
width: 490,
height: 225
});
var polyLayer = new Kinetic.Layer();
var hexagon = new Kinetic.RegularPolygon({
x: stage.width()/2,
y: stage.height()/2,
sides: 6,
radius: 70,
fill: 'red',
offset: {
x: 100,
y: 0
},
draggable: true
});
polyLayer.add(hexagon);
stage.add(polyLayer);
}
However, when loading, the layer receives the background of the canvas, when I want the shape to be above the image. Do I have to draw the image onto the layer as well as the shape? How am I supposed to do this when the image is loaded before the shape? Thanks.
I'm not sure what you mean by "javascript receives an image from a variable and loads it into the Canvas". I'm guessing that your Canvas element's is assigned a background-image==that image.
Anyway, new Kinetic.Stage plus new Kinetic.Layer will create a new canvas that covers the container element. So any image you put in your Div and Canvas will be overlaid by the new Canvas that KineticJS creates.
Bottom line...Yes, draw the image onto the layer (using new Kinetic.Image) and eliminate your Canvas element with the image.
Good luck with your project!
[ Added Example code ]
var stage = new Kinetic.Stage({
container: 'container',
width: 490,
height: 225
});
var polyLayer = new Kinetic.Layer();
stage.add(polyLayer);
var hexagon,image1;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/nightscape.jpg";
function start(){
// add the image first
// It's z-index will be lower then the hexagon's z-index
// so the hexagon will be drawn over the image
image1=new Kinetic.Image({
x:0,
y:0,
image:img,
});
polyLayer.add(image1);
hexagon = new Kinetic.RegularPolygon({
x: stage.width()/2,
y: stage.height()/2,
sides: 6,
radius: 70,
fill: 'red',
offset: {
x: 100,
y: 0
},
draggable: true
});
polyLayer.add(hexagon);
polyLayer.draw();
}
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:490px;
height:225px;
}
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<h4>Background image with draggable hex on top.</h4>
<div id="container"></div>

KineticJS: How can I prevent Image from overlapping the stroke?

I have an image which is in a KineticJS layer. When I set a stroke with width > 1 the image will overlap the stroke at some points. Here is a JSFiddle I made:
This image shows the problem:
My Code:
var stage = new Kinetic.Stage({
container: 'container',
width: 800,
height: 900
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function () {
var kimage = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj
});
kimage.strokeEnabled(true);
kimage.stroke("#1788a8");
kimage.strokeWidth(11);
// add the shape to the layer
layer.add(kimage);
// add the layer to the stage
stage.add(layer);
};
imageObj.src = 'https://upload.wikimedia.org/wikipedia/commons/d/da/CatBlackHearts.png';
How can I prevent the image overlapping the stroke?
A canvas stroke is always drawn half-inside and half-outside its bounding box.
The bounding box is the image size.
Therefore your blue stroke is 11/2 = 6.5 pixels inside your image.
So to have your border fully outside the image, you must draw the border separately from the image.

Bouncing image balls with KineticJS

I'm just starting out the KineticJS library and been playing about with it creating shapes etc.. However, I'm struggling to create a custom circle with my own image in it. I have tried using the fillPattern but it doesn't scale/centre correctly at all. Am I meant to use my own circle image or a rectangle image and then let KineticJS take care of things?
Just to give a bit of background: What I want is 3 balls bouncing in and then settling in place.
Any advice is welcome.
Sorted it... needed the offset values
var ball = new Image();
ball.src = 'ball2.jpg';
ball.height = 230;
ball.width = 230;
var stage = new Kinetic.Stage({
container: 'container',
width: 1000,
height: 1000
});
var circle = new Kinetic.Circle({
x: 300,
y: 300,
radius: 115,
fillPatternImage: ball,
fillPatternOffset :{
x: -115,
y: -115
}
});
var layer = new Kinetic.Layer();
// add the shape to the layer
layer.add(circle);
// add the layer to the stage
stage.add(layer);
ball.onload = function () {
stage.draw();
}

Html5 Get Particular Layer image data

i am creating a image slider with html5 and jquery what i want to do is add 3 images on top of each other in one canvas and then get pixeldata of first image and remove some of it's pixels to show 2nd image through first i'm using jCanvas
Plug-in To Do This In Jquery What I've Got So Far Is
$(document).ready(function(){
function invert() {
$("canvas").setPixels({
x: 150, y: 150,
width: 100, height: 75,
// loop through each pixel
each: function(px) {
px.r = 255 - px.r;
px.g = 255 - px.g;
px.b = 255 - px.b;
px.a = 255 - px.a;
}
});
}
$("canvas")
.addLayer({
method: "drawImage",
source: "images/01.jpg",
x: 100, y: 100,
width: 480, height: 440
}).addLayer({
method: "drawImage",
source: "images/02.jpg",
x: 100, y: 100,
width: 380, height: 340
}).addLayer({
method: "drawImage",
source: "images/01.jpg",
x: 100, y: 100,
width: 280, height: 240,
load: invert
})
// Draw each layer on the canvas
.drawLayers();
});
Now What it Does Is making A hole In all the Images Means Erase all the Pixels Of That Portion Of all Images and Show the Background of canvas Is It Possible to Get Only Pixels Of Particular image or layer and Invert It is there any jquery plug-in available? any other way to do that? Any Help On this Will Be Very Useful To Me....Thanx In Advance....
Keep in mind that drawing on a canvas is like painting on paper, it doesn't remember what you drew before only what you have in the canvas right now so if you draw one image and then draw over it with another, the old picture is lost forever.
What you should do is keep all three images in three different buffers (simply load the three different images into three different image objects).
Then draw the top most image in the context.
When you wish to dissolve the first image into the second, instead of deleting pixels from the top image (which will only show the the background), simply use the same coordinates you would use to remove pixels from the first image to get the pixel data from the second image (the coordinates for deleting pixel from the top image can be used as indexes to the image data for the second image) and copy those values to the canvas, again using the same coordinates, for example:
If you algorithm leads you to first remove pixel x = 100, y = 175, use those coordinates to get the data from the buffer of the second image and copy that to the same coordinates in the canvas' image data.
Here's some code:
var width = 300;
var height = 300;
var img1 = new Image();
img1.src = "image1.png";
var img2 = new Image();
img2.src = "image2.png";
function go()
{
// Wait for the images to load
if ( !img1.complete || !img2.complete )
{
setTimeout( go, 100 );
return;
}
// Create a temporary canvas to draw the other images in the background
var tc = document.createElement( "canvas" );
tc.width = width;
tc.height = height;
var c2 = tc.getContext( "2d" );
// Draw the first image in the real canvas (change the ID to your canvas ID)
var c = document.getElementById( "myCanvas" ).getContext( "2d" );
c.drawImage( img1, 0, 0 );
var data1 = c.getImageData( 0, 0, width, height ); // Get the data for the first image
// Draw the second image in the temporary canvas (which is hidden) and get its data
c2.drawImage( img2, 0, 0 );
var data2 = c2.getImageData( 0, 0, width, height );
// Copy the data from the hidden image to the visible one
// This is where your magic comes into play, the following
// is just a very very simple example
var pix1 = data1.data;
var pix2 = data2.data;
for ( var x = 0; x < width; x++ )
{
for ( var y = 0; y < height; y++ )
{
var pos = ( ( y * width ) + x ) * 4;
pix1[ pos ] = pix2[ pos++ ];
pix1[ pos ] = pix2[ pos++ ];
pix1[ pos ] = pix2[ pos++ ];
pix1[ pos ] = pix2[ pos ];
}
}
// Redraw the visible canvas with the new data
c.putImageData( data1, 0, 0 );
}
window.onload = go;
The canvas element does not provide the ability to use layers like that. You may need to check add-ons like canvas collage or CanvasStack

Categories

Resources