1.图片下载到本地
     2.本地静态文件访问
     3.元素大小相同,相互覆盖

1.图片下载到本地

     实现原理:创建a标签,利用a标签下载属性.

  download(){
		   const link = document.createElement('a');
			link.href = "图片地址";
			link.setAttribute('download', name);
			document.body.appendChild(link);
			link.click();
		  }

PC端下载会自动调用浏览器文件下载选择窗口,谷歌浏览器默认指定下载位置不会弹窗,360浏览器可正常显示下载窗口.

2.本地静态文件访问

vue项目中按照项目路径直接访问静态文件是无法正常显示的

处理办法是静态文件项目路径使用require进行引入:

data() {
	    return{
			// qrCodeUrl:require("../assets/qrcode_bg.png"),
			qrCodeUrl:"../assets/qrcode_bg.png",
		}
	  },

可以正常访问:

3.元素大小相同,相互覆盖

问题背景:canvas标签生成二维码,canvas需要占据一定空间,生成的二维码地址赋值给img标签,由于初始化canvas不需要展示,想将img初始化赋值默认图片覆盖掉canvas,然后生成二维码图片之后赋值新的图片地址.实现原理:

使用绝对定位来实现。父元素需要设置为相对定位(position: relative),
各子元素设置为绝对定位(position: absolute),z-index属性大的子元素显示在最上方.