0

有什么方法可以从 #efefef 更改 sc-waveform 容器背景，而无需加载波形.js 库？我已经加载了足够多的库，并且 conainer bg 与我们的站点背景颜色冲突

4

2 回答 2

2

我遇到了同样的问题，之前也遇到过这个问题（使用 CSS3 或 JS 使用图案覆盖透明黑色剪影 PNG 的可见区域）。

这是您的波形示例：http: //jsfiddle.net/eLmmA/3/

$(function() {
    var canvas = document.createElement('canvas');
    canvas.width = 1800; // must match 
    canvas.height = 280; // must match 

    var canvas_context = canvas.getContext("2d");

    var img = new Image();
    img.onload = function(){
        var msk = new Image();
        msk.onload = function(){
            canvas_context.drawImage(img, 0, 0);
            canvas_context.globalCompositeOperation = "destination-in";
            canvas_context.drawImage(msk, 0, 0);
            canvas_context.globalCompositeOperation = "source-over";
        };

        msk.src = 'WAVEFORM_IMAGE.EXT';
    }
    img.src = 'OVERLAY_IMAGE.EXT';

    document.body.appendChild(canvas);
});
于 2015-01-04T19:59:27.240 回答
1

我想我明白你的意思。你想改变波形背景的颜色，波形周围的灰色部分：

典型波形

这里的问题是您从 SoundCloud API 获得的波形被表示为部分透明的 PNG 图像，其中波形本身是透明的，而它周围的镶边是灰色 ( #efefef) 颜色。

因此，除非您要用于波形自定义的库使用 HTML5 画布，否则您将无法使用更改该 chrome 的颜色（所以不，不可能使用 HTML5 Widget API 或 Custom Player API）。而且你必须使用waveform.js或类似的东西（或自己修改画布上的波形图像）。

您可以尝试使用最新的 CSS 过滤器（目前仅适用于 webkit）和 SVG 过滤器，可能还有一些适用于旧 IE 版本的 MS IE 过滤器，但我不确定您是否能够仅更改颜色。

于 2013-02-06T14:36:50.203 回答