zoukankan      html  css  js  c++  java
  • html2canvas生成图片

     // 图片转换格式的方法 直接使用就好  不需要知道为什么
        dataURLToBlob (dataurl) {
          let arr = dataurl.split(',')
          let mime = arr[0].match(/:(.*?);/)[1]
          let bstr = atob(arr[1])
          let n = bstr.length
          let u8arr = new Uint8Array(n)
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
          }
          return new Blob([u8arr], { type: mime })
        }
    
        /* 保存图片的方法(即按钮点击触发的方法)
          第一个参数为需要保存的div的id名
          第二个参数为保存图片的名称 */
        saveImage (dom, imgText = '测试') {
          let that = this
          let a = document.createElement('a')
          html2canvas(dom).then(canvas => {
            let dom = document.body.appendChild(canvas)
            dom.style.display = 'none'
            a.style.display = 'none'
            document.body.removeChild(dom)
            let blob = that.dataURLToBlob(dom.toDataURL('image/png'))
            // console.log(dom.toDataURL('image/png'))
            // console.log(URL.createObjectURL(blob))
            a.setAttribute('href', URL.createObjectURL(blob))
            // 这块是保存图片操作  可以设置保存的图片的信息
            a.setAttribute('download', imgText + '.png')
            document.body.appendChild(a)
            a.click()
            URL.revokeObjectURL(blob)
            document.body.removeChild(a)
          })
        }

     // 不需要下载图片,直接把图片生成base64,然后给后端的做法

     /* 保存图片的方法(即按钮点击触发的方法)
          第一个参数为需要保存的div的id名
          第二个参数为保存图片的名称 */
        saveImage (dom, imgText = '测试') {
          html2canvas(dom).then(canvas => {
            // 获取Base64码
            console.log(canvas.toDataURL())
          })
        }
  • 相关阅读:
    包含停用词的词频统计(map,set非class版本)<< 0919
    pair,map,set<<0924
    答题程序中用户登录状态的保存<<0924
    时间戳<<0923
    list,vector相关函数与区别<<0922
    类里面的赋值和拷贝函数<<0922
    vector的初始化补充,list,find函数,指针和迭代器等<<0922
    redhat 6上nis配置
    如何查看cache信息
    oprofile 安装使用
  • 原文地址:https://www.cnblogs.com/plBlog/p/12603580.html
Copyright © 2011-2022 走看看