自定义接收器中专辑艺术图像的奇怪渲染答案

【问题标题】：Weird rendering of the album-art-image in custom receiver自定义接收器中专辑艺术图像的奇怪渲染
【发布时间】：2019-09-17 13:55:07
【问题描述】：

我开发了一个自定义接收器，效果很好，但是专辑封面图像上的图形渲染看起来很奇怪。我还尝试了“样式化媒体接收器”，以确保我没有搞砸任何事情 - 结果相同。

其他人看过这个（查看下面的图片）？频道标志是透明的 PNG。

Screenshot of bug

【问题讨论】：

我也有同样的问题。如果专辑封面包含透明层，这似乎会发生。

标签： google-cast

【解决方案1】：

let shadowRootElement = document.querySelector( 'cast-media-player' ).shadowRoot;
let style = document.createElement( 'style' );
style.innerHTML = '#castMetadataImage { background-image: none !important; }';
shadowRootElement.appendChild( style )

在播放器启动后立即运行它，它应该可以解决问题。

【讨论】：

【解决方案2】：

请分享您的代码。没有任何代码审查是很难知道的。您是否按照https://developers.google.com/cast/docs/caf_receiver/customize_ui 上的官方指南进行接收器应用程序？您还需要检查您的发件人应用程序。

【讨论】：

我使用了来自 codelabs (codelabs.developers.google.com/codelabs/cast-receiver) 的示例。使用透明元数据图像时似乎会出现问题。图像呈现在顶部的更大版本。
这也是我的结论——透明图像会导致渲染失败并显示“双重”图像。
顺便说一句，当整个 CAF 框架由 Google 托管和维护时，很难共享任何代码。如果有帮助，我可以分享 PNG，但我对此表示怀疑。

【解决方案3】：

这个问题似乎与 cssText 属性有关 - 删除它，修复呈现问题：

var fixDoubleLogoBug = function(){
    try {
        document.querySelector("#player")
        .shadowRoot
        .querySelector("#castMetadataImage").style.cssText = "";
    }catch(e){
        console.warn("Could not remove logo");
    }
}

【讨论】：