vue中实现生成海报图片html2canvas详细教程

该插件详细配置文档地址建议谷歌浏览器打开，因为翻译的比较准确
实现效果如图所示

1.安装插件 npm install --save html2canvas
2.将要生成图片的区域用大的元素包裹起来例如

代码如下
注意如果图片是通过接口来获取的，一定要后台配置一下nginx这个东西，本人在这里踩了坑的 配置如下

location / {
    add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Allow-Methods 'GET,POST';
       alias /home/html/;
    }

html代码

<div class="poster-menu">
	//这里是要生成图片的区域
	<div class="poster-aside" id="poster-aside">
		<img :src="imgUrl+''+promotionBackgroundUrl" class="img1" >
		//这个是绘制的二维码图片
		<canvas  id="canvas" class="img2">二维码位置</canvas >
	</div>
	
	<div class="poster-desc">
		<img src="../../../assets/images/poster-desc-icon.png" alt="" >
		<p class="poster-lj" v-clipboard:copy="paymentAddress" v-clipboard:success="copy" v-if="tuiguanma">推广链接:{{paymentAddress}}  </p>
		<p class="poster-tg" v-if="tuiguanma">推广码:{{tuiguanma}}</p>
		<router-link to="/microcosm/extension" v-else class="poster-tg" >您还未成为推广大使，请点击前往</router-link>
		<div class="poster-invite">邀请好友成为推广大使吧！</div>
		<!--href="" download="microClub" -->
		<a class="poster-download"  @click="downloadCodeImg">下载</a>
	</div>
</div>

js代码
一定要在mounted的生命周期函数中执行一次downloadCodeImg()这个方法，不然点击按钮下载的时候要点击两次才能下载图片

data () {
	return {
		promotionBackgroundUrl:'',//推广背景图
		imgUrl:this.imgUrls,//图片前缀；我这里是在全局配置的图片前缀，如果后台返回的是完整的路径，这个没有用
	}
},
created () {
	this.getPromotionBackground() //获取图片地址
},
mounted () {
	因为图片是通过接口获取的，页面加载前图片可能还没有获取过来
	setTimeout(()=>{
		this.downloadCodeImg()
	},500)
},
//生成图片
methods:{
	downloadCodeImg(){
		let button= document.querySelector(".poster-download"); //下载按钮
		const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 获取滚动轴滚动的长度
		const width=document.querySelector(".poster-aside").offsetWidth
		const height=document.querySelector(".poster-aside").offsetHeight +30//包裹容器的高度
		html2canvas(document.querySelector(".poster-aside"), {
			width, //画布的宽度，即生成图片的宽度
			height,//画布的宽度，同上
			scrollY: -scrollTop+15, //生成的图片在画布上的偏移量，我这里加15的原因是让图片上下居中
			dpi: window.devicePixelRatio*2 , // 对应屏幕的dpi，适配高清屏，解决canvas模糊问题
			scale: 1, // 缩放
			useCORS: true, // 是否使用图片跨域，如何使本地图片不用配置
		}).then(canvas =>{
			// canvas参数为生成的canvas的dom节点，可以对其进行dom操作
			// 下载功能
			// 设置a标签的download属性，点击a标签变为下载
			button.download = '邀请图' // 设置下载的文件名
			button.href = canvas.toDataURL("image/png");; // a标签的url对应图片base64
		});
	},
	//推广背景图
	getPromotionBackground(){
		//这里通过接口获取背景图片
		imageApi.promotionBackground().then(res=>{
			this.promotionBackgroundUrl=res.data
		})
	}

},