Uniapp 使用html2canvas生成海报

大家有没有想过，如何在Uniapp H5上快速生成海报？

今天，我要分享一个让你省时省力的小技巧！Uniapp H5生成海报代码分享，一键生成，再也不用手动排版了！而且这个技巧还可以自定义海报内容和样式，满足不同需求。除此之外，还可以加入二维码、文字等元素，让海报更加个性化。如果你是一名微商、创业者或者需要频繁发布海报的人，这个技巧绝对是你的福音！快来试试这个小技巧吧，省时省力，让你的海报制作更加高效！如果你有更好的海报制作技巧，欢迎在评论区分享哦！记得点赞关注哦！

效果如下：

实现步骤

• 安装依赖 

npm install html2canvas --save
npm install tki-qrcode --save

• 示例代码

<template>
	<view class="canvas-wrap">
		<view class="canvas-content-wrap" id="poster" v-if="imageData === ''">
		  <image :src="indexpic" class="poster-indexpic" mode="widthFix"></image>
		  <view class="poster-title"> AI智能客服 </view>
		  <tki-qrcode
			:val="qrcodeUrl"
			:size="248"
			:onval="true"
			:load-make="true"
		  />
		</view>
		<view v-else class="effectView">
			<image :src="imageData"  mode="widthFix" ></image>
			<view class="poster-title"> 长按识别图片保存或分享给好友 </view>
		</view>
		<view class="buttonView" v-if="imageData === ''">
			<button type="primary" @click="createPoster" >生成</button>
		</view>
	</view>
</template>

<script>
	//html转canvas
	import html2canvas from 'html2canvas'
	//导入二维码组件
	import tkiQrcode from 'tki-qrcode'
	
	export default {
	  components: {
	    tkiQrcode
	  },
	  data() {
	    return {
	      //海报封面
	      indexpic: 'https://unimall.zhihong.online/media/kefu.png',
	      //最后生成的图片信息
	      imageData: ''
	    }
	  },
	  computed: {
	    //二维码链接
	    qrcodeUrl() {
	      //测试链接
	      return 'https://unimall.zhihong.online/h5/pages/robot/dialogue/index'
	    }
	  },
	  methods: {
	    //生成海报
	    createPoster() {
	      uni.showLoading({
	        title: '正在生成海报'
	      })
	      let dom = document.querySelector('#poster')
			
	      html2canvas(dom, {
	        width: dom.clientWidth, //dom 原始宽度
	        height: dom.clientHeight,
	        scrollY: 0,
	        scrollX: 0,
	        useCORS: true
	      }).then((canvas) => {
			 
	        uni.hideLoading()
	        //成功后调用返回canvas.toDataURL返回图片的imageData
	        this.imageData = canvas.toDataURL('image/png', 1)
	      })
	    },
	  }
	}
</script>

<style lang="scss" scoped>
	.canvas-wrap {
	  padding: 20rpx;
	  text-align: center;
	  .canvas-content-wrap {
		background: rgb(224, 187, 63);
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #ffffff;
		padding: 20rpx;
		z-index: -1;
		border-radius: 10rpx;
		.poster-indexpic {
		  height: 200rpx;
		  margin-bottom: 40rpx;
		}
		.poster-title {
		  font-size: 32rpx;
		  margin-bottom: 40rpx;
		}
	  }
	  .effectView{
		  margin-top: 10rpx;
	  }
	  .buttonView{
		  margin-top: 10rpx;
	  }
	}
</style>

• 合理避坑

1.  代码中使用的图片链接容易出现跨域问题，导致生成的海报中图片那块区域可能会是空的，左右部署H5代码的时候，尽量跟图片资源在同一个域名下；
2.  部署到微信公众号使用时不能通过脚本唤起分享和下载，需要长按才能能唤起保存图片以及分享给他人的功能。