Steam background cropper. Crops showcase and avatar images from background. Works on background image url.

minified version for bookmarklet

javascript:(function(){function%20a(a){var%20b=document.createElement("script");b.onload=function(){++d},b.src=a,document.body.appendChild(b)}function%20b(){2==d&&(window.clearInterval(e),c())}function%20c(){var%20a,b,c=document.createElement("canvas"),d=new%20JSZip,e=new%20Image,f=c.getContext("2d"),g=function(a,b,d,g){c.width=d,c.height=g,f.drawImage(e,a,b,d,g,0,0,d,g);var%20h=c.toDataURL("image/png");return%20h.substr(h.indexOf(",")+1)},h=function(a,b,c,e,f){d.file(a,g(b,c,e,f),{base64:!0})},i=function(){d.generateAsync({type:"blob"}).then(function(a){saveAs(a,"Steam-cropped-background.zip")})},j=function(){h(l+"avatar.png",b-461,34,164,164),h(l+"artwork_big.png",b-452,271,506,a-271),h(l+"artwork_small.png",b+62,271,100,a-271),i()},k=window.location.pathname.split("/"),l=k.length>1?k[k.length-2]+"_":"";e.onload=function(){b=Math.ceil(this.naturalWidth/2),a=this.naturalHeight,j()},e.src=document.location.href}window.location.host.indexOf("akamaihd.net")>-1&&(alert("try%20again%20now"),window.location="http://cdn.akamai.steamstatic.com"+window.location.pathname.replace("economy/profilebackground","steamcommunity/public/images")),/steamcommunity[.]com[/](id|profiles)[/][^/]+/.test(window.location.href)&&(alert("Redirecting%20to%20background%20url,%20try%20again%20now."),window.location=document.querySelector("div.profile_page.has_profile_background").style.backgroundImage.match(/http[^"',)]+/i)[0]),a("https://cdn.rawgit.com/Stuk/jszip/master/dist/jszip.min.js"),a("https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js");var%20d=0,e=window.setInterval(b,50)})();

steam_background_cropper.js

// load external JS
function loadJS(url) {
    var scriptTag = document.createElement('script');
    scriptTag.onload = function() {
        ++externalScriptsLoaded;
    };
    scriptTag.src = url;
    document.body.appendChild(scriptTag);
};

// check if both of external scripts are loaded
function checkExternalScripts() {
    if(externalScriptsLoaded == 2) {
        window.clearInterval(checkExternalScriptsInterval);
        startCropper();
    }
}

// main part of script
function startCropper() {
    var height, halfWidth, canvas = document.createElement("canvas"),
        zip = new JSZip(), bg = new Image(), ctx = canvas.getContext("2d");
    // crop image using canvas
    var cropImage = function(x, y, width, height) {
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(bg, x, y, width, height, 0, 0, width, height);
        var dataurl = canvas.toDataURL("image/png");
        return dataurl.substr(dataurl.indexOf(',')+1);
    }
    // add file to zip
    var add = function(name, x, y, width, height) {
        zip.file(name, cropImage(x, y, width, height), {base64: true});
    }
    // save zip
    var save = function() {
        zip.generateAsync({type:"blob"})
        .then(function (blob) {
            saveAs(blob, "Steam-cropped-background.zip");
        });
    }
    
    var download = function() {
        add(prefix + "avatar.png", halfWidth - 461, 34, 164, 164);
        add(prefix + "artwork_big.png", halfWidth - 452, 271, 506, height - 271);
        add(prefix + "artwork_small.png", halfWidth + 62, 271, 100, height - 271);
        save();
    }
    var pathParts = window.location.pathname.split("/");
    var prefix = (pathParts.length>1 ? pathParts[pathParts.length-2]+"_" : "");
    bg.onload = function() {
        // backgrounds with odd width must be rounded up
        halfWidth = Math.ceil(this.naturalWidth / 2);
        height = this.naturalHeight;
        download();
    }
    bg.src = document.location.href;
}

if(window.location.host.indexOf("akamaihd.net") > -1) {
    alert("try again now");
    window.location = "http://cdn.akamai.steamstatic.com" + window.location.pathname.replace("economy/profilebackground", "steamcommunity/public/images");
}
if(/steamcommunity[.]com[/](id|profiles)[/][^/]+/.test(window.location.href)) {
    // [.] and [/] in regexp, because Steam changes \ to / in [code] tag...
    alert("Redirecting to background url, try again now.");
    window.location = document.querySelector("div.profile_page.has_profile_background").style.backgroundImage.match(/http[^"',)]+/i)[0];
}

// loadJS("https://raw.githubusercontent.com/Stuk/jszip/master/dist/jszip.min.js");
// loadJS("https://raw.githubusercontent.com/eligrey/FileSaver.js/master/FileSaver.min.js");
// rawgit.com provides proper mime-type (needed in some browsers)
loadJS("https://cdn.rawgit.com/Stuk/jszip/master/dist/jszip.min.js");
loadJS("https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js");

var externalScriptsLoaded = 0;

var checkExternalScriptsInterval = window.setInterval(checkExternalScripts, 50);