合併畫布和背景

我有一個具有GIF背景的畫布。我需要用戶上傳圖紙和BG，所以另一個用戶可以看到圖紙與BG的關係。 canvas.toDataURL（）;代碼只顯示用戶繪圖的畫布區域，但不顯示BG。如何拼合或「合併圖層」，以便我可以上傳到數據庫。合併畫布和背景

var mousePressed = false; 
 
var lastX, lastY; 
 
var ctx; 
 

 
function InitThis() { 
 
    ctx = document.getElementById('myCanvas').getContext("2d"); 
 

 
    $('#myCanvas').mousedown(function(e) { 
 
    mousePressed = true; 
 
    Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false); 
 
    }); 
 

 
    $('#myCanvas').mousemove(function(e) { 
 
    if (mousePressed) { 
 
     Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true); 
 
    } 
 
    }); 
 

 
    $('#myCanvas').mouseup(function(e) { 
 
    mousePressed = false; 
 
    }); 
 
    $('#myCanvas').mouseleave(function(e) { 
 
    mousePressed = false; 
 
    }); 
 
} 
 

 
function Draw(x, y, isDown) { 
 
    if (isDown) { 
 
    ctx.beginPath(); 
 
    ctx.strokeStyle = $('#selColor').val(); 
 
    ctx.lineWidth = $('#selWidth').val(); 
 
    ctx.lineJoin = "round"; 
 
    ctx.moveTo(lastX, lastY); 
 
    ctx.lineTo(x, y); 
 
    ctx.closePath(); 
 
    ctx.stroke(); 
 
    } 
 
    lastX = x; 
 
    lastY = y; 
 
} 
 

 
function clearArea() { 
 
    // Use the identity matrix while clearing the canvas 
 
    ctx.setTransform(1, 0, 0, 1, 0, 0); 
 
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
 
<script type="text/javascript" src="jscripts/JsCode.js"> 
 
    var dataURL = canvas.toDataURL(); 
 
</script> 
 

 
<!--canvas drawing and upload mySQL--> 
 
<div align="center"> 
 
    <img src="graphics/teethDrawing.gif" width="705" style="position: absolute; z-index: -1" /> 
 
    <canvas id="myCanvas" width="700" height="965" style="border:2px solid black"></canvas> 
 

 
    <br /> 
 
    <br /> 
 
    <button onclick="javascript:clearArea();return false;">Clear Area</button> 
 
    Line width : 
 
    <select id="selWidth"> 
 
    <option value="1">1</option> 
 
    <option value="3" selected="selected">3</option> 
 
    <option value="5">5</option> 
 

 
    </select> 
 
    Color : 
 
    <select id="selColor"> 
 
    <option value="black" selected="selected">black</option> 
 
    <option value="blue">blue</option> 
 
    <option value="red">red</option> 
 

 

 
    </select> 
 
</div> 
 
</div>

圖像不顯示，但不顯示頁面上。

幫助

來源

2015-05-19 Steveep

您可以使用合成將背景圖像添加到現有畫布圖形的「背後」。

// give the image an id so it's more easily fetched 
<img id='bk' src="graphics/teethDrawing.gif" 
    width="705" style="position: absolute; z-index: -1" /> 

// fetch a reference to the bk image 
var bk=document.getElementById('bk'); 

// causes new drawings to be drawn behind existing drawings 
ctx.globalCompositeOperation='destination-over'; 

// draw the img to the canvas (behind existing lines) 
ctx.drawImage(bk,0,0); 

// always clean up! Reset to default. 
ctx.globalCompositeOperation='source-over';

此過程將永久地將bk圖像添加到畫布。如果需要分隔bk和畫布圖形，則可以創建第二個內存畫布，以通過將bk圖像和畫布圖形繪製到內存畫布上來平整內容。

// create a temporary canvas 
var mem=document.createElement('canvas'); 
var mctx=mem.getContext('2d'); 
mem.width=canvas.width; 
mem.height=canvas.height; 

// draw the bk to the mem canvas 
mctx.drawImage(bk,0,0); 

// draw the main canvas to the mem canvas 
mctx.drawImage(canvas,0,0);

來源

2015-05-19 16:31:59 markE

-1

你想圖紙到具有高度/寬度和位置：絕對的風格標籤？然後，您可以將這些樣式標籤發送到您的數據庫，以便其他訪問者可以在z-index：-1圖像的頂部看到圖形的位置。

<img src="drawing.jpg" style="position:absolute;left:50px;top:120px;" />

來源

2015-05-19 16:18:49

合併畫布和背景

回答

相關問題