从画布获取图像尺寸

Question

我有一个612x300px的画布画板。 如果我在上面涂一些东西，并使用toDataURL()获得图像，则得到的图像为612x300px，但我只希望没有背景的部分进行绘画。 我不知道该如何开始...

是否有可能做到这一点？

Answer 1

[编辑以反映新信息]

这是提取用户草绘的图片部分的方法。

这是代码和小提琴： 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（）捕获它时，您将获得纯草绘位！

这是代码和小提琴： 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>