vue2.0截图 html2canvas or dom-to-image 并解决openlayers截图空白问题

1.版本

?

1 2 3

"dom-to-image": "^2.6.0", // or "html2canvas": "^1.4.1",

2.引入

import domtoimage from 'dom-to-image';
// or
import html2canvas from 'html2canvas';

3.dom结构

<div ref="screenshotsImgElem"></div>

<el-button @click="screenshotsHandler">截图</el-button>

4.调用

/** 截屏按钮操作 */
        screenshotsHandler() {
            domtoimage.toPng(this.$refs.screenshotsImgElem).then( (dataUrl) => {
                console.log('dataUrl :>> ', dataUrl);
                // 第一步：将dataUrl转换成Blob
                const blob = this.base64ToBlob(dataUrl);
                // 第二步：上传
                this.uploadShareImg(blob,'domtoimage');
            })
            .catch(function (error) {
                console.error('oops, something went wrong!', error);
            });
},

or

        /** 截屏按钮操作 */
        screenshotsHandler() {
              html2canvas(this.$refs.screenshotsImgElem, {
                    useCORS: true,  // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
                })
                .then(canvas => {
                    const dataUrl = canvas.toDataURL('images/jpg');
                    console.log('dataUrl :>> ', dataUrl);
                    // 第一步：将dataUrl转换成Blob
                    const blob = this.base64ToBlob(dataUrl);
                    // 第二步：上传
                    this.uploadShareImg(blob,'html2canvas');
                })
            
        },

5.base64转blob

js base64转blob

6.解决openlayers截图空白问题

　　引入天地图图层导致空白问题解决方式：

　　

var tilesource = new XYZ({
    url: 'http://***',
    // !设置crossOrigin, 解决截图空白问题
    crossOrigin: 'anonymous',
});