2

キャンバスをcontenteditable ='true'として作成し、クリップボードからキャンバスの上に画像を貼り付けました。下の画像のように、画像はキャンバスの上ではなくキャンバスの横に表示されました。キャンバスを画像に変換しようとすると、空の画像が表示されます。これは、以前に貼り付けた画像がキャンバスに保持されていないためです。どうすれば画像を取得できますか?

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>

画像 ここに画像の説明を入力

4

2 に答える 2

1

Canvas 要素はプロパティの例外ではありませんcontexteditable。canvas 要素と他の要素の違いは、canvas タグ内のテキストは、canvas 要素がサポートされていない場合に表示されるもののみを処理することです。定義上、contexteditable実際に探しているキャンバス ctx コンテキストではなく、要素タグ内のテキストを処理しています。キャンバスで画像描画メソッドを探したい場合は、w3Schools サイトでデモを見つけることができます

于 2015-12-31T19:17:00.170 に答える