帆布contenteditable不工作

我創建了畫布爲contenteditable ='true'並將剪貼板上的圖像粘貼在畫布上。圖像出現在畫布旁邊，不在畫布的頂部，如下圖所示。嘗試將畫布轉換爲圖像時，我會看到空白圖像。這是因爲我的畫布不能保存先前粘貼的圖像。我如何獲得圖像？帆布contenteditable不工作

HTML

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 

    function convert() 
    { 
    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    //ctx.fillRect(50,50,150,75); 
    var theImage=document.getElementById("toImage"); 
    theImage.src=canvas.toDataURL(); 
    } 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300 contenteditable='true'></canvas> 
    <button type="button" onClick="convert()">Click</button> 
    <img id="toImage" width=300 height=300> 
</body> 
</html>

圖片 enter image description here

來源

2013-07-23 chinna_82

我不認爲有一個畫布相關的頁面編輯主機contenteditable。由於畫布需要繪圖命令，所以這樣的編輯器肯定不會拖放。如果源圖像是已複製到剪貼板的本地圖像，您也會遇到CORS問題。如果你真的，真的很有野心**你可以在這裏使用六種API方法編寫canvas頁內編輯器：http://www.whatwg.org/specs/web-apps/current -work/multipage/editing.html＃editing-host – markE

的contenteditable屬性爲文本相關的HTML元素，並且不執行任何與<canvas>元件。

有關contenteditable的詳細信息，請參閱MDN。

來源

2013-07-23 18:40:40

我不認爲這是完全正確的。您的MDN鏈接顯示：「在HTML5中，任何元素都可以編輯」，並且該MDN頁面沒有提及

畫布元素不是contexteditable屬性的一個例外，canvas元素和其他元素之間的區別在於canvas標籤內部的文本僅處理當canvas元素不受支持時顯示的內容。按照定義，contexteditable是處理元素標記內的文本，而不是您實際尋找的canvas ctx上下文。你想在你的畫布上尋找繪製圖像的方法演示可以找到on the w3Schools site

來源

2015-12-31 19:17:00 Binvention

帆布contenteditable不工作

回答

相關問題