We Keep Coding

Resize image in html5 canvas

I'm taking image input from user, then resizing and showing it on a canvas. Here is the code-
HTML-
<form class="cmxform">
<input type='file' id="Photo" />
<canvas id="canvas" width="300" height="200"></canvas>
</form>
JavaScript-
$("#Photo").change(function (e) {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = URL.createObjectURL(e.target.files[0]);
img.onload = function () {
ctx.drawImage(img, 0, 0, img.width, img.height, // source rectangle
0, 0, canvas.width, canvas.height); // destination rectangle
}
});
But here I'm loosing the aspect ratio. Is there any way to do it?
UPDATE-
I've got the answer from this sa question -

Here is a snippet to help you for that
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
var fill = true;
if (fill)
{
$('#fill').attr("disabled", true);
}
$("#Photo").change(function (e) {
img.src = URL.createObjectURL(e.target.files[0]);
img.onload = function () {
if (fill)
{
drowImageFill(img);
}
else
{
drowImageCenter(img);
}
}
});
$("#fill").click(function(){
//console.log("fill");
var input = document.getElementById('Photo');
if (input.files[0] !== undefined)
{
img.src = URL.createObjectURL(input.files[0]);
img.onload = function () {
drowImageFill(img);
}
}
$('#fill').attr("disabled", true);
$('#center').attr("disabled", false);
fill = true;
});
$("#center").click(function(){
//console.log("center");
var input = document.getElementById('Photo');
if (input.files[0] !== undefined)
{
img.src = URL.createObjectURL(input.files[0]);
img.onload = function () {
drowImageCenter(img);
}
}
$('#center').attr("disabled", true);
$('#fill').attr("disabled", false);
fill = false;
});
//ratio formula
//http://andrew.hedges.name/experiments/aspect_ratio/
function drowImageFill(img){
ctx.clearRect(0, 0, canvas.width, canvas.height);
//detect closet value to canvas edges
if( img.height / img.width * canvas.width > canvas.height)
{
// fill based on less image section loss if width matched
var width = canvas.width;
var height = img.height / img.width * width;
offset = (height - canvas.height) / 2;
ctx.drawImage(img, 0, -offset, width, height);
}
else
{
// fill based on less image section loss if height matched
var height = canvas.height;
var width = img.width / img.height * height;
offset = (width - canvas.width) / 2;
ctx.drawImage(img, -offset , 0, width, height);
}
}
function drowImageCenter(img)
{
ctx.clearRect(0, 0, canvas.width, canvas.height);
if( img.height / img.width * canvas.width < canvas.height)
{
// center based on width
var width = canvas.width;
var height = img.height / img.width * width;
offset = (canvas.height - height) / 2;
ctx.drawImage(img, 0, offset, width, height);
}
else
{
// center based on height
var height = canvas.height;
var width = img.width / img.height * height;
offset = (canvas.width - width) / 2;
ctx.drawImage(img, offset , 0, width, height);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="300" height="200" style="border:2px solid #000000;"></canvas>
<form class="cmxform">
<input type='file' id="Photo" />
</form>
<button id="fill">Fill</button>
<button id="center">Center</button>

HTML5 Canvas scaling an image animation

I've created a straight forward linear HTML5 animation but I now want the image to continuously scale bigger then smaller until the end of the canvas' height.
What's the best way to do this?
Here's a JSFIDDLE
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame;
var canvas = document.getElementById('monopoly-piece');
var context = canvas.getContext('2d');
var img = document.createElement("img");
img.src = "images/tophat.png";
img.shadowBlur = 15;
img.shadowColor = "rgb(0, 0, 0)";
var xSpeed = 0; //px per ms
var ySpeed = 0.15;
function animate(nowTime, lastTime, xPos, yPos) {
// update
if ((img.style.height + yPos) > canvas.height) {
xPos = 0;
yPos = 0;
}
var timeDelta = nowTime - lastTime;
var xDelta = xSpeed * timeDelta;
var yDelta = ySpeed * timeDelta;
// clear
context.clearRect(0, 0, canvas.width, canvas.height);
// shadow
context.shadowOffsetX = 3;
context.shadowOffsetY = 7;
context.shadowBlur = 4;
context.shadowColor = 'rgba(0, 0, 0, 0.4)';
//draw img
context.drawImage(img, xPos, yPos);
if (yPos > canvas.height - img.height ) {
addMarker();
}
else {
requestAnimationFrame(
function(timestamp){
animate(timestamp, nowTime, xPos + xDelta, yPos + yDelta);
}
);
}
}
animate(0, 0, -10, 0);
Here is my current code which animates an image from the top of the canvas element to the bottom and then stops.
Thanks.

context.DrawImage has additional parameters that let you scale your image to your needs:
// var scale is the scaling factor to apply between 0.00 and 1.00
// scale=0.50 will draw the image half-sized
var scale=0.50;
// var y is the top position on the canvas where you want to drawImage your image
var y=0;
context.drawImage(
// draw img
img,
// clip a rectangular portion from img
// starting at [top,left]=[0,0]
// and with width,height == img.width,img.height
0, 0, img.width, img.height,
// draw that clipped portion of of img on the canvas
// at [top,left]=[0,y]
// with width scaled to img.width*scale
// and height scaled to img.height*scale
0, y, img.width*scale, img.height*scale
)
Here's an example you can start with and fit to your own design needs:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var scale = 1;
var scaleDirection = 1
var iw, ih;
var y = 1;
var yIncrement = ch / 200;
var img = new Image();
img.onload = start;
img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/sun.png";
function start() {
iw = img.width;
ih = img.height;
requestAnimationFrame(animate);
}
function animate(time) {
if (scale > 0) {
requestAnimationFrame(animate);
}
ctx.clearRect(0, 0, cw, ch);
ctx.drawImage(img, 0, 0, iw, ih, 0, y, iw * scale / 100, ih * scale / 100);
scale += scaleDirection;
if (scale > 100) {
scale = 100;
scaleDirection *= -1;
}
y += yIncrement;
}
$("#test").click(function() {
scale = y = scaleDirection = 1;
requestAnimationFrame(animate);
});
body{ background-color: ivory; }
canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="test">Animate Again</button>
<br>
<canvas id="canvas" width=80 height=250></canvas>

Center Zoom out with canvas

I'm iplementing zoom out effect of an image. But after it's scaled and zoom out, the image isn't on center of canvas.
This is my code:
var canvas = document.getElementById('canvas');
var image = document.getElementById('image');
var ctx = canvas.getContext("2d");
var zoomDelta = 0.025; // 10 steps in 10s, scale from 5 to 1
var currentScale = 5;
var img = new Image();
img.src = image.src;
img.onload = function() {
ctx.canvas.width = img.width;
ctx.canvas.height = img.height;
}
$("#start").on("click", function () {
ctx.translate(canvas.width / 2, canvas.height / 2);
drawImage();
var zoom1 = window.setInterval(
function() {
if(currentScale < 1)
window.clearInterval(zoom1);
else
reDraw();
}, 50
);
});
function reDraw() {
currentScale -= zoomDelta;
drawImage();
}
function drawImage() {
clear();
ctx.save();
ctx.scale(currentScale, currentScale);
ctx.drawImage(img, -img.width / 2, -img.width / 2);
ctx.restore();
}
function clear() {
ctx.clearRect(-img.width / 2 - 2, -img.width / 2 - 2, img.width + 4, img.height + 4);
}
Thanks in advance.
Btw, this is its fiddle: http://jsfiddle.net/huynq/RK2D7/

Translate to the point on which you want to center the image.
A Demo: http://jsfiddle.net/m1erickson/QEuw4/
var cx=canvas.width/2;
var cy=canvas.height/2;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
ctx.translate(cx,cy);
ctx.scale(scale,scale);
ctx.drawImage(img,-img.width/2,-img.height/2);
ctx.restore();

Loader image not showing up when canvas rotating and resizing operation is going on selected file

I have created sample code here http://jsfiddle.net/kamlesh_bhure/YpejU/ where i am rotating image and resizing it as per max height and width.
Before starting this process I am showing mask with loading image and hiding it after completing it. But I am not able to see this loader on mobile device or on desktop browser even though I used large image.
Also I want to show loading image till browser complete its rendering of processed image.
Thanks in advance.
<!-- HTML Code -->
<div id="mask" class="newLoaderMask">
<img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif" width="200" id="loader" />
</div>
<input type="file" accept="image/*" id="takePictureField" />
<div class="captureInsuPanel">
<img id="yourimage" class="imgWeightHght" width="500" />
</div>
<canvas id="hidden_canvas_old"></canvas>
<canvas id="hidden_canvas_new"></canvas>
<style>
#yourimage {
width:100%;
}
.imgWeightHght {
height: 290px !important;
width: 220px !important;
}
.captureInsuPanel img {
height: auto;
width: auto;
}
.newLoaderMask {
display: none;
background: #E5E5E5;
position: fixed;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
opacity: 0.8;
z-index: 999;
}
</style>
<script>
//Js Code
$(document).ready(function () {
$("#takePictureField").on("change", gotPic);
});
function gotPic(event) {
if (event.target.files.length == 1 && event.target.files[0].type.indexOf("image/") == 0) {
var image = event.target.files[0];
$("#yourimage").attr("src", URL.createObjectURL(image));
drawRotatedImage(image, 90, 800, 1000);
}
}
function drawRotatedImage(image, angle, max_width, max_height) {
//show loading mask
$('#mask').show();
var fileLoader = new FileReader(),
imageObj = new Image();
if (image.type.indexOf("image/") == 0) {
fileLoader.readAsDataURL(image);
} else {
alert('File is not an image');
}
fileLoader.onload = function () {
var data = this.result;
imageObj.src = data;
};
fileLoader.onabort = function () {
alert("The upload was aborted.");
};
fileLoader.onerror = function () {
alert("An error occured while reading the file.");
};
// set up the images onload function which clears the hidden canvas context,
// draws the new image then gets the blob data from it
imageObj.onload = function () {
var imgWidth = this.width;
var imgHeight = this.height;
rotateAndResize(this, imgWidth, imgHeight);
};
function rotateAndResize(image, imgWidth, imgHeight) {
var canvas = document.getElementById("hidden_canvas_old"),
ctx = canvas.getContext("2d");
var widthHalf = imgWidth / 2,
heightHalf = imgHeight / 2;
canvas.width = imgWidth;
canvas.height = imgWidth;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle * Math.PI / 180);
ctx.drawImage(image, -widthHalf, -widthHalf);
ctx.restore();
var tempCanvas = document.getElementById("hidden_canvas_new"),
tCtx = tempCanvas.getContext("2d");
tempCanvas.width = imgHeight;
tempCanvas.height = imgWidth;
/*
* Crop rotated image from old canvas to remove white space
* So that canvas will have only image content without extra padding
*/
tCtx.drawImage(canvas, canvas.width - imgHeight, 0, imgHeight, imgWidth, 0, 0, imgHeight, imgWidth);
tCtx.restore();
/**
* Resizing Rotated image
*/
// calculate the width and height, constraining the proportions
if (imgWidth > imgHeight) {
if (imgWidth > max_width) {
imgHeight = Math.round(imgHeight *= max_width / imgWidth);
imgWidth = max_width;
}
} else {
if (imgWidth > max_height) {
imgWidth = Math.round(imgWidth *= max_height / imgHeight);
imgHeight = max_height;
}
}
var tempCanvasTemp = tempCanvas;
tempCanvas.remove();
canvas.remove();
var tempCanvas1 = document.createElement("canvas"),
tCtx1 = tempCanvas1.getContext("2d");
tempCanvas1.id = 'hidden_canvas_new';
//tempCanvas1.style.display = 'none';
tempCanvas1.width = imgHeight;
tempCanvas1.height = imgWidth;
tCtx1.drawImage(tempCanvasTemp, 0, 0, imgHeight, imgWidth);
tCtx1.restore();
document.body.appendChild(tempCanvas1);
$("#yourimage").attr("src", tempCanvas1.toDataURL('image/jpeg'));
}
//hide loading mask
$('#mask').hide();
}
</script>

You are hiding your loading div #mask in drawRotatedImage function but you should hide it in rotateAndResize function where you are drawing your picture to canvas.
CODE:
$(document).ready(function () {
$("#takePictureField").on("change", gotPic);
});
function gotPic(event) {
if (event.target.files.length == 1 && event.target.files[0].type.indexOf("image/") == 0) {
var image = event.target.files[0];
$("#yourimage").attr("src", URL.createObjectURL(image));
drawRotatedImage(image, 90, 800, 1000);
}
}
function drawRotatedImage(image, angle, max_width, max_height) {
$('#mask').show();
var fileLoader = new FileReader(),
imageObj = new Image();
if (image.type.indexOf("image/") == 0) {
fileLoader.readAsDataURL(image);
} else {
alert('File is not an image');
}
fileLoader.onload = function () {
var data = this.result;
imageObj.src = data;
};
fileLoader.onabort = function () {
alert("The upload was aborted.");
};
fileLoader.onerror = function () {
alert("An error occured while reading the file.");
};
// set up the images onload function which clears the hidden canvas context,
// draws the new image then gets the blob data from it
imageObj.onload = function () {
var imgWidth = this.width;
var imgHeight = this.height;
rotateAndResize(this, imgWidth, imgHeight);
};
function rotateAndResize(image, imgWidth, imgHeight) {
var canvas = document.getElementById("hidden_canvas_old"),
ctx = canvas.getContext("2d");
var widthHalf = imgWidth / 2,
heightHalf = imgHeight / 2;
canvas.width = imgWidth;
canvas.height = imgWidth;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle * Math.PI / 180);
ctx.drawImage(image, -widthHalf, -widthHalf);
ctx.restore();
var tempCanvas = document.getElementById("hidden_canvas_new"),
tCtx = tempCanvas.getContext("2d");
tempCanvas.width = imgHeight;
tempCanvas.height = imgWidth;
/*
* Crop rotated image from old canvas to remove white space
* So that canvas will have only image content without extra padding
*/
tCtx.drawImage(canvas, canvas.width - imgHeight, 0, imgHeight, imgWidth, 0, 0, imgHeight, imgWidth);
tCtx.restore();
/**
* Resizing Rotated image
*/
// calculate the width and height, constraining the proportions
if (imgWidth > imgHeight) {
if (imgWidth > max_width) {
imgHeight = Math.round(imgHeight *= max_width / imgWidth);
imgWidth = max_width;
}
} else {
if (imgWidth > max_height) {
imgWidth = Math.round(imgWidth *= max_height / imgHeight);
imgHeight = max_height;
}
}
var tempCanvasTemp = tempCanvas;
tempCanvas.remove();
canvas.remove();
var tempCanvas1 = document.createElement("canvas"),
tCtx1 = tempCanvas1.getContext("2d");
tempCanvas1.id = 'hidden_canvas_new';
//tempCanvas1.style.display = 'none';
tempCanvas1.width = imgHeight;
tempCanvas1.height = imgWidth;
tCtx1.drawImage(tempCanvasTemp, 0, 0, imgHeight, imgWidth);
tCtx1.restore();
document.body.appendChild(tempCanvas1);
$("#yourimage").attr("src", tempCanvas1.toDataURL('image/jpeg'));
$('#mask').hide();
}
}
DEMO FIDDLE
NOTE: While testing fiddle found out one more issue, if we try to upload image second time second canvas in not updating with new image. Hope you need to work on this.

How to rotate Image using native javascript

I'm developing a game using HTML5 canvas element and native javascript. I have different sprites for game objects. Is it possible to rotate sprites using native javascript?
For example, I have a sprite image like this:
I use Image for this sprite:
var image = new Image(...);
image.src = "...";
After loading I want to rotate this image and save different projections in local variables:
var sprite_left = rotate(image, 0),
sprite_top = rotate(image, 90),
sprite_right = rotate(image, 180),
sprite_right = rotate(image, 270);
The rotate function should look like this:
function rotate(sourceImage, angle){
...
}
Could anybody help me to write the rotate function?
EDIT:
I have decided to share my code, which I used to test my sprites:
var wait = function (image, completed, count) {
if (count == null) count = 0;
if (!image.complete && count < 1000) {
count++;
window.setTimeout(function () {
wait(image, completed, count);
console.log('waiting...');
}, 10);
}
else {
completed();
}
},
rotateW = function (image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var p = document.createElement("p");
p.innerText = "W: ";
p.appendChild(canvas);
document.body.appendChild(p);
var context = canvas.getContext("2d");
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(Math.PI);
context.translate(-canvas.width / 2, -canvas.height / 2);
context.drawImage(image, 0, 0);
var newImage = new Image();
newImage.src = canvas.toDataURL("image/png");
return newImage;
},
rotateE = function (image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var p = document.createElement("p");
p.innerText = "E: ";
p.appendChild(canvas);
document.body.appendChild(p);
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0);
var newImage = new Image();
newImage.src = canvas.toDataURL("image/png");
return newImage;
},
rotateS = function (image, frameCount) {
var canvas = document.createElement("canvas");
canvas.width = image.height * frameCount;
canvas.height = image.width / frameCount;
var p = document.createElement("p");
p.innerText = "S: ";
p.appendChild(canvas);
document.body.appendChild(p);
var context = canvas.getContext("2d");
context.translate(image.height / 2, image.width / (2 * frameCount));
context.rotate(Math.PI / 2);
var i = frameCount;
while (i--> 0) {
context.drawImage(image, - image.width / 2 , - ( 0.5 + i ) * image.height);
}
var newImage = new Image();
newImage.src = canvas.toDataURL("image/png");
return newImage;
},
rotateN = function (image, frameCount) {
var canvas = document.createElement("canvas");
canvas.width = image.height * frameCount;
canvas.height = image.width / frameCount;
var p = document.createElement("p");
p.innerText = "N: ";
p.appendChild(canvas);
document.body.appendChild(p);
var context = canvas.getContext("2d");
context.translate(image.height / 2, image.width / (2 * frameCount));
context.rotate( 3 * Math.PI / 2);
var i = frameCount;
while (i-- > 0) {
context.drawImage(image, -image.width / 2, (frameCount - i - 1.5) * image.height);
}
var newImage = new Image();
newImage.src = canvas.toDataURL("image/png");
return newImage;
};
/*
N
|
W----O----E
|
S
*/
getSprites = function (image, frameCount) {
var sprite = {
N: rotateN(image, frameCount),
S: rotateS(image, frameCount),
W: rotateW(image, frameCount),
E: rotateE(image, frameCount)
};
return [
sprite.W, // left
sprite.N, // up
sprite.E, // right
sprite.S] // down
};
$.sprite = {
register: function (options) {
var image = new Image();
image.src = options.src;
wait(image, function () {
var sprites = getSprites(image, options.frameCount);
});
}
};
The final result is:

