Question

以下是事实：

我管理了大量的Git存储库。
他们使用Travis CI进行构建。
我在http://status.scijava.org/建立了一个小网页，以跟踪组件列表。
其中一个表格列显示每个组件的相关Travis CI构建徽章。
我目前使用sorttable.js来使表格列易于排序。这有助于了解项目的当前状态。

如果我可以按Travis CI构建状态对Build列进行排序，那将是非常好的。不幸的是，构建状态仅从SELECT b.DogBreed,GROUP_CONCAT(n.DogName) FROM Breeds b LEFT JOIN `Names` n ON n.DogId=b.DogId GROUP BY n.DogId标记的图像内容加载，因此<img>在HTML本身中没有任何内容。

所以我问HTML和javascript专家！

如何通过Travis CI构建状态对此表进行排序？

一些软性要求：

该网站托管在GitHub页面上，我希望保持这种状态。
Travis服务器上的解决方案应该很简单。当然，我希望自己很好，并使用最少的API调用数量和强度。

Answer 1

这是适合我的过程。通过最小的适应性，此方案可用于通过javascript（例如<img>）在客户端对任何sorttable.js元素进行排序。

根据Andreas的建议（感谢Andreas！），我写了一些javascript，将每个<img>绘制到自己的画布上，然后通过canvas.toDataURL()提取base64数据。
我对toDataURL()的内容进行了哈希处理，以便为sorttable.js创建自定义排序键，并将其分配给包含sorttable_customkey的{{1}}属性。就我的目的而言，获取数据的前64个字符就足够了，但你可以为此编写任何你喜欢的哈希函数，具体取决于你的图像像素。
为避免错误<td>，我将每个Tainted canvases may not be exported <img>复制到新src并设置Image，如shady sherif所示在different SO post。

以下是我工作解决方案的JavaScript代码：

crossOrigin=anonymous

然后在HTML方面，将function imageData(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; // HACK: Avoid 'Tainted canvases may not be exported' error. // See: https://stackoverflow.com/a/27260385/1207769 var anonImg = new Image(); anonImg.setAttribute('crossOrigin', 'anonymous'); anonImg.src = img.src; canvas.getContext("2d").drawImage(anonImg, 0, 0); return canvas.toDataURL(); } function hashCode(s) { // NB: Using the first 64 characters is good enough here, and much faster. return s.substring(0, 64); } // See: https://stackoverflow.com/q/43686686/1207769 function makeBadgesSortable() { var tds = document.body.getElementsByClassName("badge"); for (var i=0; i<tds.length; i++) { var imgs = tds[i].getElementsByTagName("img"); if (imgs.length < 1) continue; tds[i].setAttribute("sorttable_customkey", hashCode(imageData(imgs[0]))); } }添加到包含Travis class="badge"徽章的表格中的每个<td>，并将<img>添加到onload="makeBadgesSortable()" } element。

如何按包含Travis CI徽章状态图像的列对HTML表进行排序？

1 个答案: