A script to put on top of casper theme to have .g.svg ending images to be the background of a post

script.js

//Taken from https://stackoverflow.com/a/41042412
function colourIsLight(pixel) {
    // Counting the perceptive luminance
    // human eye favors green color... 
    pixel[3] = pixel[3]==undefined?255:pixel[3];
    var a = 1 - (0.299 * pixel[0] + 0.587 * pixel[1] + 0.114 * pixel[2]) / pixel[3];
    return (a < 0.5);
}

function getPropBgImage(e){
    return window.getComputedStyle(e, null).getPropertyValue("background-image") != "none"? window.getComputedStyle(e, null).getPropertyValue("background-image") : e.style["background-image"]!= ""?e.style["background-image"]:null ;
}

function getPropBgColor(e){
    return window.getComputedStyle(e, null).getPropertyValue("background-color").endsWith("0, 0, 0)") == false? window.getComputedStyle(e, null).getPropertyValue("background-color") : e.style["background-color"]!= ""?e.style["background-color"]:null ;
}

//Returns pixel[4] or null
function getBgColor (element){    
    
    if (imgSrc = getPropBgImage(element) != null){
        var img = document.createElement('img');
        img.width = element.width;
        img.height = element.height;
        img.src = imgSrc;
        
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        
        return canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,0,0)
        .getImageData(img.width/2, img.width/2, 1, 1).data;
        //Get the color at the center
        
    } else if ((bgColor = getPropBgColor(element)) != null){return  bgColor.substring(bgColor.indexOf("(")+1,bgColor.length-1).split(",") }
    else {
        //Element has no background
        var elemParent = element.parentElement;
        while (true){
            if (imgSrc = getPropBgImage(elemParent) != null) {
                //Get element position compared to the father
                fatherPos = elemParent.getBoundingClientRect();
                elementPosition = element.getBoundingClientRect();

                var img = document.createElement('img');
                img.width = element.width;
                img.height = element.height;
                img.src = imgSrc;
                
                var canvas = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;

                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, img.width, img.height)
                
                return ctx.getImageData(fatherPos.right - elementPosition.right, fatherPos.top - elementPosition.top, 1, 1).data;
            } else 
            if (getPropBgColor(elemParent) != null) {} else
            {
                elemParent = elemParent.parentElement;
                if (elemParent.nodeName == "body"){
                    //Abort, root of page reached
                    return
                }
            }
        }
    }
}

document.querySelectorAll("article").forEach(function(e){
	var imgSource = e.querySelector(".post-card-image").src;
	if (
        //Chech it's a gradient and it's the same origin
        imgSource.startsWith(window.location.origin) && 
            //it is a gradient                    that has been uploaded multiple times, 
            (imgSource.endsWith(".g.svg") || 
            //or, if it's a svg 
            imgSource.endsWith(".svg")
                //and the last-1 dot-splitted array cell stars with g- (uploaded uplitple time)
                && imgSource.split(".").slice(0,-1).pop().startsWith("g-") )) {
        //Remove the svg from being a separate image
        e.querySelector(".post-card-image").remove();
        //e.querySelector("a.post-card-image-link").remove();
        
        //Set the SVG to be the background of the article card
        e.querySelector(".post-card-content").style["background-image"] = "url('" + imgSource + "')";
        e.querySelector(".post-card-content").style["padding-top"] = "68%";
        e.querySelector(".post-card-content-link").style["color"] = colourIsLight(getBgColor(e))? "black":"white";

        var readigTime = e.querySelector(".reading-time");
        readigTime.style.color = colourIsLight(getBgColor(readigTime))? "black":"white";
        
        e.querySelector("a.post-card-image-link").remove();
        e.classList.remove("post-card-large");
	}
})