html2canvas实现自动截屏html

最新推荐文章于 2021-12-03 16:26:54 发布

指标满载

最新推荐文章于 2021-12-03 16:26:54 发布

阅读量940

点赞数 1

文章标签： canvas html 截屏

本文链接：https://blog.csdn.net/weixin_44770377/article/details/104292784

版权

本文介绍了如何使用html2canvas库来截取HTML页面的一部分，并将截取到的图像转换为file文件上传到服务器。首先，需要从官网下载html2canvas并引入到项目中，然后将待截图的HTML内容用id标记。最后，将截屏生成的base64编码转换成file文件，以便进行服务器上传。

摘要由CSDN通过智能技术生成

html2canvas官网：http://html2canvas.hertzen.com/

一、下载：

npm install html2canvas  --save

二、项目页面中引入：

import html2canvas from 'html2canvas'

components: {
  html2canvas
},

三、将你需要截取的部分用 id 包裹起来，截的就是改区域：

//触发截屏事件
<div @click="handleOk">
   <img style="width: 60px;margin-bottom: 15px" src="@/assets/img/knowledge/feedback.png">
</div>

//id包裹需要截屏的部位
<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

//弹窗为了显示出截屏图片
<el-dialog modal-append-to-body
               append-to-body
               title="问题反馈"
               top="50px"
               :visible.sync="problemDialog"