搜索
简帛阁>技术文章>在Vue项目中使用html2canvas生成页面截图并上传

在Vue项目中使用html2canvas生成页面截图并上传

使用方法

项目中引入

npm install html2canvas

html代码
//html代码
<!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref -->
<div class="image_tofile" ref="imageTofile">
  <!-- 这里放需要截图的元素,自定义组件元素也可以 -->
</div>

<!-- 如果需要展示截取的图片,给一个img标签 -->
<img :src="htmlUrl">

 

js代码
// 引入html2canvas
import html2canvas from 'html2canvas'

// 注册组件
components: {
  html2canvas
},

data () {
  return {
    htmlUrl: ''
  }
},

mounted () {
  // 如果页面一加载就需要生成图片,就在mounted里调用方法,给一个setTimeout,保证页面元素已存在
  setTimeout(this.toImage, 500)

},
methods: {
  // 页面元素转图片
    toImage () {
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      html2canvas(this.$refs.imageTofile, {
        backgroundColor: null,
     useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
      }).then((canvas) => {
        let url = canvas.toDataURL('image/png')
        this.htmlUrl = url
        // 把生成的base64位图片上传到服务器,生成在线图片地址
        this.sendUrl()
      })
    },

    // 图片上传服务器
    sendUrl () {
      // 如果图片需要formData格式,就自己组装一下,主要看后台需要什么参数
      const formData = new FormData()
      formData.append('base64', this.company.fileUrl)
      formData.append('userId', 123)
      formData.append('pathName', 'pdf')
      this.$ajax({
        url: apiPath.common.uploadBase,
        method: 'post',
        data: formData
      }).then(res => {
        if (res.code && res.data) {
          
        }
      })
    }
}

OK 大功告成O(∩_∩)O哈哈~

使用方法项目引入npminstallhtml2canvashtml代码//html代码<!把需要生成截图的元素放一个元素容器里,设置一个ref><divclassimage_t
最近写项目有用到html2canvasjs,可以实现页面截图功能,但遭遇了许多的坑,特此写一篇随笔记录一下。使用html2canvas时可能会遇到诸如只能截取可视化界面、截图没有背景色、svg标签
1首先引入:importhtml2canvasfrom'//static/js/html2canvasminjs'23然后:4<dividcapturestylepadding:10px;ba
html2canvas的官方文档地址:http://html2canvashertzencom/实现原理:将需要截图页面canvas进行重绘,这样将页面转换成图片的过程。注意事项:不支持ifr
利用JavaScript将页面截图生成图片传给后台的插件:html2canvas一、总结一句话总结:10<scripttypetext/javascript>11functiontake
1、使用html2canvas存在的问题:不同的机型绘制位置不同的问题。这个主要因为Html动态设置了html的dpr。(dpr可以解决屏幕显示不了1pxborder和无法显示小于12px的文字的问
结合html2canvas和jsPDF实现html页面转pdfBy:授客QQ:103355122实践环境win10Vue296axios0180html2canvas100rc3jspdf153安装
最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员。最终记录的异常信息如下,上面的【截图报告管理员】就是使用html2canvas前端插件实现的
1引包npminstallqrcodejs2savenpminstallsavehtml2canvasimporthtml2canvasfromhtml2canvasimportQRCodefromq
之前我们简单的了解了canvas的基本用法,这里我们来了解下如何将html内容写入到canvas生成图片,这里我使用到了html2canvas插件,这个插件是基于canvas实现的html2canv