截屏，并传递到后台

简化版

<div ref='box'></div>

cnpm i html2canvas --save

//引入html2canvas
import html2canvas from 'html2canvas'



screenshot(){
html2canvas(this.$refs.box,{
backgroundColor:null,//避免图片有白色边框
useCORS:true,
allowTaint:true
}).then(canvas=>{
let dataURL = canvas.toDataURL('image/png',1.0)
//默认截取的图片就是base64格式的，后台可以转化
this.$emit('search',dataURL)
})
}

---

详细版

async screenshot(){
let base64ImgStr = '';
try{
let htmlDOM = this.$refs.box;
const domWidth = htmlDOM.offsetWidth;
const domHeight = htmlDOM.offsetHeight;
const scale = widow.devicePixelRatio ? window.devicePixeRatio:2;
const canvas = document.createElement('canvas')
canvas.width = domWidth * scale;
canvas.height = domHeight * scale;
canvas.style.width = `{domWidth}px`;
canvas.style.height = `{domHeight}px`;

const ctx = canvas.getContext('2d')
ctx.scale(scale,scale);

window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;

const DOMCanvas = await html2canvas(htmlDOM,{
canvas,
backgroundColor:'rgba(0,0,0,0)';
width:domWidth,
height:domHeight,
useCORS:true,
allowTaint:false,
scrollX:0,
scrollY:0,
logging:true//日志打印
})
base64ImgStr = DOMCanvas.toDataURL('image/png')
//根据情况看，是否去掉base64的前缀
base64ImgStr = base64ImgStr.replace(/^data:image\/w+;base64,/,'')
if(base64ImgStr){
console.log('success')
//默认截取的图片就是base64格式的，后台可以转化
this.$emit('search',dataURL)
}else{
console.log('error')
}