帆布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不工作

回答

相关问题