畫布不存儲具有背景圖像的圖形

我正在研究一種可以獲取圖像並允許用戶在其上繪圖並保存的工具。畫布不存儲具有背景圖像的圖形

請告訴我的工作：以圖像爲背景，在其上繪製

請告訴我不工作：節省整個畫布.. 我只是存儲繪圖只圖像一起繪製不。

我經歷了堆棧，但無法找到解決方案爲我工作。

<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

畫布不存儲具有背景圖像的圖形

回答

相關問題