利用canvas截图并下载


//创建一个新的canvas
     let canvas2 = document.createElement('canvas')
     let _canvas = document.querySelector('.share-photo')
     let w = parseInt(window.getComputedStyle(_canvas).width)
     let h = parseInt(window.getComputedStyle(_canvas).height)
     //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
     canvas2.width = w * 2
     canvas2.height = h * 2
     canvas2.style.width = w + 'px'
     canvas2.style.height = h + 'px'
     //可以按照自己的需求，对context的参数修改,translate指的是偏移量
     let context = canvas2.getContext('2d')
     context.scale(2, 2)
     html2canvas(_canvas, { canvas: canvas2 }).then(function(canvas) {
         let dataUrl = canvas.toDataURL()
         console.log(dataUrl)
         let time = new Date().valueOf()
         let a = document.createElement('a')
         a.href = dataUrl
         a.download = 'diwali' + time
         let e = document.createEvent('MouseEvents')
         a.onclick = function() {
             console.log('1111')
         }
         // 通过手动触发a标签的点击事件进行下载
         e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
         a.dispatchEvent(e)
     })
AlexZ33 / canvas_demo

利用canvas截图并下载 #6
