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())
      })
    }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM