uni-app页面部分模块转化成图片并保存（适用app和h5）以及涉及轮播滚动时，区分轮播内容生成图片方法

上一篇uni-app的截屏是截取整个页面的内容，这一篇描述页面中一部分模块转化成图片并保存的方法。
效果描述：
（页面:上面是一个卡片加二维码/条形码，下面是一个轮播，可以切换不同的卡片，轮播如果把id包裹在外层的画，只能把第一张生成图片，后面几张就会出现空白）

（需要生成图片的样子如下：）

轮播部分需要的图片如下：

这里生成图片的方法主要用到了html2canvas和renderjs。
html2canvas的使用方法：

npm i html2canvas // 找到项目目录直接下载

import html2canvas from 'html2canvas' // 在使用的页面直接引用

具体实现方式：

// 将需要生成图片的模块用标签包裹并取唯一id名
<view  id="posterHtml">内容</view>
// 调用renderjs内的方法，注意使用canvas去调用，script标签内的module名称
<botton @click="canvas.createPoster"> </button> 

js部分：（一次把代码全copy过来了，下面会写详细注释）

//rederjs的使用方法，写上lang="renderjs"就能使用，module名相当于一个名称
<script module="canvas" lang="renderjs"> 
	import html2canvas from 'html2canvas' // 引用html2canvas
	export default {
   
			data(){
   
				return {
   
					current:0 // 变量用于区分轮播滑倒第几个
				}
			},
	        methods: {
   
	        	// 轮播监听滑动到第几个，拿到下标index。注意：在html调用这里的方法时要这么写：	@change="canvas.changeImg"；另外轮播内需要生成图片的部分，在swiper-item标签内，再用view标签包裹需要生成图片的部分，并利用下标动态取id名，类似：<view :id="'posterHtml2'+index" >...</view>
				changeImg: function(e) {
   
					this.current = e.detail.current;
				},
	          createPo