Question

我创建了画布，用户可以从剪贴板粘贴图像。例如，用户屏幕拍摄了他们的屏幕并粘贴在我的画布上。粘贴后，用户可以看到粘贴在画布上的图像。现在我想将画布转换为图像。没有错误，但是当我点击按钮时，我可以创建一个空图像。当我突出显示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 Image我从W3School复制并粘贴在画布上。

Answer 1

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

为您提供空字符串而不是新的canvas元素。很难画成一个字符串，尝试将其改为此。

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

Canvas转换为图像显示空图像

1 个答案: