uniapp中制作可拖拽浮动二维码显示在播放视频上

使用到插件：u-qrcode（生成二维码）：

官方文档：uQRCode 中文文档

uniapp 文档：uQRCode 全端二维码生成插件 支持nvue 支持nodejs服务端 - DCloud 插件市场

效果图：

 实现代码：

HTML:

<video :src="videoSrc" class="VEDIOS" show-fullscreen-btn=false>
			<movable-area class="movable-area">
				<movable-view class="movable-view" :x="x" :y="y" direction="all"  @change="onChange" damping=20 friction=2 inertia=true >
					<cover-view class="coverView">
						<cover-image class="coverImage" :src="imgSrc"></cover-image>
					</cover-view>
				</movable-view>
			</movable-area>
		</video>
		
		<u-qrcode
		ref="qrcode"
		class="uqrcode"
		canvas-id="qr" 
		:value="qrobj" 
		:size="size"
		:options="{
		backgroundImageAlpha:0.3,
		foregroundColor:'#000',
		foregroundImageWidth:40,
		foregroundImageHeight:40, 
		errorCorrectLevel:2,
		foregroundImageSrc:'/static/img/logo@3x.png'}" 
		@complete="qrComplete($event)"></u-qrcode>

javascript: 

onChange(e){//防伪图移动位置改变事件
				console.log(e);
				this.x=e.detail.x;
				this.y=e.detail.y;
			},
			qrComplete(e) {//二维码生成
				if (e.success) {
					console.log('生成成功');
					this.$refs.qrcode.save({
					  success: (res) => {
					    // uni.showToast({
					    //   icon: 'success',
					    //   title: '保存成功'
					    // });
						console.log("本地的图片地址=>",res);
						this.imgSrc = res.path;
					  }
					});
					this.$refs.qrcode.toTempFilePath({
					  success: res => {
					    console.log("临时的图片地址=>",res);
						// this.imgSrc = res;
					  }
					});
				} else {
					console.log('生成失败');
				}
			}