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

我正在研究一种可以获取图像并允许用户在其上绘图并保存的工具。画布不存储具有背景图像的图形

请告诉我的工作：以图像为背景，在其上绘制

请告诉我不工作：节省整个画布.. 我只是存储绘图只图像一起绘制不。

我经历了堆栈，但无法找到解决方案为我工作。

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

，但它显示在画布上一段时间的图像，将我点击画布上绘制，图像消失。

感谢

来源

2013-02-28 Mahendra

你不需要它的背景图片，所有你需要做的就是设置imageObj的src到该文件。它会看起来像这样（你声明和定义imageObj后）：

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

来源

2013-02-28 15:09:45 Zachrip

<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-28 15:15:32 MJQ

@ MJQ我已经试过了，它的一段时间，但因为我在画布上绘制点击工作，形象得到消失。附：我正在动态获取图片的网址 – Mahendra 2013-02-28 15:22:31

由于其他原因应该会发生这种情况！上面的代码是基本代码，应该完美工作！这里是工作示例，http://jsfiddle.net/4mLt9/1/ – MJQ 2013-03-01 07:01:42

您的图片没有它的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-28 15:19:35 Malharhak

这里是你如何能画一幅图像。

我将图像的不透明度设置得更低，以便您可以更好地看到用户的绘图。

这里是代码和一个小提琴：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-28 18:33:06 markE

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

回答

相关问题