zoukankan      html  css  js  c++  java
  • 在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) {
              
            }
          })
        }
    }

    需要注意的有两点:

    1)在当前 VUE 页面不能引用 zepto.js 会和 html2canvas 有冲突,总之就是截不出来或者有空白,不管是哪个先加载都不行;

    2)如果你想截 iframe 里面的页面,那么加载的页面必须和当前面在同一个源之中,也就是浏览的同源策略,要不然也截不到内容;

    另赋两个地址:  配置说明    git源码

    转自:  目之所及,行之所至

  • 相关阅读:
    QDir路径的测试与创建-QT
    QGridLayout--01
    第42月第18天 iOS匹配特殊字符 markedTextRange
    第42月15天 framework静态库依赖framework静态库
    第42月第13天 top命令 load average dispatch_group
    第42月第11天 curl post 预约码设计
    第42月第5天 vux 5大功能
    第42月第5天 Swift Playgrounds Mac 版上线 app强制更新
    第42月第4天 Xcode11 打包失败 IPA processing failed
    第42月第3天 PlatformVersionAtLeast armv7 armv7s arm64 podspec icon在线
  • 原文地址:https://www.cnblogs.com/jiuyi/p/11676400.html
Copyright © 2011-2022 走看看