页面元素转为canvas并保存为图片

方法：html2canvas()

原理：html2canvas()会将画面进行截屏转为canvas，之后通过 canvas.toDataURL("image/jpeg", 1);将canvas转化为base64的图片。

源码：

    window.pageYoffset = 0;
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
    // canvasView 是要进行截屏的元素
    html2canvas(canvasView, {
            useCORS: true,
            /*height:canvasView.scrollHeight,
            windowHeight: canvasView.scrollHeight,
            width:canvasView.scrollWidth,
            windowWidth: canvasView.scrollWidth*/
        }).then(canvas => {
            let imgUrl = canvas.toDataURL("image/jpeg", 1);
            this.setState({
                canvasImg:imgUrl
            });
        })
    

tips：对于滚动后无法截屏的问题，可以通过将画面滚动到顶来解决

tips2：画面截取不全（下半部分无法截取等问题），可以通过设置height来解决

补充：在自己的项目中，设置了高度后，依然没有解决，是因为给当前元素设置了height：100% ，而父元素有高度，继承之后导致元素有了固定高度。 获取了元素的scrollHeitht来设置高度后，会出现图片过大但是截图区域小的问题，选取元素后显示，canvas的height/width 和style中的height/width并不相同，之后去掉了height高度的设置