I am using fabric js and canvas to add image from url I want to make canvas and containing image responsive as per resolution.How can we do it?
my code is:-
<canvas id="panel" width="700" height="350"></canvas>
<script>
(function() {
var canvas = new fabric.Canvas('panel');
var rect;
fabric.Image.fromURL('abc.jpg', function (img) {
canvas.add(img.set({
width: canvas.width,
height:canvas.height,
originX :'left',
originY :'top',
selectable: false,
}));
});
})();
</script>
As per my knowledge there are no inbuilt functions to achieve this.
But canvas can be made responsive by using native javascript and playing with the screen width and screen height, setting them as canvas width and height.
And same maths you have to apply for all the items drawn in the canvas. (take the ratio of your canvas width or height to screen width or height and use this ratio to resize all the elements on change of view-ports).
Hope it will help you.
Related
I have an iFrame that displays an advertisement 990x90.
I want to make it so mobile viewers can still see the ad, but I need the iframe to resize "evenly", for example, if screen width is 900 I need the hight to be proportionate.
Please help :)
It'd of been so practical if you wrote the code you tried to do what you are asked for so that guys on here can help you as it is hard to guess what your code/goal is or to build it from scratch, However for this time, here is the code you need to achieve what you are asking for as you can see it in action in this JSFiddle, and here's the code needed:
JS:
iFrameOriginalWidth = $('iframe').width();
OnResize();
$(window).resize(function() {
OnResize();
});
function OnResize(){
var winWidth = $(window).width();
if(winWidth < 900){
$('iframe').css({'max-width':'100%'});
}else{
$('iframe').css({'max-width':iFrameOriginalWidth});
}
}
HTML:
<h2>Welcome to my iFrame</h2>
<iframe src="http://www.coffeeipsum.com" width="1100" height="300" frameborder="0" scrolling="no" />
i have 2 images on my stage underneath an overlay image of 2 frames. The user can drag each image as if they were positioninng each image inside a photo frame. The problem i have is the yoda image in this example can overlap and appear inside the darth vader frame on the left (and vice-versa), as shown here:
jsfiddle here:
http://jsfiddle.net/vTLkn/
Is there a way of placing the images inside some form of container or rectangle to stop this so they cannot appear inside another 'frame'?
The final page could end up having up to 5 or 6 frames and images with each image able to be scaled up or down as well as being dragged by the user anywhere they want (i had looked at the dragBoundsFunc but i don't actually want to restrict where they place it just stop the overlapping.
I also tried using a rectangle as an image mask and the image as the fillPatternImage attribute but i cannot then drag and scale the image inside then, just the rectangle itself.
You can use a Kinetic Group plus “yoda cropping” to be sure your images don’t overlap
First create a Group that will contain both the picture frame and the Yoda:
If you need to drag or scale, you would drag or scale the Group (all contained elements would react accordingly)
var group=new Kinetic.Group({
x:20,
y:20,
width:256,
height:256,
draggable:true
})
layer.add(group);
Then add Yoda image which has been cropped to fit in the picture frame.
Since this Yoda image in in the background (lower z-index), any slight overlap with the picture frame will be hidden by the larger picture frame.
Here, the Yoda would be bigger than the picture frame, so it needs to be cropped a bit.
var inner=new Kinetic.Image({
image:Yoda,
x:44,
y:44,
width:168,
height:162,
crop:{
x: 23,
y: 38,
width: 168,
height: 162
}
});
group.add(inner);
Finally, add the picture frame which will be scaled to fit in the group using width/height:
var outer=new Kinetic.Image({
image:pictureFrame,
x:0,
y:0,
width:256,
height:256,
});
group.add(outer);
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/qGHZn/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:400px;
height:400px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
var group=new Kinetic.Group({
x:20,
y:20,
width:256,
height:256,
draggable:true
})
layer.add(group);
//////////////////////////
// START
//////////////////////////
var frame=new Image();
frame.onload=function(){
var pic=new Image();
pic.onload=function(){
var inner=new Kinetic.Image({
image:pic,
x:44,
y:44,
width:168,
height:162,
crop:{
x: 23,
y: 38,
width: 168,
height: 162
}
});
group.add(inner);
var outer=new Kinetic.Image({
image:frame,
x:0,
y:0,
width:256,
height:256,
});
group.add(outer);
layer.draw();
}
pic.src="http://www.html5canvastutorials.com/demos/assets/yoda.jpg";
}
frame.src="woodenframe.png";
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I'm also curious to know if this is a best practice.
I load a sprite map:
canvas = $('#GameCanvas')[0];
context = canvas.getContext('2d');
// load sprite map
spriteMap = new Image();
spriteMap.src = "resources/spritemap.png";
Now I've loaded my sprites, I want to draw them on the screen. I can do so by using context.drawImage(..) but:
I don't know if this is the best way, instead of just extracting each image I want and storing them separately eg. var playerCharacter = [cut the image out of the sprite map]
I want to colorise the images. If I pull out a 'white' sprite, I may then want to colorise it red, green, etc. I don't know how to do this yet, but it will probably require creating a new colorised Image so I'd have to pull it out of the spritemap anyway. I don't want to be recolorising constantly.
Any idea the best way of doing this?
Performance using sprites
Phrogz has some useful FPS tests for CSS vs Canvas here: Efficiency of <canvas> and <div>s They are live tests so you can run them in the environments you want to test.
Recoloring sprites
If you want to quickly take your white sprite and create red, green and blue sprites from it, you can use globalCompositeOperation=”source-in” to do that with very little work. Just use an image editor to create a cutout of the part of the image you want to recolor. Then use the code below to automatically create different colored sprites. I did the mask below in Photoshop using the magic want tool – 2 minutes tops!
Original Fish + Mask = Green Fish
Of course, you can create any color you want...even patterns instead of solid colors!
Here’s code. You will probably have to create your own image and mask because of CORS – stupid CORS !!
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
canvas{border:1px solid red;}
#wrapper{ position:relative;}
#overlay,#base{ position:absolute; top:0; left:0;}
</style>
<script>
$(function(){
var canvas=document.getElementById("overlay");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
ctx.drawImage(img,0,0,img.width,img.height,0,0,overlay.width,overlay.height);
}
img.src="http://dl.dropbox.com/u/139992952/stackoverflow/fish%20overlay.png";
function draw(red,green,blue) {
ctx.save();
ctx.globalCompositeOperation = 'source-in';
ctx.fillStyle="rgb("+red+","+green+","+blue+")";
ctx.beginPath();
ctx.rect(0,0,overlay.width,overlay.height);
ctx.fill();
ctx.restore();
}
$("#red").click(function(){ draw(255,0,0); });
$("#green").click(function(){ draw(0,255,0); });
$("#blue").click(function(){ draw(0,0,255); });
});
</script>
</head>
<body>
<button id="red">Red Fish</button>
<button id="green">Green Fish</button>
<button id="blue">Blue Fish</button>
<div id="wrapper">
<img id="base" src="http://dl.dropbox.com/u/139992952/stackoverflow/fish.png" width=350 height=250>
<canvas id="overlay" width=350 height=250></canvas>
</div>
</body>
</html>
What I have so far: http://sem.serialshop.nl/video/
My goal is to manipulate the video pixels to show corresponding information inside the pupil when hovering one of the buttons. Can I delete the pixels inside the pupil, and replace it with an image?
Removing pixels from an mp4 video—removing pixels of an eye pupil
As darma says, you can probably finish your project by just using context.drawImage() to superimpose your image over the pupil. Here's how you do that.
Also, here's how you would remove the pixels of the pupil (as you asked).
Background
You can take an mp4 video and draw it frame-by-frame into a canvas.
The canvas drawing rate is quick enough that the results look as good as the video they were taken from.
More interestingly, you can manipulate each frame as it’s drawn into the canvas. This allows you to take the pixels of the pupil and replace them.
Manipulating pixels:
You manipulate the canvas frame by using context.getImageData() to grab the pixels into a data array.
Then you manipulate the data array in whatever way you wish.
Finally, you put the modified data array back into the canvas using context.putImageData().
The canvas then shows the modified pixels!
Your Solution
To solve your problem, we get the bounding-box containing the pupil. Every time we see a nearly-black pixel in that bounding box, we know it’s the pupil and we can modify that nearly-black pixel. In the following working code, we just change the pixel from nearly-black to pure red. However, you can do whatever you desire to the pupil pixels.
Here is code to draw the video with the pupil pixels colored red:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var centerX=315;
var centerY=150;
var radius=10;
var rx=267;
var ry=98;
var rwidth=101;
var rheight=95;
var video = document.getElementById('vid');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var cw = 638;
var ch = 358;
canvas.width = cw;
canvas.height = ch;
video.addEventListener('play', function(){
draw(this,ctx,cw,ch);
},false);
function draw(video,context,w,h) {
if(video.paused || video.ended) return false;
context.drawImage(video,0,0,w,h);
// at this point you could also draw a second image
// into the pupil of the eye like this
// context.drawImage(myImage,rx,ry,rwidth,rheight);
// but what we do here is just put a red bounding box
// around the pupil so that we can see we are
// properly focusing on the pupil area
context.fillStyle="blue";
context.strokeStyle="red";
context.lineWidth=2;
context.beginPath();
context.rect(rx,ry,rwidth,rheight);
context.stroke();
extractPupil(context);
setTimeout(draw,150,video,context,w,h);
}
function extractPupil(context){
// get just the bounding rectangle of the pupil
// NOT the whole canvas.
var imgData=context.getImageData(rx,ry,rwidth,rheight);
var data=imgData.data;
for(var i=0;i<data.length;i+=4){
// if the pixel color is nearly black--change it to red
if(data[i]<20 && data[i+1]<20 && data[i+2]<20){
data[i]=255;
data[i+1]=0;
data[i+2]=0;
}
}
// put the modified pixels back into the canvas
// Now the pupil is colored pure red!
context.putImageData(imgData,rx,ry);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas"></canvas>
<video id="vid" controls loop>
<source src="eye.mp4" type=video/mp4>
</video>
</body>
</html>
I want to know how to load an image into the HTML5 canvas. Specifically, I want a script that swaps one image for another on the canvas during mouse over with the original image fading out. I am new to HTML5 and have this code:
<canvas id="myCanvas" width="500" height="500" />
<script type="text/javascript">
function drawbackground() {
char.fillStyle="blue";
cxt.fillRect(0,0,500,500);
}
var charx=0;
var chary=0;
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var char=c.getContext("2d");
drawbackground();
char.fillStyle="black";
var imgObj = new Image();
imgObj.src='map1.png';
imgObj.onload = function () {
// Draw the image on the canvas
char.drawImage(imgObj, 10, 10);
}
</script>
Is this in the right direction?
You can do this without the HTML5 Canvas. To swap an image on mouse over it is easiest to use a JavaScript Framework called jQuery, get it for free here: http://jquery.com/.
With jQuery all you need to do is something like the following:
First, create an image Tag.
<img src="image1.png" id="myimage" />
Next add JavaScript to handle the mouse over event. You can learn more about jQuery events here: http://api.jquery.com/category/events/
$("#myimage").mouseover(function() {
$(this).src = this.src.replace("image2.png");
});
The example above will change the image on mouse over. To do the fade effects, you need to do a little more: You can learn more about jQuery effects here: http://api.jquery.com/category/effects/
I would create two images for the effect and position each over the other with the css property set to hide image 2.
<div id="imageHolder">
<img src="image1.png" id="myimage1" />
<img src="image2.png" id="myimage2" style="display:none" />
</div>
Next comes the JavaScript:
$("#imageHolder").mouseover(function() {
$("#image1").fadeOut();
$("#image2").show();
});
$("#imageHolder").mouseout(function() {
$("#image1").fadeIn();
$("#image2").hide();
});
There are many ways to accomplish this and the code above is not tested, but should provide you with a basis to quickly create the desired effect.