1别垮、首先安裝html2canvas和canvas2Image便监，利用npm install? （下載完后會發(fā)現(xiàn)當你引入canvas2Image的時候會報錯，我發(fā)現(xiàn)的問題是node_modules中沒有export的）
2碳想、然后進入主要的代碼環(huán)節(jié)
其中tab代表你想要截圖的div元素
domImg就是將這張圖片添加到那個元素上（自己可以隨意定義）
imgName顧名思義就是你下在圖片的命名
html2canvas(tab, {
? ? ? useCORS: true, // 【重要】開啟跨域配置
? ? ? allowTaint: true, // 允許跨域圖片
? ? ? taintTest: false // 是否在渲染前測試圖片
? ? }).then(canvas => {
? ? ? let context = canvas.getContext('2d')
? ? ? context.mozImageSmoothingEnabled = false
? ? ? context.webkitImageSmoothingEnabled = false
? ? ? context.msImageSmoothingEnabled = false
? ? ? context.imageSmoothingEnabled = false
? ? ? let newImg = Canvas2Image.convertToImage(
? ? ? ? canvas,
? ? ? ? canvas.width,
? ? ? ? canvas.height
? ? ? )
? ? ? document.getElementById('download').appendChild(newImg)
? ? ? newImg.id = 'newImg'
? ? ? // let domImg = document.getElementById('newImg')
? ? ? domImg.style.width = '100%'
? ? ? // this.dis = false
? ? ? let src = canvas.toDataURL()
? ? ? let aLink = document.createElement('a')
? ? ? let parts = src.split(';base64,')
? ? ? let contentType = parts[0].split(':')[1]
? ? ? let raw = window.atob(parts[1])
? ? ? let rawLength = raw.length
? ? ? let uInt8Array = new Uint8Array(rawLength)
? ? ? for (let i = 0; i < rawLength; ++i) {
? ? ? ? uInt8Array[i] = raw.charCodeAt(i)
? ? ? }
? ? ? let blob =? new Blob([uInt8Array], { type: contentType })
? ? ? let evt = document.createEvent('HTMLEvents')
? ? ? evt.initEvent('click', true, true)// initEvent 不加后兩個參數(shù)在FF下會報錯? 事件類型烧董，是否冒泡，是否阻止瀏覽器的默認行為
? ? ? aLink.download = imgName
? ? ? aLink.href = URL.createObjectURL(blob)
? ? ? // aLink.dispatchEvent(evt);
? ? ? // aLink.click()
? ? ? aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))// 兼容火狐
3胧奔、這樣就可以啦
