User:BlurredImages/vector.js

(function(document){ var replace = function(img)  {    var svgns = 'http://www.w3.org/2000/svg';    var xlink = 'http://www.w3.org/1999/xlink';    var imgid = img.src.replace(/[^a-zA-Z0-9]+/g, '');    var svg = document.createElementNS(svgns, "svg");    svg.setAttributeNS(null, "width", img.width);    svg.setAttributeNS(null, "height", img.height);    var filter = document.createElementNS(svgns, "filter");    filter.setAttributeNS(null, "filterUnits", "objectBoundingBox");    filter.setAttributeNS(null, "width", "120%");    filter.setAttributeNS(null, "height", "120%");    filter.setAttributeNS(null, "id", imgid);    var blur = document.createElementNS(svgns, "feGaussianBlur");    blur.setAttributeNS(null, "in", "SourceGraphic");    blur.setAttributeNS(null, "result", "blur");

// This might need to depend on image dimensions blur.setAttributeNS(null, "stdDeviation", "8"); filter.appendChild(blur); svg.appendChild(filter); var image = document.createElementNS(svgns, "image"); image.setAttributeNS(null, "width", img.width); image.setAttributeNS(null, "height", img.height); image.setAttributeNS(xlink, "xlink:href", img.src); image.setAttributeNS(null, "filter", "url(#" + imgid + ")"); image.setAttributeNS(null, "class", "blurred"); svg.appendChild(image); img.parentNode.insertBefore(svg, img); img.parentNode.removeChild(img); }; var style = document.createElement("style"); style.setAttribute("type", "text/css"); style.textContent = ".blurred:hover { filter: none }";

document.head.appendChild(style);

[].forEach.call(document.querySelectorAll(".image img"), function(img) { /*   if (img.nodeName.toLowerCase != "img")      return;    var view = img.ownerDocument.defaultView;    var computed = view.getComputedStyle(img, '');    if (computed.getPropertyValue('visibility') != 'hidden')      return;    replace(img);  }); })(document);