前端使用html2Canvas將html生成圖片(兼容IE)

準備工作

//  jq 頁面必備 必須引入元素嘛
<script src="./jquery-3.4.1.min.js"></script>
//  bluebird 其實用得比較經常 babel es6 轉es5 的一個插件
<script src="./bluebird.js"></script>
//  html2canvas 我們核心插件
<script src="./html2canvas.min.js"></script>

應用

  • index.html
<body class="Body">
    <div class="AllWrap relative">
      <button
        title="保存爲圖片"
        style="position: absolute;top:30px;left:100px;"
        onclick="saveCanvas()"
      >
        保 存
      </button>
      <a href="" download="下載圖.png" id="download"></a>
    </div>
</body

  • 添加腳本
<script>
      // 判斷瀏覽器是否爲IE 且爲IE11以下
      function isIE() {
        if (!!window.ActiveXObject || 'ActiveXObject' in window) {
          return true
        } else {
          return false
        }
      }

      function saveCanvas() {
        // html2canvas($('.Body')).then(function(canvas) {
        //   var imgUri = canvas
        //     .toDataURL('image/png')
        //     .replace('image/png', 'image/octet-stream')
        //   $('#download').attr('href', imgUri)
        //   console.log(imgUri)
        //   document.getElementById('download').click()
        // })

        html2canvas($('.Body'), {
          allowTaint: true,
          useCORS: true,
          onrendered: function(canvas) {
            if (isIE || isIE11 || isEdge) {
              var blob = canvas.msToBlob()
              navigator.msSaveBlob(blob, 'a.png')
              return
            }
            console.log(123)
            canvas.id = 'mycanvas'
            var dataURL = canvas.toDataURL('image/png')
            var mine_type = 'image/png'
            var save_link = document.createElement('a')
            save_link.setAttribute('download', 'img')
            save_link.href = dataURL
            var event = document.createEvent('MouseEvents')
            event.initMouseEvent(
              'click',
              true,
              false,
              window,
              0,
              0,
              0,
              0,
              0,
              false,
              false,
              false,
              false,
              0,
              null
            )
            save_link.dispatchEvent(event)
          }
        })
      }
    </script>

其實這都很簡單,琢磨一波 就闊以了

具體代碼在github,歡迎指導

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章