堆棧內存溢出
  簡體   English   中英

從畫布獲取圖像尺寸

[英]Get image dimension from canvas

 原文  2013-03-21 15:51:44  5   1    javascript/ canvas

問題描述

我有一個612x300px的畫布畫板。 如果我在上面塗一些東西，並使用toDataURL()獲得圖像，則得到的圖像為612x300px，但我只希望沒有背景的部分進行繪畫。 我不知道該如何開始...

是否有可能做到這一點？

1 個解決方案

解決方案1
 1 已采納  2013-03-21 17:13:38

[編輯以反映新信息]

這是提取用戶草繪的圖片部分的方法。

這是代碼和小提琴： 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 讓 canvas.toDataUrl 獲得正確的圖像尺寸 從 React Native 中的 blob 獲取圖像尺寸 從Canvas Javascript獲取圖像 從 canvas 獲取圖像數據 從鏈接獲取 canvas 作為圖像 獲取背景圖片尺寸 如何從響應式畫布獲取圖像？ Javascript Canvas從圖像獲取數據並顯示它 無法從畫布獲取圖像數據 從畫布獲取源 URL 或圖像名稱
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM