tools-vue
tools-vue copied to clipboard
灵摆卡生成时,由于数据源卡图尺寸问题导致生成的卡图部分被遮挡
今天第一次使用这个网站,感觉很不错。给作者点个👍。
问题描述:
但是也同时发现了一个问题。即灵摆卡生成时,由于数据源卡图尺寸问题导致生成的卡图部分被遮挡。
复现方法:
当卡密输 98452268 或者 88919365 等搜索时,会出现卡图下半部分被遮挡的情况。
而当卡密输 40227329 搜索时,卡图正常显示。
原因:
当我查看 network 请求的 api 的时候,发现请求的是第三方的 https://storage.googleapis.com/ygoprodeck.com/pics_artgame/{卡密}.jpg 接口。
然后发现,第三方的卡图接口,对于灵摆卡图,存在2种不同的尺寸。
对于 98452268 ,https://storage.googleapis.com/ygoprodeck.com/pics_artgame/98452268.jpg 该接口返回的卡图没有下半部分,
而对于 40227329,https://storage.googleapis.com/ygoprodeck.com/pics_artgame/40227329.jpg 该接口返回的卡图有下半部分。
因此如果以同样的逻辑来处理的时候,对于 98452268 的显示,就会出现下半部分被遮挡的情况。
解决方法(仅代表个人建议):
因为第三方接口返回的图片我们无法控制,那只能说,接口返回的时候,判断下图片尺寸(视情况先判断卡片类型是否为灵摆卡)。
-
如果接口返回的尺寸是全身的,则以现在同样的逻辑处理。
-
如果接口返回的尺寸只有半身,则用新的逻辑处理。
感谢你的提问,灵摆卡图确实有这样情况。如果卡图高度大于宽度,我会在顶部截取一个正方形(灵摆效果背景是半透明的,差不多是一个正方形)。高度小于宽度的情况,截取了一个居中的内接正方形。有些卡图给的不全,所以截取的图片也不全。