Steam个人资料长展柜制作

利用切图网站+检查元素直接完成 :huaji3:

从此摆脱淘宝美工不求人!

 

具体步骤

  • 进入https://steam.design/
  • 粘贴背景图片链接,Download ZIP
  • 上传艺术作品的地址如下(https://steamcommunity.com/sharedfiles/edititem/767/3/
  • 先选择自己想要上传的文件,然后网页点击右键,选择检查
  • 之后可以看到页面的源码,修改图片的宽度和高度数值,使宽度远远大于高度,例如宽度是10000,高度是1(注意请先选择要上传的文件,然后修改这两个数值,因为选择文件之后会自动填写高度和宽度)
  • 之后请正常填写艺术作品的其他信息,然后上传(注意可能由于尺寸问题或者转换需要时间,艺术作品页面上可能无法正常显示,但是在艺术作品展柜中是能够正常显示的)
  • 操作到此结束,可以看到不仅能够绕过大框的高度限制,也能绕过右侧几个小框的高度限制

最后

可能有人想知道为什么会出现这样的问题,下面是SteamCN大佬的一些推测,对技术细节感兴趣的朋友可以参考

首先艺术作品的上传流程如下:
用户选择图片->浏览器端判断图片尺寸->图片文件和尺寸被保存在服务器上
这里可以看到的一个问题是图片的尺寸是在用户的浏览器中判断的,用户可以自由修改,这是一个较严重的设计缺陷,让我们可以伪造图片的宽度和高度

接下来我们考虑下,如何将任意尺寸的图片,缩放到506×506的方框中,这里需要分两种情况(为了简单考虑,我们假设图片的高度和宽度都要超过506)
对于宽度大于高度的图片,例如宽度2000,高度1000,那么我们应该将图片宽度缩小到506,然后按照宽度缩小的比例,计算出最终的高度为253
反过来,对于高度大于宽度的图片,例如宽度1000,高度2000,我们应该将图片高度缩小到506,然后按照高度缩小的比例,计算出最终的宽度253

那么在Steam上是如何完成上面的过程的呢?
如果你查看过艺术作品展柜中的图片地址,你会发现他的格式类似
http://cloud-3.steamusercontent.com/ugc/277356028447422006/C451407A6AC744F043E4D510551B95002A9C7C13/?interpolation=lanczos-none&output-format=jpeg&output-quality=95&fit=inside|506:*
可以看到Steam保存了原始尺寸的图片,在显示的时候,会根据需要,通过参数来转换图片的尺寸格式等,其中的加粗部分就是用来控制图片的缩放的,这里的506是指想要得到的宽度,高度是*,意思是根据宽度自动计算高度

到这里,我们就可以理解为什么可以通过伪造宽度高度来突破展柜的高度限制了:
我们上传的图片,本来是一张高度大于宽度的图片,在显示的时候应该使用类似fit=inside|*:506的参数,也就是将高度限制为506,然后自动计算宽度,这样就能缩放到506×506的区域中,但是我们通过伪造高度和宽度,让Steam误以为这是一张宽度大于高度的图片,在显示的时候使用fit=inside|506:*,这样我们的图片就能够撑满506的宽度,之后自动计算出的高度自然会超出506的限制,得到我们想要的展示效果

在猜测出技术细节之后,我们也可以分析下之后会如何发展:
首先V社有可能会修复这个bug,修复的方法很简单,只要把图片尺寸的判断放到服务器上即可,但是考虑到V社一贯的做事风格,也有可能在很长时间内都不会修复
如果V社修复了这个bug,对于修复前已经上传的图片,考虑到图片数量很多,处理需要时间,V社不一定会处理已经上传过的图片,所以在阅读了帖子顶端的警告之后,如果你希望展示超长图片的话,可以尽快下手

 

参考:如何绕过高度限制在Steam艺术作品展柜中显示长图 …

 

呼~终于在二月最后一天水了一篇 :pen: 算是保持了月更(逃

点赞

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注