html5畫布繪製/保存

我試圖將HTML5畫布變成幻燈片註釋器。我的目標是上傳幻燈片的圖像，允許用戶在其上繪製，然後保存。html5畫布繪製/保存

什麼工作：我成功地將幻燈片上傳爲背景圖片，並允許用戶在上面繪製幻燈片。我也有保存功能工作。

什麼錯：一旦保存圖像，用戶所做的繪圖會保留，但背景圖像不會成爲保存圖像的一部分。

有沒有辦法將畫布保存到圖像並保持幻燈片背景？也許它不應該是一個背景圖像？

下面是我的一些代碼：

畫布+按鈕：

<div id="main"> 
<canvas id="drop1" class="drop" style=" background: url(pdf_images/pdf-save-0.png); background-repeat:no-repeat;"> 
</canvas> 
</div> 

<input type="button" id="savepngbtn" value="Save Slide">

保存畫布：

document.getElementById("savepngbtn").onclick = function() { 
     saveCanvas(oCanvas, "PNG"); 
    } 

function saveCanvas(pCanvas, strType) { 
     var bRes = false; 
     if (strType == "PNG") 
      bRes = Canvas2Image.saveAsPNG(oCanvas); 
     if (!bRes) { 
      alert("Sorry, this browser is not capable of saving " + strType + " files!"); 
      return false; 
     } 
    }

來源

2011-10-26 Dom

，你需要使 '背景圖片' 部分如果您想將它們保存爲單個圖像，請將其放置在畫布上。

你可以嘗試這樣的：

var ctx = yourcanvas.getContext('2d'); 
var img = new Image(); 
img.src = 'http://yourimage.png'; 
img.onload = function() { 
    ctx.drawImage(img, 0, 0) 
}

則允許用戶添加註釋和保存。

來源

2011-10-26 15:25:43 gthmb

我該如何去做與我已經做得不同的事情？ – Dom

heya ...我添加了一個示例代碼塊來澄清 – gthmb

它不應該是一個背景圖像。

您應該使用畫布提供的DrawImage來繪製圖像。這很簡單，只需創建一個新的圖像元素（即new Image()，將onload事件設置爲DrawImage，並將其自身作爲參數，然後設置.src屬性以使其實際加載）。

顯然這應該是你做的第一件事情，因爲圖像對於畫布的工作方式至關重要。您可以在onload之內添加一個額外的掛鉤，以便在圖像加載之前不允許用戶執行任何繪圖。

來源

2011-10-26 15:27:38

html5畫布繪製/保存

回答

相關問題