的Html DrawCanvas爲空

我想重複我的畫布，但它把我drawCanvas爲空錯誤。每當我點擊這個按鈕，它就會拋出錯誤。有沒有其他方法可以複製我的畫布？的Html DrawCanvas爲空

HTML

<Html> 
<Head> 
<Title>Java Example</Title> 

     <script type="text/javascript"> 
{ 

if (!window.Clipboard) { 
    var pasteCatcher = document.createElement("apDiv1"); 
    pasteCatcher.setAttribute("contenteditable", ""); 
    pasteCatcher.style.opacity = 0; 
    //document.body.appendChild(pasteCatcher); 
    pasteCatcher.focus(); 
    document.addEventListener("click", function() { pasteCatcher.focus(); }); 
} 

//window.addEventListener("paste", onPasteHandler); 

function onPasteHandler(e) 
{ 
    if(e.clipboardData) { 
     var items = e.clipboardData.items; 
     if(!items){ 
      alert("Image Not found"); 
     } 
     for (var i = 0; i < items.length; ++i) { 
     if (items[i].kind === 'file' && items[i].type === 'image/png') { 
      var blob = items[i].getAsFile(), 
       source = window.webkitURL.createObjectURL(blob); 

      pastedImage = new Image(); 
      pastedImage.src = source; 

      pasteData(); 
      } 
     } 
    } 
} 

function pasteData() 
{ 
    drawCanvas = document.getElementById('drawCanvas1'); 
    ctx = drawCanvas.getContext('2d'); 
    ctx.clearRect(0, 0, 640,480); 
    ctx.drawImage(pastedImage, 0, 0); 
} 

function pasteData2() 
{ 
    drawCanvas = document.getElementById('drawCanvas1'); 
    ctx = drawCanvas.getContext('2d'); 
    ctx.clearRect(0, 0, 640,480); 
    ctx.drawImage(pastedImage, 0, 0); 
    image2 = convertCanvasToImage(drawCanvas); 
    document.getElementById("canvasHolder").appendChild(image2); 
} 

// Converts image to canvas; returns new canvas element 
      function convertImageToCanvas(image) { 
      var canvas = document.createElement("canvas"); 
       canvas.width = image.width; 
       canvas.height = image.height; 
       canvas.getContext("2d").drawImage(image, 0, 0);     
       return canvas; 
      } 

      // Converts canvas to an image 
      function convertCanvasToImage(canvas) { 
       var image = new Image(); 
       image.src = canvas.toDataURL("image/png"); 
       return image; 
      } 
} 

     </script> 
<style type="text/css"> 
#apDiv1 { 
    position:absolute; 
    width:258px; 
    height:165px; 
    z-index:1; 
    left: 71px; 
    top: 59px; 
} 
</style> 
</Head> 

<Body> 
<div id="apDiv1" contenteditable='true'>Paste Test</div> 
<!--div id='div' contenteditable='true'>Paste</div--> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<button type="button" value="click me" onclick="return pasteData2();" /> 
<h2>Canvas Image</h2> 
    <p id="canvasHolder"> 

    </p> 
</Body> 
</Html>

錯誤 enter image description here

來源

2013-07-17 chinna_82

我們需要更多的信息來了解。你會得到什麼樣的錯誤？通過ID獲取畫布應該工作得很好。你還可以顯示你定義畫布的HTML嗎？而你正在使用drawCanvas的全局變量，這可能會給你一個糟糕的時間 – Malharhak

@Malharhak我編輯問題併發布整個HTML。當我點擊按鈕時出現錯誤。 –

那麼你的畫布創建無處，和你的函數創建一個畫布是從來沒有所謂的（和不給它，你正在試圖獲得畫布的想法） – Malharhak

首先你要註冊到圖像的onload事件，以確保加載圖像：

 // inside onPastHandler ... 

     pastedImage = new Image(); 
     pastedImage.onload = pasteData.bind(null,pastedImage); 
     pastedImage.src = source;

然後你mentionning非 - 存在的畫布，'drawCanvas1'，你不需要甚至需要：

function pasteData(img) { 
     document.getElementById("canvasHolder").appendChild(img); 
}

來源

2013-07-17 12:03:08 GameAlchemist

我的pasteData（）工作正常。我可以很好地看到我的照片粘貼。當我點擊buttton時，問題就發生了。該錯誤在pasteData2（）中。你可以嘗試在你的本地運行它，你可以看到錯誤，一旦你點擊按鈕。 –

的Html DrawCanvas爲空

回答

相關問題