How can I save div as image at client side where div contains one or more than one HTML5 canvas elements?(如何在 div 包含一个或多个 HTML5 画布元素的客户端将 div 保存为图像?)
问题描述
Div 'canvasesdiv' 元素包含三个 HTML5 画布.
如何使用 JavaScript 保存在客户端的 div 'canvasesdiv' 中包含所有画布的图像?
解决方案 这和我之前回答的一个问题非常相似:save-many-canvas-element-as-image
总而言之:将所有画布绘制到其中之一，然后通过 toDataURL()
获取图像Div 'canvasesdiv' element contains three HTML5 canvases.
<div style="position: relative; width: 400px; height: 300px;" id="canvasesdiv">
<canvas width="400" height="300px" style="z-index: 1; position: absolute; left: 0px; top: 0px;" id="layer1" />
<canvas width="400" height="300px" style="z-index: 2; position: absolute; left: 0px; top: 0px;" id="layer2"/>
<canvas width="400" height="300px" style="z-index: 3; position: absolute; left: 0px; top: 0px;" id="layer3"/>
</div>
How can I save an image combining all canvases present inside the div 'canvasesdiv' at client side using JavaScript?
解决方案 This is very similar to a previous question that I answered:
save-many-canvas-element-as-image
In summary: draw all of the canvases to one of them and then get the image via toDataURL()
这篇关于如何在 div 包含一个或多个 HTML5 画布元素的客户端将 div 保存为图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本文标题为：如何在 div 包含一个或多个 HTML5 画布元素的客户端将 div 保存为图像?
- 如何显示带有换行符的文本标签? 2022-01-01
- 是否可以将标志传递给 Gulp 以使其以不同的方式 2022-01-01
- 如何向 ipc 渲染器发送添加回调 2022-01-01
- 我不能使用 json 使用 react 向我的 web api 发出 Post 请求 2022-01-01
- 在不使用循环的情况下查找数字数组中的一项 2022-01-01
- 为什么悬停在委托事件处理程序中不起作用? 2022-01-01
- 为什么我的页面无法在 Github 上加载? 2022-01-01
- 使用 iframe URL 的 jQuery UI 对话框 2022-01-01
- 从原点悬停时触发 translateY() 2022-01-01
- 如何调试 CSS/Javascript 悬停问题 2022-01-01
