将布局和数据组合提取为图像

Question

一点背景：我目前正在为Discord开发一个机器人，专为“流亡之路”的玩家量身定制。该机器人计划具备的功能之一是从非官方维基中获取项目数据。

问题：在this sub-page上，您可以在右侧看到一些文字和“图片”（下图，对于那些不能或不能的人）想要访问此页面）。 此图片是我最终想要的结果。

遗憾的是，这并不像最初看起来那么容易，因为图像 - 如标题中所述 - 实际上并不是图像，而是边界和数据的组合，这使得提取更加困难。

这是一个例子，取自上面提到的子页面的html代码。这格式很差，但它只是给你一个粗略的概述，因为这不是一个“Gimme codez”类型的问题。

<div id="mw-content-text" lang="en" dir="ltr" class="mw-content-ltr">
<p><span class="infobox-page-container">
<span class="item-box -unique">
<span class="header -double">Shavronne's Wrappings
<br />Occultist's Vestment</span><span class="item-stats">
<span class="group"><em class="tc -default">Energy Shield: 
<em class="tc -value"><em class="tc -mod">(336 to 420)</em></em></em 
</span><span class="group"><em class="tc -default">Requires Level <em class="tc -value">62</em>,
<em class="tc -value"><em class="tc -value">180</em></em> Int</em>
</span><span class="group -textwrap tc -mod">3% reduced Movement Speed (Hidden)
<br />(3-10)% increased <a href="/Spell_Damage" title="Spell Damage" class="mw-redirect">
Spell Damage</a></span><span class="group -textwrap tc -mod">
(140-200)% increased <a href="/Energy_Shield" title="Energy Shield" 
class="mw-redirect">Energy Shield</a><br />
10% faster start of <a href="/Energy_Shield" title="Energy Shield" 
class="mw-redirect">Energy Shield</a> Recharge<br />+(30-40)% to 
<a href="/Lightning_Resistance" title="Lightning Resistance" class="mw-redirect">
Lightning Resistance</a><br />Reflects 1 to 250 <a 
href="/Lightning_Damage" title="Lightning Damage" class="mw-redirect">
Lightning Damage</a> to Melee Attackers<br />
<a href="/Chaos_Damage" title="Chaos Damage" class="mw-redirect">
Chaos Damage</a> does not bypass <a href="/Energy_Shield" 
title="Energy Shield" class="mw-redirect">Energy Shield</a></span>
<span class="group -textwrap tc -flavour">Shavronne's apparel became
ever more extravagant<br />as her body and soul became ever more 
corrupted.</span></span><a 
href="/File:Shavronne%27s_Wrappings_inventory_icon.png" 
class="image"><img alt="Shavronne&#39;s Wrappings inventory icon.png" 
src="https://hydra-media.cursecdn.com/pathofexile.gamepedia.com
/6/62/Shavronne%27s_Wrappings_inventory_icon.png?version=962a897e10c0d4824545926c2249b5d4" 
width="156" height="234" /></a></span></span>

到目前为止我尝试了什么：没什么，真的。我尝试通过某种方式从网站＆amp;编程方式获取此图像。然后切出想要的图像，但我找不到找到那个位置的方法。

问题：将这些数据作为图像的可行方法是什么？