zoukankan      html  css  js  c++  java
  • 在Vue项目中使用html2canvas生成页面截图并上传

    引入cnpm install html2canvas.

    html代码

    <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref -->
    <div class="image_tofile" ref="imageTofile">
      <!-- 这里放需要截图的元素,自定义组件元素也可以 -->
    </div>
    <!-- 如果需要展示截取的图片,给一个img标签 -->
    <img :src="htmlUrl">

     js代码

    // 引入html2canvas
    
    import html2canvas from 'html2canvas'
    
    // 注册组件
    
    data() {
      return {
        htmlUrl: ''
      }
    },
    components: {
      html2canvas
    },
    methods: {
      // 页面元素转图片
      toImage() {
        // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
        html2canvas(this.$refs.imageTofile, {
          backgroundColor: null
        }).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: this.htmlUrl
        }).then(res => {
          if (res.code && res.data) {
     
          }
        })
      }
    }

      

  • 相关阅读:
    深入Java虚拟机(4)——网络移动性
    安装ftp碰到的问题及解决方法
    6.设置ListView的Item的高度无效
    hdu1181(变形课)
    ZooKeeper分布式集群部署及问题
    管理线程之创建线程
    Linux系统编程——多线程实现多任务
    Request.Params用法,后台接收httpget参数
    resharper警告 :linq replace with single call to FirstOrDefault
    SQL Prompt几个快捷键
  • 原文地址:https://www.cnblogs.com/shirliey/p/10647239.html
Copyright © 2011-2022 走看看