Fatal编程技术网
  • javascript/
  • Javascript 从画布获取图像维度

Javascript 从画布获取图像维度

javascript canvas

Javascript 从画布获取图像维度,javascript,canvas,Javascript,Canvas,我有一个612x300px的画布画板。如果我在它里面画一些东西，然后用toDataURL（）得到图像，我会得到一个612x300px的图像，但我只想要没有背景的部分。我不知道该怎么从这个开始 可以这样做吗？[编辑以反映新信息] 下面是如何提取用户绘制的图片部分 下面是代码和小提琴： 正文{背景色：象牙；} #容器{位置：相对；边距：15px；} 画布{边框：1px纯红色；位置：绝对；顶部：0；左侧：0；} #草图{位置：绝对；顶部：315px；左侧：0px；} #结果{边框：1px纯绿色；位置

我有一个612x300px的画布画板。如果我在它里面画一些东西，然后用
toDataURL（）
得到图像，我会得到一个612x300px的图像，但我只想要没有背景的部分。我不知道该怎么从这个开始

可以这样做吗？

[编辑以反映新信息]

下面是如何提取用户绘制的图片部分

下面是代码和小提琴：


正文{背景色：象牙；}
#容器{位置：相对；边距：15px；}
画布{边框：1px纯红色；位置：绝对；顶部：0；左侧：0；}
#草图{位置：绝对；顶部：315px；左侧：0px；}
#结果{边框：1px纯绿色；位置：绝对；顶部：350px；左侧：0px；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var background=document.getElementById（“背景”）；
var bkCtx=background.getContext（“2d”）；
var lastX；
血管成形术；
var strokeColor=“红色”；
var strokeWidth=2；
canMouseX变种；
var canMouseY；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var isMouseDown=错误；
var-top=10000；
左var=10000；
var-right=0；
var-bottom=0；
//画背景
var计数=0；
var半径=15；
var d=半径*2
bkCtx.strokeStyle=“橙色”；
bkCtx.线宽=1；
bkCtx.fillStyle=“蓝色”；
对于（变量y=0；y
正文{背景色：象牙；}
画布{边框：1px纯红色；位置：绝对；顶部：0；左侧：0；}
#包装{左边距：150px；}
#结果{边框：1px纯绿色；位置：绝对；顶部：0；左侧：300px；}
按钮{位置：绝对；顶部：275px；左侧：0；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var lastX；
血管成形术；
var strokeColor=“红色”；
var strokeWidth=2；
canMouseX变种；
var canMouseY；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var isMouseDown=错误；
//加载背景图像并将画布设置为相同大小
var img=新图像（）；
img.onload=函数（）{
var background=document.getElementById（“背景”）；
var bkCtx=background.getContext（“2d”）；
背景宽度=img.width；
背景高度=img高度；
bkCtx.drawImage（img，0,0）；
canvas.width=img.width；
canvas.height=img.height；
var results=document.getElementById（“结果”）；
结果：宽度=img.width；
结果：高度=img高度；
控制台日志（img）；
}
img.src=”http://dl.dropbox.com/u/139992952/stackoverflow/house-icon.png";
功能手柄向下（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
$（“#downlog”）.html（“Down:“+canMouseX+”/“+canMouseY”）；
//把你的鼠标下的东西放在这里
lastX=canMouseX；
拉斯蒂=坎穆西；
isMouseDown=真；
}
功能handleMouseUp（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
$（“#uplog”）.html（“Up:“+canMouseX+”/“+canMouseY”）；
//把你的鼠标放在这里
isMouseDown=错误；
}
函数handleMouseOut（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
$（“#outlog”）.html（“Out:+canMouseX+”/“+canMouseY）；
//把你的老鼠屎放在这里
isMouseDown=错误；
}
功能手柄移动（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
$（“#movelog”）.html（“移动：+canMouseX+”/“+canMouseY”）；
//把你的mousemove放在这里
如果（isMouseDown）{
ctx.beginPath（）；
ctx.moveTo（lastX，lastY）；
ctx.lineTo（canMouseX，canMouseY）；
ctx.stroke（）；
lastX=canMouseX；
拉斯蒂=坎穆西；
}
}
函数提取（）{
var results=document.getElementById（“结果”）；
results.src=canvas.toDataURL（）；
警报（“正常”）；
}
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
$（“#canvas”）.mouseup（函数（e）{handleMouseUp（e）；}）；
$（“#canvas”）.mouseout（函数（e）{handleMouseOut（e）；}）；
$（“#草图”）。单击（函数（e）{extract（e）；}）；
})；//end$（函数（）{}）；
提取草图
toDataURL方法始终返回整个图像的数据。如果您只需要图像的一部分，则必须创建该大小的新画布元素，并将图像数据复制到正确的位置。是的，但我没有绘制的尺寸。例如，如果我用鼠标绘制一个圆，我需要获得o只有新图像上的圆圈…可能通过删除白色背景？我可以使用服务器端或客户端。如果你“用鼠标绘制”，那么你应该能够捕捉到坐标。谢谢你的回答，但我想我解释得不好。我需要去除背景并裁剪颜料，而不是整个画布。所以如果我有612x300画布，并在画布的任何位置绘制1x10px水平线，我需要得到1x10px图像，而不是612x300。好的，我现在明白了.一个问题：如果你在一个X上画两条线，你想要包含X的正方形还是只想要X的两条线？这正是我需要的！！谢谢 
<!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>

<!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>