Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Steam background cropper. Crops showcase and avatar images from background. Works on background image url.
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)})();
// 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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment