First I have a canvas area,
I am cropping some part from its image data then i want to show that cropped part stretched to full canvas scale.
Like.
i have a canvas of area say 400,400,
and then i crop image data from (20,100) to (200,300) that means of 180(width) and 200(height)
and afterwards i want that cropped part to be shown on the same canvas stretched to its full width and height.
Is it possible through javascript part or do we need to create our own function for that purpose.
You can use toDataURL to capture the current canvas as a URL
var dataURL=canvas.toDataURL();
Then you can use drawImage to crop and scale an image and paste it back to the canvas
context.drawImage(theImage,CropatX,CropatY,WidthToCrop,HeightToCrop,
pasteatX,pastatY,scaledWidth,scaledHeight)
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/Ap3Hd/
<!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; padding:20px; }
canvas{border:1px solid black;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle="green";
ctx.strokeStyle="blue";
ctx.lineWidth=10;
ctx.arc(125,100,65,0,2*Math.PI,false);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle="purple";
ctx.strokeStyle="yellow";
ctx.rect(100,0,50,300);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle="red";
ctx.lineWidth=3;
ctx.rect(20,100,180,200);
ctx.stroke();
//
$("#crop").click(function(){
// save the current canvas as an imageURL
var dataURL=canvas.toDataURL();
// clear the canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
// create a new image object using the canvas dataURL
var img=new Image();
img.onload=function(){
// fill the canvas with the cropped and scaled image
// drawImage takes these parameters
// img is the image to draw on the canvas
// 20,100 are the XY of where to start cropping
// 180,200 are the width,height to be cropped
// 0,0 are the canvas coordinates where the
// cropped image will start to draw
// canvas.width,canvas.height are the scaled
// width/height to be drawn
ctx.drawImage(img,20,100,180,200,0,0,canvas.width,canvas.height);
}
img.src=dataURL;
});
}); // end $(function(){});
</script>
</head>
<body>
<p>Red rectangle indicates cropping area</p>
<canvas id="canvas" width=300 height=300></canvas><br/>
<button id="crop">Crop the red area and scale it to fill the canvas</button>
</body>
</html>
