У меня есть альбом с холстом размером 612x300px. Если я что-то рисую и получаю изображение с toDataURL(), я получаю изображение 612x300px, но мне нужна только часть, окрашенная без фона. Я не знаю, как я могу начать с этого ...Получить изображение размер с пола
Можно ли это сделать?
[Отредактировано, чтобы отразить новую информацию]
Вот как извлечь часть картинки, которую пользователь набросал на.
Вот код и 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>
[Это был оригинальный ответ - это необходимо обновить после получения дополнительной информации была предложена]
Вы на правильном пути ...
Теперь просто разместите свой фон на отдельно или картинка позади ваш набросок холста.
Пользователь увидит фон и покажет рисунок на холсте выше.
Поскольку ваш набросанный холст остается незагроможденным с битами фона, когда вы хотите его захватить с помощью .toDataURL(), вы получаете чистые биты эскиза!
Вот код и 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>
Спасибо за ответ, но я думаю, что не очень хорошо объясняю. Мне нужно удалить фон и обрезать краску, а не получить весь холст. Поэтому, если у меня есть холст 612x300 и нарисовать горизонтальную линию 1x10px в любом месте холста, мне нужно получить изображение размером 1x10 пикселей, а не 612x300. –
ОК, я понимаю сейчас. Вопрос: Если вы рисуете две строки в X, вы хотите, чтобы квадрат, содержащий X, или вы хотите только 2 строки X? – markE
Мне нужна площадь. –
Параметр 'Метод toDataURL' всегда возвращает данные для всего изображения. Если вы хотите только часть изображения, вам нужно будет создать новый элемент холста этого размера и скопировать данные изображения в него в нужное положение. – CBroe
Да, но у меня нет размеров краски. Например, если я рисую круг с помощью мыши, мне нужно получить только круг на новом изображении ... Может быть, удалив белый фон? Я могу использовать сервер или клиентскую сторону. –
Если вы «рисуете мышью», то вы должны уметь фиксировать координаты. – CBroe