从画布获取图像尺寸

Question

I have a canvas sketchpad of 612x300px. 我有一个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. 如果我在上面涂一些东西，并使用toDataURL()获得图像，则得到的图像为612x300px，但我只希望没有背景的部分进行绘画。 I have no idea how can I start with this... 我不知道该如何开始...

Is it possible to do this? 是否有可能做到这一点？

Answer 1

[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/ 这是代码和小提琴： 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! 由于草绘画布上的背景位保持整洁，因此当您想使用.toDataURL（）捕获它时，您将获得纯草绘位！

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/JSux2/ 这是代码和小提琴： 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>

从画布获取图像尺寸

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-03-21 17:13:38

从画布获取图像尺寸

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-03-21 17:13:38

解决方案1
1 已采纳 2013-03-21 17:13:38