vue2.0截图 html2canvas or dom-to-image 并解决openlayers截图空白问题
1.版本
"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', });