Improve HTML5 Canvas frame by frame JPG animation to fully cache before animating
The above code snippet is great. I'd like to be able to apply new widths with css/media queries to the canvas that holds the jpgs. Is there a way to add that to the above code?
when I tried it my jpg's became wildly oversized.
It appears in the above code that the height and width declared in js for the image and the height and width on the canvas tag need to match or things get wonky.
I want to dynamically call the image width with CSS and media queries.
thanks
<style type="text/css">
/*CSS for full screen animation.You may want to remove this*/
html,body {
height:100%;
width:100%;
padding:0;
margin:0;
}
/*ID for Canvas JPG Animation - Sets size, background image and loader*/
#anim {
background-image:url('images/icon_loading_75x75.gif'),url('images/t5.png');
/*Center=Loading GIF, Left Top= Placeholder Image*/
background-position: center, left top;
background-repeat: no-repeat;
height:500px;
width:660px;
}
</style>
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('anim').getContext("2d");
var start = 1, stop = 121,cur=start,imgArr=[];
//Pre-loads Images
var loadLoop = function() {
var img = document.createElement("img");
img.onload = function() {
imgArr.push(this);
cur++;
if(cur > stop) {
// all images preloaded
animate();
}
else {
loadLoop();
}
}
//img.src = "jpg_80/t5_"+(cur)+".jpg";
img.src = "http://html5canvas.syntheticmedia.net/jpg_80/t5_"+(cur)+".jpg";
//jpg_80/t5_88.jpg
}
loadLoop();
//Canvas JPG Animation
function animate() {
var timer = setInterval(function() {
ctx.drawImage(imgArr.shift(), 0, 0 );
if(imgArr.length == 0) {
// no more frames
clearInterval(timer);
}
//Framerate # 24 Frames per Second
},1000/24);
}
}
</script>
<script src="modernizr-2.6.2.min.js" type="text/javascript">
</script>
<body>
<!-- HTML5 Canvas Animation-->
<canvas id="anim" width="660" height="500"></canvas>
<script>
//call after page loaded
window.onload = draw;
</script>
</body>
Related
I'm implementing a game using a canvas as the renderer, and there are some points where there seem to be excessive "waits" between render frames and I have no idea what to think of this.
I've been working on this for the past few weeks and for the most part, there haven't really been issues. However, when there are a lot of things on screen there is a "wait" for some reason.
It takes about the same amount of time that the rendering code does before "composite layers" is called. I don't know if this is something that I can prevent or if it is just something that I have to live with. I'm only getting to the point where I'm going below 60 fps in extreme situations anyway.
Another example:
index.js
window.onload = () => {
const width = 1280;
const height = 720;
const canvas = document.getElementById("game-canvas");
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
function renderLoop() {
console.time("render");
// Do render and request next frame
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < 13000; i++) {
// Not real code this is just to demonstrate the issue
ctx.fillRect(i % width, 10 * Math.floor(i / (width)), 10, 10);
}
console.timeEnd("render");
requestAnimationFrame(renderLoop);
}
requestAnimationFrame(renderLoop);
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
canvas {
border: 2px solid black;
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<script src="./index.js"></script>
<canvas id="game-canvas"></canvas>
</body>
</html>
I am trying to convert an image to another color using kineticjs, actually my image will be on a layer and also a png one can i change only the image objects color? any help will be very greatful
You can replace non-transparent pixels with a new color using compositing.
In particular source-atop compositing will replace all existing non-transparent pixels with any color you draw.
KineticJS does not currently offer compositing out-of-the-box, but you can easily use an html5 Canvas element to do the compositing and then use that element as an image source for a Kinetic.Image element.
Here's example code and a Demo:
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var canvas=document.createElement('canvas');
var ctx=canvas.getContext('2d');
var kImage;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/flower.png";
function start(){
cw=canvas.width=img.width;
ch=canvas.height=img.height;
ctx.drawImage(img,0,0);
kImage=new Kinetic.Image({
image:canvas,
width:img.width,
height:img.height,
draggable:true,
});
layer.add(kImage);
layer.draw();
document.getElementById('makeGreen').onclick=function(){
ctx.globalCompositeOperation='source-atop';
ctx.fillStyle='lightgreen';
ctx.fillRect(0,0,cw,ch);
layer.draw();
};
document.getElementById('makeOriginal').onclick=function(){
ctx.globalCompositeOperation='source-over';
ctx.drawImage(img,0,0);
layer.draw();
};
}
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<button id=makeGreen>Green</button>
<button id=makeOriginal>Original</button>
<div id="container"></div>
Here's my example: http://jsbin.com/urofan/7/edit
I would like to draw the video into a custom shape, not in a rectangle shape, is that possible right now? (PS: The shape is draggable) All I found in StackO or in the web are for rectangular drawings...
In the future, the shape will be a circle with adjustable radius and position (draggable and resizable).
Thanks for your help.
Allan.
You can contain an image (video frame grab) into a path using the clip method.
First define the path you want the video frame to be contained in.
Note that you don’t have to do fill/stroke.
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.lineTo(250, 400);
context.lineTo(40, 80);
context.closePath();
Next, create a clipping path from your defined path.
Everything drawn after this will be clipped inside your clipping path.
context.clip();
Finally, draw a frame grab of the video and drawImage into the clipping path.
The frame grab will only appear inside your clipping path.
context.drawImage(0,0,canvas.width,canvas.height);
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/aMW74/
<!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.1.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Kinetic.Layer();
stage.add(layer);
var img=document.createElement("img");
img.onload=function(){
drawClippedImage(img);
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";
function drawPathForClipping(context){
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.lineTo(250, 400);
context.lineTo(40, 80);
context.closePath();
}
function drawClippedImage(img){
var shape = new Kinetic.Shape({
id: 'shape',
drawFunc: function(canvas) {
var context = canvas.getContext();
// define the path that will be used for clipping
drawPathForClipping(context);
// make the last path a clipping path
context.clip();
// draw a clipped image (frame grab)
context.drawImage(img,0,0,img.width,img.height);
// styling, draw the clip path for real as a border
drawPathForClipping(context);
canvas.stroke(this);
},
stroke: 'black',
strokeWidth: 4,
draggable: true
});
// add the shape shape to the layer
layer.add(shape);
layer.draw();
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
UPDATE: Got a jsfiddle up # http://jsfiddle.net/gacDy/7/ , however, I can't even seem to get this working correctly. I'll keep working on it, but hopefully it'll help.
I'm using Hammer.js for an app I'm working on. For now, I've got a demo that I got on the web somewhere that I'm using to figure out how to make this work. For the demo I have two images (I'll post screenshots below) that I'm trying to get to zoom independently with hammer.js.
As things are right now, both images zoom, but the second one zooms into the region where the first image is. (See screenshots below)
Pre-zoom image:
Post-zoom image:
Code for images:
<div id="zoom2">
<img src="Chrysanthemum.jpg" alt="" width="600" height="377" />
</div>
<div id="zoom">
<img src="waldo.jpg" alt="" width="600" height="377" />
</div>
Functions and such:
<div id="debug"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="hammer.js"></script>
<script src="jquery.hammer.js"></script>
<script src="jquery.specialevent.hammer.js"></script>
<script>
var debug_el = $("#debug");
// disable the dragging of images on desktop browsers
$("img").bind("dragstart", function() {
return false;
});
$(function(){
var zoom = new ZoomView('#zoom','#zoom :first');
});
function ZoomView(container, element) {
container = $(container).hammer({
prevent_default: true,
scale_treshold: 0,
drag_min_distance: 0
});
element = $(element);
// prefixes
var vendorPrefixes = ["", "-webkit-", "-moz-", "-o-", "-ms-", "-khtml-"];
var displayWidth = container.width();
var displayHeight = container.height();
//These two constants specify the minimum and maximum zoom
var MIN_ZOOM = 1;
var MAX_ZOOM = 5;
var scaleFactor = 1;
var previousScaleFactor = 1;
//These two variables keep track of the X and Y coordinate of the finger when it first
//touches the screen
var startX = 0;
var startY = 0;
//These two variables keep track of the amount we need to translate the canvas along the X
//and the Y coordinate
var translateX = 0;
var translateY = 0;
//These two variables keep track of the amount we translated the X and Y coordinates, the last time we
//panned.
var previousTranslateX = 0;
var previousTranslateY = 0;
//Translate Origin variables
var tch1 = 0,
tch2 = 0,
tcX = 0,
tcY = 0,
toX = 0,
toY = 0,
cssOrigin;
var last_drag_event;
container.bind("transformstart", function(event){
//We save the initial midpoint of the first two touches to say where our transform origin is.
tch1 = [event.touches[0].x, event.touches[0].y];
tch2 = [event.touches[1].x, event.touches[1].y];
tcX = (tch1[0]+tch2[0])/2;
tcY = (tch1[1]+tch2[1])/2;
toX = tcX;
toY = tcY;
cssOrigin = toX +"px "+ toY +"px";
});
container.bind("transform", function(event) {
scaleFactor = previousScaleFactor * event.scale;
scaleFactor = Math.max(MIN_ZOOM, Math.min(scaleFactor, MAX_ZOOM));
transform(event);
});
container.bind("transformend", function(event) {
previousScaleFactor = scaleFactor;
});
container.bind("drag", function(event) {
cssOrigin = (toX + (toX-event.position.x) / scaleFactor) +"px " +
(toY + (toY-event.position.y) / scaleFactor) +"px";
transform(event);
last_drag_event = event;
});
container.bind("dragend", function(event) {
toX += ((toX - last_drag_event.position.x) / scaleFactor);
toY += ((toY - last_drag_event.position.y) / scaleFactor);
cssOrigin = toX +"px "+ toY +"px";
transform(event);
debug_el.text('TX: '+toX+' TY: '+toY);
});
function transform(event) {
//We're going to scale the X and Y coordinates by the same amount
var cssScale = "scale("+ scaleFactor +")";
var props = {};
$(vendorPrefixes).each(function(i, vendor) {
props[vendor +"transform"] = cssScale;
props[vendor +"transform-origin"] = cssOrigin;
});
element.css(props);
debug_el.text('TX: '+translateX+' TY: '+translateY+' '+element.css('-webkit-transform-origin'))
}
}
</script>
-- I duplicated the above code and changed any references to the first image to reference the second image in order to make the second image zoomable. But like I mentioned it's not working correctly. I've tried changing around all my variable names in case I missed a reference to the 1st image that could be causing this overlap but nothing has helped.
EDIT: This may also be pertinent:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
#zoom {
height: 377px;
width: 600px;
overflow: hidden;
position:relative;
background: #eee;
border: solid 1px #ccc;
}
</style>
<meta name="viewport2" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style>
#zoom2 {
height: 377px;
width: 600px;
overflow: hidden;
position:static;
background: #eee;
border: solid 1px #ccc;
}
</style>
I just need help figuring out how to keep the second image from disappearing into the 1st image when zooming. I'd appreciate any help I can get. Thanks all.
I want to get a .jpg on a canvas, add a rectangle and a String, which is working very good. After that I want to create a jpg out of the canvas, which works fine but the jpg of the canvas does only show the rectangle and the String. Quick Code-example - i know its a ugly canvas - just testing ;)
<!DOCTYPE html>
<html>
<body>
<canvas id="meinCanvas" width="600" height="600" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</body>
<script type="text/javascript">
var canv = document.getElementById("meinCanvas");
var context = canv.getContext("2d");
context.fillStyle = "#000000";
context.fillRect(10,10, 200, 100);
var img = new Image();
img.onload = function() {
context.drawImage(img, 300, 300);
};
img.src="one.jpg";
context.font = "bold 12px sans-serif";
context.fillText("test", 500, 500);
imgsr = canv.toDataURL("image/jpeg");
document.write('<img src="' +imgsr +'"/>');
</script>
</html>
}
In the upper part (the canvas) the img is shown properly, but in the .jpeg beneth it the img is not shown. Help would be great. thanks.
Image is not loaded yet when you save it.
Put the toDataUrl in img.onload or link it to an event or timer