the following function will create a new Canvas out
of img (which might be an image or a canvas).
Give it an angle in radian, or 'N', 'S', 'W' for
the corresponding rotation.
function createRotatedImage(img, angle) {
angle = (angle == 'N') ? -Math.PI/2 :
(angle == 'S') ? Math.PI/2 :
(angle == 'W') ? Math.PI :
angle ;
var newCanvas = document.createElement('canvas');
newCanvas.width = img.width ;
newCanvas.height = img.height ;
var newCtx = newCanvas.getContext('2d') ;
newCtx.save () ;
newCtx.translate ( img.width / 2, img.height / 2) ;
newCtx.rotate (angle);
newCtx.drawImage ( img, - img.width / 2, - img.height / 2) ;
newCtx.restore () ;
}

Use a <canvas> to pre-render the different rotations
Store these in memory using via toBlob, optionally converting these blobs to URLs with window.URL.createObjectURL
Swap URLs as desired.
See this MDN page for canvas options

Absolutely! It's not as simple as rotating the image, though. You need to rotate the context from the canvas, and draw that image on the rotated context, and then restore it.
context.save();
context.rotate(angle);
//DRAW IT!
context.restore();

How about having a function like :
Image.prototype.rotate = function(angle) {
var c = document.createElement("canvas");
c.width = this.width;
c.height = this.height;
var ctx = c.getContext("2d");
ctx.rotate(angle);
var imgData = ctx.createImageData(this.width, this.height);
ctx.putImageData(imgData);
return new Image(imgData);
}
var img1 = new Image();
var img2 = img1.rotate(90);
Ofcourse it's just a quick sample to give you an idea.