Get image dimension from canvas
Question
I have a canvas sketchpad of 612x300px. If I paint something into it and get the image with toDataURL() I get an image of 612x300px, but I only want the part that is painted without the background. I have no idea how can I start with this...
Is it possible to do this?
1 answers
solution1
1 ACCPTED 2013-03-21 17:13:38
[Edited to reflect new information]
Here is how to extract the portion of a picture that the user has sketched upon.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/TPHrv/
<!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>
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
<style>
body{ background-color: ivory;}
#container{position:relative; margin:15px;}
canvas{border:1px solid red; position:absolute; top:0; left:0;}
#sketch{position:absolute; top:315px; left:0px;}
#results{border:1px solid green; position:absolute; top:350px; left:0px;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var background=document.getElementById("background");
var bkCtx=background.getContext("2d");
var lastX;
var lastY;
var strokeColor="red";
var strokeWidth=2;
var canMouseX;
var canMouseY;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isMouseDown=false;
var top=10000;
var left=10000;
var right=0;
var bottom=0;
// draw the background
var count=0;
var radius=15;
var d=radius*2
bkCtx.strokeStyle="orange";
bkCtx.lineWidth=1;
bkCtx.fillStyle="blue";
for(var y=0;y<10;y++){
for(var x=0;x<10;x++){
count++;
bkCtx.beginPath();
bkCtx.rect(x*30,y*30,30,30);
//bkCtx.arc(x+radius, y+radius, radius, 0 , 2 * Math.PI, false);
bkCtx.fillText(count,x*30+9,y*30+15);
bkCtx.stroke();
console.log(y);
}
}
function handleMouseDown(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
lastX=canMouseX;
lastY=canMouseY;
isMouseDown=true;
}
function handleMouseUp(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
// Put your mouseup stuff here
isMouseDown=false;
}
function handleMouseOut(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
// Put your mouseOut stuff here
isMouseDown=false;
}
function handleMouseMove(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
if(isMouseDown){
ctx.beginPath();
ctx.moveTo(lastX,lastY);
ctx.lineTo(canMouseX,canMouseY);
ctx.stroke();
lastX=canMouseX;
lastY=canMouseY;
// define the bounding box of all drawings
if(canMouseX<left){left=canMouseX;}
if(canMouseX>right){right=canMouseX;}
if(canMouseY<top){top=canMouseY;}
if(canMouseY>bottom){bottom=canMouseY;}
}
}
function capture(e){
var imageData=bkCtx.getImageData(left,top,right-left,bottom-top);
var temp=document.createElement("canvas");
var tempCtx=temp.getContext("2d");
temp.width=right-left;
temp.height=bottom-top;
tempCtx.putImageData(imageData,0,0);
var results=document.getElementById("results");
results.src=temp.toDataURL();
console.log(left+"/"+top+" -- "+right+"/"+bottom);
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
$("#sketch").click(function(e){capture(e);});
}); // end $(function(){});
</script>
</head>
<body>
<p>Drag to select an area to extract</p>
<div id="container">
<canvas id="background" width=300 height=300></canvas>
<canvas id="canvas" width=300 height=300></canvas>
<button id="sketch">Extract the sketch area</button>
<img id="results">
</div>
</body>
</html>
[This was the original answer – it needed to be updated after more information was offered]
You are on the right track…
Now, just place your background on a separate image or canvas behind your sketching canvas.
The user will see the background and yet draw on the sketch canvas above.
Since your sketching canvas remains uncluttered with the background bits, when you want to capture it with .toDataURL() you get pure sketch bits!
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/JSux2/
<!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>
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
<style>
body{ background-color: ivory; }
canvas{border:1px solid red; position:absolute; top:0; left:0;}
#wrapper{left-margin:150px;}
#results{border:1px solid green; position:absolute; top:0; left:300px;}
button{position:absolute; top:275px; left:0;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var lastX;
var lastY;
var strokeColor="red";
var strokeWidth=2;
var canMouseX;
var canMouseY;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isMouseDown=false;
// load the background image and set the canvas to the same size
var img=new Image();
img.onload=function(){
var background=document.getElementById("background");
var bkCtx=background.getContext("2d");
background.width=img.width;
background.height=img.height;
bkCtx.drawImage(img,0,0);
canvas.width=img.width;
canvas.height=img.height;
var results=document.getElementById("results");
results.width=img.width;
results.height=img.height;
console.log(img);
}
img.src="http://dl.dropbox.com/u/139992952/stackoverflow/house-icon.png";
function handleMouseDown(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
$("#downlog").html("Down: "+ canMouseX + " / " + canMouseY);
// Put your mousedown stuff here
lastX=canMouseX;
lastY=canMouseY;
isMouseDown=true;
}
function handleMouseUp(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
$("#uplog").html("Up: "+ canMouseX + " / " + canMouseY);
// Put your mouseup stuff here
isMouseDown=false;
}
function handleMouseOut(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
$("#outlog").html("Out: "+ canMouseX + " / " + canMouseY);
// Put your mouseOut stuff here
isMouseDown=false;
}
function handleMouseMove(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
$("#movelog").html("Move: "+ canMouseX + " / " + canMouseY);
// Put your mousemove stuff here
if(isMouseDown){
ctx.beginPath();
ctx.moveTo(lastX,lastY);
ctx.lineTo(canMouseX,canMouseY);
ctx.stroke();
lastX=canMouseX;
lastY=canMouseY;
}
}
function extract(){
var results=document.getElementById("results");
results.src=canvas.toDataURL();
alert("ok");
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
$("#sketch").click(function(e){extract(e);});
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="background" width=100 height=100></canvas>
<canvas id="canvas" width=100 height=100></canvas>
<button id="sketch">Extract the sketch</button>
<img id="results" width=10 height=10>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Let canvas.toDataUrl get the right dimension of image
Get image dimension from blob in React Native
Get Image from Canvas Javascript
Get image data from canvas
Get canvas as an image from link
get the background image dimension
How to get image from responsive canvas?
Javascript Canvas get data from image and display it
Cannot get Image Data from a canvas
Get source URL or image name from canvas
Related Tags