畫布轉換爲圖像顯示爲空圖像

我創建了用戶可以從剪貼板粘貼圖像的畫布。舉個例子，用戶屏幕截圖他們的屏幕並粘貼在我的畫布上。一旦粘貼，用戶可以看到粘貼在畫布上的圖像。現在我想將我的畫布轉換爲圖像。沒有錯誤，但是當我點擊按鈕時，我可以創建一個空的圖像。當我突出顯示html時，我可以在那裏看到一個框。以下是我的代碼和空白圖片的屏幕截圖。畫布轉換爲圖像顯示爲空圖像

代碼。

<?xml version="1.0"?> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <script> 

    function convert() 
    { 
    var sampleImage = document.getElementById("myCanvasElt"); 
    //alert(sampleImage); 
    var can = convertCanvasToImage(sampleImage); 
// var apple = convertImageToCanvas(can); 
    document.getElementById("testguna").appendChild(can); 
    //document.getElementById("pngHolder").appendChild(apple); 
    } 

    // Converts image to canvas; returns new canvas element 
function convertImageToCanvas(image) { 
    var canvas = document.createElement("canvas").innerHTML; 

    canvas.width = image.width; 
    canvas.height = image.height; 
    canvas.getContext("2d").drawImage(image, 0, 0); 
    return canvas; 
} 

function convertCanvasToImage(canvas) { 
    var image = new Image(); 
    image.src = canvas.toDataURL("image/png"); 
    return image; 
}  
    </script> 

<body> 
<h1>JavaScript Canvas Image Conversion</h1> 

<h2>Original Image</h2> 
<p> 
<canvas id='myCanvasElt' width="100" height="100" contenteditable ="true"/> 
    </p> 
<h2>Canvas Image</h2> 
<p id="testguna"> 
</p> 
<h2>Canvas -&gt; PNG Image</h2> 
<p id="pngHolder"> 
</p> 
<button type="button" onClick="convert()">Click</button>  
</body> 
</html>

圖片 enter image description here i。從W3School複製並在畫布將圖像粘貼。

來源

2013-07-22 chinna_82

可能是看看這裏：http://stackoverflow.com/questions/7129178/browser-canvas-cors-support-for-cross-domain-loaded-image-manipulation – Cherniv

CONSOLE.LOG（帆布.toDataURL（「圖像/ PNG」））;這是什麼意思 –

@PatsyIssa我得到控制檯沒有定義的錯誤，即使我的螢火蟲是。 –

var canvas = document.createElement("canvas").innerHTML;

給你和空字符串不是新的畫布元素。它很難繪製成字符串，請嘗試將其更改爲此。

var canvas = document.createElement("canvas");

來源

2013-07-25 20:24:58 ericjbasti

此外，您的作用域已關閉畫布元素。 var canvas將在您聲明的函數中是局部的。您需要將其傳遞或存儲在其他函數可用的級別。 – ericjbasti

畫布轉換爲圖像顯示爲空圖像

回答

相關問題