Question

我正在研究一种获取图像的工具，允许用户在上面绘图并保存。

什么工作：把图像作为背景，用它画画

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

我经历过堆栈，但无法找到适合我的解决方案。

<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);
};

但它在画布上显示了一段时间的图像，当我点击画布进行绘制时，图像就会消失。

由于

Answer 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>

Answer 2

您不需要背景图像，您需要做的就是将imageObj的src设置为该文件。它看起来像这样（在声明和定义imageObj之后）：

imageObj.src="image/test.png";

Answer 3

<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);
};

Answer 4

您的图片没有src属性。此外，通过CSS将背景图像提供给画布是没用的，也是误导性的，因为图像实际上并不在它上面，这就是为什么你没找到你的bug：）

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 个答案: