[JavaScript] 利用html2canvas實現dom元素轉圖片下載

安裝html2canvas依賴

npm install --save html2canvas

導入

import html2canvas from 'html2canvas'

使用

let container = document.getElementById('views-container')
html2canvas(container, {
   width: container.clientWidth,
   height: container.clientHeight,
   backgroundColor: '#0f3050',
   ignoreElements: (element) => { // 忽略不被繪制的dom元素
     return element.className === 'tool product-view-tool'
   }}).then(canvas => {
     let src = canvas.toDataURL('image/jpg', 1)
     let image = new Image()
     image.src = src
     let url = image.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream')
     let a = document.createElement('a')
     a.download = '產品圖.jpg' // 設置下載的文件名，默認是'下載'
     a.href = url
     document.body.appendChild(a)
     a.click()
     a.remove() // 下載之后把創建的元素刪除
 })