前端 截取某個區域，導出圖片html2canvas

前提：整個放canvas轉成圖片的區域

 

<div id="mainView">
</div>

 

代碼

const targetDom = document.querySelector("#mainView")
        const copyDom = targetDom.cloneNode(true)
        copyDom.style.width = targetDom.scrollWidth + 'px'
        copyDom.style.height = targetDom.scrollHeight + 'px'
        document.body.appendChild(copyDom)
        html2canvas(copyDom, {
            allowTaint: false,
            useCORS: true,
            height: targetDom.scrollHeight,
            width: targetDom.scrollWidth
        }).then(canvas => {
// canvas
            console.log(canvas.toDataURL());//這個就是圖片base64
        });

更多信息參考鏈接： https://www.jianshu.com/p/7d98ace248fd