tools-vue icon indicating copy to clipboard operation
tools-vue copied to clipboard

灵摆卡生成时,由于数据源卡图尺寸问题导致生成的卡图部分被遮挡

Open xiluzi opened this issue 1 year ago • 1 comments

今天第一次使用这个网站,感觉很不错。给作者点个👍。

问题描述:

但是也同时发现了一个问题。即灵摆卡生成时,由于数据源卡图尺寸问题导致生成的卡图部分被遮挡。

复现方法:

当卡密输 98452268 或者 88919365 等搜索时,会出现卡图下半部分被遮挡的情况。

image

而当卡密输 40227329 搜索时,卡图正常显示。

image

原因:

当我查看 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 的显示,就会出现下半部分被遮挡的情况。

解决方法(仅代表个人建议):

因为第三方接口返回的图片我们无法控制,那只能说,接口返回的时候,判断下图片尺寸(视情况先判断卡片类型是否为灵摆卡)。

  1. 如果接口返回的尺寸是全身的,则以现在同样的逻辑处理。

  2. 如果接口返回的尺寸只有半身,则用新的逻辑处理。

xiluzi avatar Aug 06 '22 08:08 xiluzi

感谢你的提问,灵摆卡图确实有这样情况。如果卡图高度大于宽度,我会在顶部截取一个正方形(灵摆效果背景是半透明的,差不多是一个正方形)。高度小于宽度的情况,截取了一个居中的内接正方形。有些卡图给的不全,所以截取的图片也不全。

kooriookami avatar Aug 08 '22 08:08 kooriookami