【发布时间】：2021-03-16 06:42:45
【问题描述】：
我想将div 保存为图片
我有 div 包含相机拍摄和 360 度图像
我尝试 html2canavas 但这不起作用。它什么也没显示。
function Take(){
html2canvas(document.body).then(canvas => {
document.body.appendChild(canvas)
});
}<body>
<div id="con">
<div id="div" style="width: 400px;height: 400px;" >
<div
id="cat"
style="position: absolute;top:50px;left: 25px;"
class="cloudimage-360"
data-folder="cats/"
data-filename="{index}.png"
data-amount="30"
data-magnifier="2"
></div>
</div>
<div id="camera" style="position: absolute;top:10px;left: 25px"></div>
</div>
<br><br><br>
<button onclick="Add()" style="margin-top: 40px">+</button>
<button onclick="Moin()">-</button>
<br>
<button onclick="Up()">Up</button>
<br>
<button onclick="Right()" >Right</button>
<button onclick="Left()" > Left </button>
<br>
<button onclick="Down()" > Down </button>
<button onclick="Take()">Take</button>
<canvas id="myCanvas"></canvas>
</body>问题是当我按下 Take 时它什么也没有显示
这是我的页面 [我的页面的图片]
在这里，当我按下 Take 时，它会创建 canvas，只有按钮，没有图像
【问题讨论】：
-
“什么都不显示”是什么意思？它会删除div吗？它是否插入画布但它是空白的，等等等等？打开您的开发工具，请更新您的帖子以解释实际发生了什么=)
-
是的，它是插入白画布
-
真的不行，请update your post。通过说“我运行此代码，它以 ... 开头，我单击 ..，然后开发工具显示 ...，文档（此处）建议... "：像我们 5 岁一样解释它，以便所有细节都在那里，我们可以准确地指出你做错了什么（以及在什么情况下）。
-
完成了，我上传了
-
这仍然没有告诉我们实际的 DOM 是什么：在开发工具中，在“检查器”选项卡中，之前的树结构是什么，之后的树结构是什么？因为您显示的图像确实看起来像一个真正的画布元素，只是一个没有绘制任何内容的图像：控制台选项卡是否显示任何错误？此外，请帮助自己并使用为画布元素提供背景颜色的样式表，这样您就可以知道它的存在。记住，你在调试，让事情super对你自己很明显。
标签： javascript html