Question

我知道所有这些jquery库都是这样做的，但它们都只是模糊背景图像。

我试图在浏览器不支持css3过滤器的情况下创建备份效果。

我的想法是在图像周围注入svg标签并在那里应用和svg效果。这会有用吗？

我很乐意听到一些建议。

我尝试了什么：

<svg>
<filter id="blur">
  <feGaussianBlur stdDeviation="8"/>
</filter>
  <image src:href="images/football.png" width="200" height="158" filter="url(#blur)" />
</svg>

Answer 1

首先，我认为你的image元素有误。属性src:href应为xlink:href。

以下是如何模糊网页中包含的所有<img>的有趣示例。使用Firefox Scratchpad（Shift-F4）在任何网页上试用。

function svg(tag, attribs, children) {
    var namespace = "http://www.w3.org/2000/svg";
    var e = document.createElementNS(namespace, tag);
    if (typeof attribs === 'undefined') attribs = {};
    var k;
    for (k in attribs) {
        if (k.substr(0, 6) == 'xlink:') {
            e.setAttributeNS("http://www.w3.org/1999/xlink", k.substr(6), attribs[k]);
        } else {
            e.setAttribute(k, attribs[k]);
        }
    }
    if (Array.isArray(children)) {
        children.forEach(
            function(child) {
                e.appendChild(child);
            }
        );
    }
    return e;
}

var images = document.querySelectorAll("img");
for (var i = 0 ; i < images.length ; i++) {
    var img = images[i];
    var dim = img.getBoundingClientRect();
    var ele = svg(
        "svg",
        {width: dim.width, height: dim.height},
        [
            svg(
                "defs", {},
                [
                    svg(
                        "filter", {id: "BLUR"},
                        [
                            svg("feGaussianBlur", {stdDeviation: 3})
                        ]
                    )
                ]
            ),
            svg(
                "image", {
                    filter: "url(#BLUR)",
                    x: 0,
                    y: 0,
                    width: dim.width,
                    height: dim.height,
                    "xlink:href": img.src
                }
            )
        ]
    );
    img.parentNode.replaceChild(ele, img);
    console.log(dim);
    console.log(ele.outerHTML);
}

用javascript或画布简单模糊图像图像？

1 个答案: