画布转换为图像显示空图像答案

【问题标题】：Canvas convert to Image shows empty Image画布转换为图像显示空图像
【发布时间】：2013-07-21 02:27:51
【问题描述】：

我创建了画布，用户可以在其中粘贴剪贴板中的图像。例如，用户截屏并粘贴到我的画布中。粘贴后，用户可以看到粘贴在画布中的图像。现在我想将我的画布转换为图像。没有错误，但是当我单击按钮时，我可以创建一个空图像。当我突出显示 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>

图片我从 W3School 复制并粘贴到画布中的图像。

【问题讨论】：

可以看看这里：stackoverflow.com/questions/7129178/…
Console.log(canvas.toDataURL("image/png"));它在说什么
@PatsyIssa 我得到了控制台未定义错误，即使我的萤火虫已打开。
@chinna_82 JS 区分大小写；应该是console，而不是Console。
我写句子时倾向于大写，但正如路人所说，它是区分大小写的。

标签： html canvas html5-canvas

【解决方案1】：

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

给你和空字符串不是一个新的画布元素。很难画成字符串，试试改成这个吧。

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

【讨论】：

你的范围在画布元素上也是关闭的。 var canvas 将是您声明它的函数的本地变量。您需要将其传递或存储在其他函数可用的级别。