HTML元素截图(html2canvas)
html2canvas 官网 ：http://html2canvas.hertzen.com/
开源地址：https://github.com/niklasvh/html2canvas
<body> <div id="div"> <span>内容</span> <div style="height:300px; border:solid 1px red; width:100px">内容</div> </div> </body> <script src="html2canvas.min.js"></script> <script> var id="div"; //元素的Id html2canvas(document.querySelector("#"+id),{ scale: 2, //缩小2倍 width: $("#"+id).width()+20, //加20的原因是为了图像位置画布的中央 height: $("#"+id).height()+20, //加20的原因是为了图像位置画布的中央 backgroundColor: "#99ccff", //设置背景色 x:-10, //设置x轴上开始位置 y:-8 //设置y轴上开始位置 }).then(canvas => { document.body.appendChild(canvas); //展示截图 console.log("已生成图片"); // var base64 = canvas.toDataURL(); // 将canvas转换成base64 }); </script>
参考地址：https://blog.csdn.net/sodakii/article/details/127100737
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
2017-03-30 List通过HashSet去重