Html 画布转换为图像显示空图像

我创建了画布，用户可以从剪贴板粘贴图像。例如，用户屏幕截图并粘贴到我的画布中。粘贴后，用户可以看到粘贴在画布中的图像。现在我想将画布转换为图像。没有错误，但当我点击按钮时，我可以创建一个空图像。当我突出显示html时，我可以看到有一个框。下面是我的代码和空图像的屏幕截图

代码

函数转换（）
{
var sampleImage=document.getElementById（“myCanvasElt”）；
//警报（样本图像）；
var can=ConvertCanVastoiImage（样本图像）；
//var apple=转换图像到Canvas（can）；
document.getElementById（“testguna”）.appendChild（can）；
//document.getElementById（“pngHolder”）.appendChild（苹果）；
}
//将图像转换为画布；返回新的画布元素
功能转换器ImageToCanvas（图像）{
var canvas=document.createElement（“canvas”）.innerHTML；
canvas.width=image.width；
canvas.height=image.height；
canvas.getContext（“2d”）.drawImage（图像，0,0）；
返回画布；
}
函数转换器CANVASTOIMAGE（画布）{
var image=新图像（）；
image.src=canvas.toDataURL（“image/png”）；
返回图像；
}    
JavaScript画布图像转换
原始图像


画布图像


画布-PNG图像


点击

形象 我从W3School复制并粘贴到画布中的图像

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

为您提供空字符串，而不是新的画布元素。很难画成一条线，试着把它改成这个

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

---

可以在这里查看一下：Console.log（canvas.toDataURL（“image/png”）；它是什么saying@PatsyIssa“我得到的控制台未定义错误，即使我的firebug打开。@chinna_82 JS区分大小写；应该是

console

，而不是

console

。我在写句子时倾向于大写，但正如路人所说，它是区分大小写的。此外，您的范围在画布元素上是关闭的。var canvas将是您在其中声明它的函数的本地。您需要将其传递或存储到其他函数可用的级别。

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