画布不存储带有背景图像的图形

Question

我正在使用一种工具来拍摄图像，允许用户在其上绘制并保存。

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

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

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

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

和JS到drawimage是

 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为画布提供背景图像是没有用的并且具有误导性，因为该图像实际上不在其上，因此这就是您未发现错误的原因:)

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 个解决方案

解决方案1
1 2013-02-28 18:33:06

解决方案2
0 2013-02-28 15:09:45

解决方案3
0 2013-02-28 15:15:32

解决方案4
0 2013-02-28 15:19:35

画布不存储带有背景图像的图形

问题描述

4 个解决方案

解决方案1 1 2013-02-28 18:33:06

解决方案2 0 2013-02-28 15:09:45

解决方案3 0 2013-02-28 15:15:32

解决方案4 0 2013-02-28 15:19:35

解决方案1
1 2013-02-28 18:33:06

解决方案2
0 2013-02-28 15:09:45

解决方案3
0 2013-02-28 15:15:32

解决方案4
0 2013-02-28 15:19:35