vue 白边 项目_vue 使用 html2canvas将DOM转化为图片

一、前言

现在项目开发中将DOM转化为图片是一个很常见的需求。于是决定使用html2canvas这个插件。PS:版本比较多，这里介绍最新版。

二、代码

1.安装插件

npm install html2canvas --save

2.使用(这里页面里的图片class="pic"是随机取的，所以生成的图片不是特定的)

/** DOM最后生成的图片*/

/** 需要转化为图片的DOM，由于PicUrl不是特定的，所以ref不能写固定值*/

小鱼蕾蕾

.wrap {

width: 100%;

height: 100vh;

overflow-y: scroll;

background-color: #fff;

text-align: center;

position: relative;

}

.posterImg{

width: 100%;

height: auto;

position: absolute;

left:0;

top:0;

z-index: 2;

}

.pic {

width: 100%;

height: auto;

display:block;

}

以下dataURL是最后转化出来的图片base64地址，放在img标签中即可展示。

export default {

name: 'getImg',

data(){

return{

dataURL:"", //DOM生成的图片

RandomNum:1, //随机数

ImgRef:"", //DOM的ref

PicUrl:"", //页面里的随机图片

ImgArr:[

./static/img1.png,

./static/img2.png,

./static/img3.png,

]

}

},

beforeRouteEnter: (to, from, next) => {

//does NOT have access to `this` component instance

next(vm => {

vm.Instance();

});

},

beforeRouteUpdate: function(to, from, next) {

next();

this.Instance();

},

menthod:{

Instance(){

//生成随机整数 [0, 2]

this.RandomNum = Math.floor(Math.random() * (2 - 0 + 1) + 0);

this.ImgRef = "PosterImg"+this.RandomNum;

this.PicUrl = this.ImgArr[this.RandomNum-1];

setTimeout(()=>{

this.GetPosterUrl();

},3000)

},

//把html生成图片

GetPosterUrl(){

let ImgRef = "PosterImg"+this.RandomNum;

this.$nextTick(() => {

html2canvas(this.$refs[ImgRef], {

allowTaint: true,

backgroundColor: null // 解决生成的图片有白边

}).then(canvas => {

let dataURL = canvas.toDataURL("image/png");

this.dataURL = dataURL;

console.log(this.dataURL);

});

});

}

}

}

三、常见bug

1.生成出来的图片有白色边框

在配置项里配置backgroundColor: null即可。

2.有图片显示不出来并有报错(一般是跨域的错)

这是最常见的一个bug，就是这个插件无法生成跨域了的图片，也看了官方文档配置了也百度了都没有好的办法，最后是让后端直接把跨域的图片转成base64，就完美解决了这个问题。

3.生成图片后会在原始DOM上覆盖而产生一个闪动的效果

先让生成的图片隐藏，等生成好以后再展示。

4.图片截取不全

(1).资源较多，造成模块并没有完全加载完毕，就已经生成了截图；加个定时器进行延时操作

setTimeout(()=>{

this.GetPosterUrl();

},3000)

(2).页面超过一屏时，生成图片是如果直接从document.body上截取，只能截取到可视区域。所以从内部DOM上截取，但是此种情况下，如果滚动屏幕，截取图片不对。

解决方法：让滚动属性设置在最外层的元素(.wrap)上，而不是在body上

.wrap{

width: 100%;

height: 100vh;

overflow-y: scroll;

background-color: #fff;

text-align: center;

position: relative;

}