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属性大的子元素显示在最上方.
