前端海报，微信长按保存图片错误

前端海报，微信长按保存图片错误

一次项目中遇到的，

操作

前端从活动详情页，跳转到生成海报的页面；顺利生成海报；然后长按进行保存图片操作，

结果

发现出来的图片居然是上个详情页的跳转图片，不信邪，反复试验，发现确实存在这种情况，而且不单单是上个页面，海报页有时也会发生长按保存的图片非目标图片。

上图

问题概括

总的来说，就是微信长按保存时，有时会保存非目标图片。

问题分析

代码逻辑不存在问题，开始以为是层级问题，遂将生成的海报层级设置为最高，但是问题仍没有解决；
然后有猜测是否在长按保存时，海报还未生成，遂加延迟，仍无效；
反复测试后发现，海报生成后，手指只要触摸过生成的海报，则接下来长按，就会顺利保存成想要的图片，海报被成功保存。
到了这里，我不禁有了一个猜测，是否微信的长按保存跟你上一次接触的图片有很大关系啊？就类似于a标签，当你点击过之后会有一个active的属性一样；类似的，微信长按保存，可能也会给你点击的图片附加类似“active”的属性，方便微信在长按事件中，获取对应的“active”的图片。于是我就对应试了一下，发现好像是这么回事儿。

问题解决

问题已经找到了，接下来就是解决了——————pointer-events:none;
这个css属性它能够：

阻止用户的点击动作产生任何效果
阻止缺省鼠标指针的显示
阻止CSS里的hover和active状态的变化触发事件
阻止JavaScript点击动作触发的事件

刚好符合目前遇到的问题。
将不相关的图片元素都加上这个css属性，这样就能够避免其他图片元素，对海报的影响了。
试了之后果然可以解决目前的问题

附加说明

我的海报逻辑是：
1，显示的是正常的html元素；
2，将相应的html通过html2canvas生成海报；
3，将生成的海报定位在显示的html元素上方，设置透明度为0，这样用户在长按保存时就是相当于对浮在上面的海报进行保存