0

私は、画像を取得し、ユーザーがその上に描画して保存できるようにするツールに取り組んでいます。

Whats working: 画像を背景として取得し、その上に描画します

うまくいかないこと：キャンバス全体を保存する..画像と一緒に描画するのではなく、描画のみを保存します。

スタックを調べましたが、解決策が見つかりませんでした。

<canvas id="drawtool" width="800" height="300" style="background:url(image/test.png) no-repeat center center"></canvas>

そして、画像を描画するJSは

 var canvas = document.getElementById('drawtool');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
      context.drawImage(this, 0, 0);
   };

編集済み：私はすでに試しました

 var canvas = document.getElementById('drawtool');
 var context = canvas.getContext('2d');
 var imageObj = new Image();
 imageObj.src = "image/test.png"; 
 imageObj.onload = function() {
  context.drawImage(this, 0, 0);
};

しかし、しばらくの間キャンバスに画像が表示され、キャンバスをクリックして描画すると、画像が消えます。

ありがとう

4

4 に答える 4

1

画像に描画する方法は次のとおりです。

ユーザーの描画がよく見えるように、画像の不透明度を低く設定しました。

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/6eYEz/

<!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;}
</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;
    var imageObj=new Image();
    imageObj.onload=function(){
        ctx.save();
        ctx.globalAlpha=.3;
        ctx.drawImage(this,0,0,canvas.width,canvas.height);
        ctx.restore();
    }
    imageObj.src="http://www.proquestk12.com/widgets/images/WorldRegion_worldmap.gif";


    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.lineWidth=5;
          ctx.strokeStyle="#FF0000";
          ctx.moveTo(lastX,lastY);
          ctx.lineTo(canMouseX,canMouseY);
          ctx.stroke();     
          lastX=canMouseX;
          lastY=canMouseY;
      }
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});
</script>

</head>

<body>

    <canvas id="canvas" width=576 height=307></canvas>

</body>
</html>
于 2013-02-28T18:33:06.677 に答える
0

背景画像は必要ありません。imageObj の src をそのファイルに設定するだけです。これは次のようになります (imageObj を宣言して定義した後):

imageObj.src="image/test.png";
于 2013-02-28T15:09:45.937 に答える
0 
<canvas id="drawtool" width="800" height="300" ></canvas>

JS:

var canvas = document.getElementById('drawtool');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src="image/test.png";
imageObj.onload = function() {
      context.drawImage(this, 0, 0,canvas.width, canvas.height);
};
于 2013-02-28T15:15:32.923 に答える
0

画像に src プロパティがありません。また、CSS を介してキャンバスに背景画像を与えることは役に立たず、誤解を招く可能性があります。画像が実際にはキャンバス上にないため、バグが見つからなかったからです :)

var canvas = document.getElementById('drawtool');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = "image/test.png";
imageObj.onload = function() {
  context.drawImage(this, 0, 0);
};
于 2013-02-28T15:19:35.760 に答える