0

我正在开发一种拍摄图像的工具，允许用户在其上绘图并保存。

工作原理：以图像为背景，在其上绘图

什么不起作用：保存整个画布..我只存储绘图而不是与图像一起绘制。

我经历了堆栈，但找不到适合我的解决方案。

<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 回答