根據圖像動態設置畫布寬度和高度

Question

我正在處理一個項目，我必須偵聽粘貼事件並將圖像從剪貼板保存到服務器，並將其顯示在畫布上以供進一步繪製。

什麼是工作：獲取剪貼板圖像並保存它，在畫布上顯示圖像作爲背景。

什麼不工作：調整畫布大小，以便可以顯示整個圖像。另外，在保存時，我不會將圖形保存在背景圖像上，而只會保存圖形。

我試圖

var newImg = document.getElementById('justimg'); 
    newImg.src = data.showthis; 
    newImg.onload= function(){ 
     curHeight = newImg.height; 
     curWidth = newImg.width; 
     alert(curWidth); 
     alert(curHeight);} 

獲得圖像屬性，但它的表現canvas只屬性。

<img id="justimg"> 
<canvas id="bearimage" ></canvas> 

另請建議如何保存與背景圖像的畫布圖。

Answer 1

你需要得到canvas元素，然後改變其寬度和高度這樣，

var newImg = document.getElementById('justimg'); 
    newImg.src = data.showthis; 
    newImg.onload= function(){ 
     var canvas = document.getElementById('bearimage'); 
     canvas.height = newImg.height ; 
     canvas.width = newImg.width ; 
     alert(canvas.height); 
     alert(canvas.width);} 

要保存畫布圖像您首先需要利用它的圖像，然後你可以將它保存！ 這是鏈接到：保存圖像，http://www.nihilogic.dk/labs/canvas2image/