is there an addon to rip content protected images? Topic is solved

[joshex]

so, content protected images are URL-less, they are seemingly loaded to memory or in some display program written in webgl etc. essentially even when searching through source code the image url is not available, but they display just fine.

screen-shotting them works, so they are available in local memory, but right-clicking them fails (the browser assumes you are right-clicking the background image).

I've tried extensions on multiple browsers, including palemoon and none of them can catch these hidden images. is there an addon I'm not aware of that can rip these images?

[Moonchild]

I wonder what attempt they are trying this time around. Do you have an example? URL to such a protected image site?

[therube]

(Maybe a Blob?)

[BenFenner]

Would love an example...

I wonder what a simple File → Save Page As… would produce.

[joshex]

Would love an example...

I wonder what a simple File → Save Page As… would produce.

it produces only certain nonprotected images with the html for that page.

I wonder what attempt they are trying this time around. Do you have an example? URL to such a protected image site?

I wish I could, but the only reference I have is from an adult game... I assume that's not suitable for linking in this forum space.

(Maybe a Blob?)

I'll look into source/inspector and see what is supposed to contain the image.
as far as I can tell the image is either in a classed div loaded by ::before ::after
or it's in a <canvas> which is filled by webGL and pixiJS

from the console logs I see deprecation warnings for pixiJS 6.5.9 listed as webGL 2.
"PixiJS 6.5.9 - WebGL 2 - http://www.pixijs.com/"

I also see several errors regarding image creation from buffer.

Error: WebGL: texImage2D: Conversion requires pixel reformatting.
6691.875a78e0.chunk.js:2:730307
[mobx.array] Attempt to read an array index (0) that is out of bounds (0). Please check length first. Out of bound indices will not be tracked by MobX

so, what they are doing is using a webGL texture channel and loading the image's pixel data (bitmap) directly to said texture thereby it's stored as a webGL texture not an image.
they are using javascript to accomplish it, but obviously they are using non-vanilla javascript, adding in modules like pixijs.

the javascripts themselves are access denied, something checks what tries to load them, and if it's not a specific script at a specific url, then it serves access denied. I could maybe get around this by downloading said script url with down them all or something, but making heads or tails of the content might be tough as the image data is probably scrambled via a google isogram.

[andyprough]

Would love an example...

I wonder what a simple File → Save Page As… would produce.

I think Google Arts does this, like this painting of Napoleon: https://artsandculture.google.com/asset ... _mSi8tlbXw

[BenFenner]

That one is split up into six 512×512 sections and reassembled into one image.

The forum does not like to auto-link a URL with the blob: prefix, so you'll have to copy/paste:

Code: Select all

blob:https://artsandculture.google.com/01774401-7951-4b43-af0f-604b9e824f2b
blob:https://artsandculture.google.com/742326d9-480e-44f8-8a6e-d2b9fbfbcc91
blob:https://artsandculture.google.com/8e9261da-be3b-42ad-ac75-8e6e52d0c716
blob:https://artsandculture.google.com/01cf0e90-ace4-4766-9186-fad11b2f8ccf
blob:https://artsandculture.google.com/ab845910-daf6-4af0-9833-16c3d305bfdd
blob:https://artsandculture.google.com/895c5238-8b98-4e93-8247-859a8f8c2ae8

Edit: Never mind, the hashes seem to rotate...

[Kris_88]

https://www.w3schools.com/graphics/canvas_images.asp

Pale Moon saves canvas contents to a file without any problems. "Save image as..." is available in the context menu. It's possible that in the case described by the OP, the image (img or canvas) is obscured by some transparent element, causing the browser to see the overlying element rather than the actual image source.

[Moonchild]

I wish I could, but the only reference I have is from an adult game... I assume that's not suitable for linking in this forum space.

It's fine, just provide a NSFW/adult content warning with the link. We're all of sufficient age here to understand and nobody is forced to go there or view it. Just don't post any adult material directly.

[BenFenner]

It's possible that in the case described by the OP, the image (img or canvas) is obscured by some transparent element

Yes, very common of course, but easy enough to get around. The more annoying ones are where JavaScript intercepts the right click. And Pale Moon causes a page refresh when disabling JavaScript, which often prevents the image from assembling properly...

Always a fun time.

A screenshot is often the ultimate solution, but of course the OP is looking for something else.

[Moonchild]

The more annoying ones are where JavaScript intercepts the right click.

You can disable that. Set dom.event.contextmenu.enabled to false.

[moonbat]

Set dom.event.contextmenu.enabled to false.

A bit of self promo
PermissionsPlus (addons site link in my signature) will let you turn it off on a per site basis rather than globally.

[therube]

On the https://artsandculture.google.com/ link, if you disable JavaScript, you'll get a (far lessor quality) .jpg (that you can save, directly).

If you disable styles; View | Page Style - No Style, you can more easily see the "blobs".

Developer Tools, Options, Toolbox Buttons, if you enable 'Take a screenshot of the entire page', that will create a decent quality image, but not of the entire page (as it says), but only of the current view.


Bookmarklets (at least the ones I've looked at), & window.oncontextmenu = null;, do not seem to help any.

[joshex]

I wish I could, but the only reference I have is from an adult game... I assume that's not suitable for linking in this forum space.

It's fine, just provide a NSFW/adult content warning with the link. We're all of sufficient age here to understand and nobody is forced to go there or view it. Just don't post any adult material directly.

in that case

NSFW warning:
bootyheroes.com I think most are canvas images loaded by code from binary data hosted on a server which only sends them if the user is logged on and has unlocked them. so controlled distribution.

the content is hosted on a server called "dataweb global" at 45.133.44.0 through 45.133.44.255
some of it is hosted on googargle, but just the game engine, not the image content (that I'm aware of).

[Moonchild]

I've had a quick look and I don't see any issues. There are bigger still images that you can just grab with right-click context menu. The animated ones ("cutscenes") are canvas and you can snap those as stills as well, but you'll have to either go through the devtools to "screenshot node" on the canvas element inside "pixi-component", or just make screenshots in your OS. Of course you cannot capture the animation.
I did not see any "content protected images" at all, anywhere.

[tellu-white]

On the https://artsandculture.google.com/ link, if you disable JavaScript, you'll get a (far lessor quality) .jpg (that you can save, directly).

If you disable styles; View | Page Style - No Style, you can more easily see the "blobs".

Developer Tools, Options, Toolbox Buttons, if you enable 'Take a screenshot of the entire page', that will create a decent quality image, but not of the entire page (as it says), but only of the current view.


Bookmarklets (at least the ones I've looked at), & window.oncontextmenu = null;, do not seem to help any.

The image generated by combining "blob" URLs can be saved even at maximum resolution. To save the image found on the page with the URL https://artsandculture.google.com/asset/napoleon-crossing-the-alps-paul-delaroche/cwF8_mSi8tlbXw I created a Custom Button.

Updated Code: bugfix:

Code: Select all

/* Initialization Code */

/* 	HELP

	1. Ctrl + Click on Button = Save the parameters of the partial image tag with "blob" URL to a variable, after maximizing the image.
	
								IMPORTANT: This step must be repeated for each new partial image obtained by scrolling the previous partial image, 
								until every portion of the full image is displayed
								( see the screenshots below, which show the first and last partial images parameters being saved ).

	2. Alt + Click on Button  = Save partial images in "base64" format to an array ( converted from the "blobs" retrieved with XMLHttpRequest ),
								remove duplicates and sort them in the correct order, then displays the mix of partial images in a new tab.
								This mix of partial images can be saved to disk as a single file containing the entire image
								( using an add-on that takes a screenshot of the entire page ).

	3. Ctrl + Shift on Button = Reset the variables used in the code before running this Custom Button to capture another image that uses "blob" URLs.
	
	IMPORTANT: There is a variable in the code ( var blob_image_width = 512; ) whose value ( 512px ) I took from the HTML code of the page
	https://artsandculture.google.com/asset/napoleon-crossing-the-alps-paul-delaroche/cwF8_mSi8tlbXw AFTER I maximized the size of the partial image ( 100% ).
	This value must be adjusted on a case-by-case basis.
*/

var prompts__for_save_blob_images = Components.classes["@mozilla.org/embedcomp/prompt-service;1"].getService(Components.interfaces.nsIPromptService);

var blob_image_width = 512;
var arr_blob_images_parameters = [];
var arr_blob_Images_in_base64_Format = [];

var get_unique_elements_from_array__for_save_blob_images = arr => {
    var arrStr = arr.map(item => JSON.stringify(item));	
    return [...new Set(arrStr)].map(item => JSON.parse(item))
}

function get_transform_translate3d_values(el){
	var values = el.style.transform.split(/\w+\(|\);?/);
	
	if(!values[1] || !values[1].length){
		return [];
	}
	
	return values[1].split(/,\s?/g);
}

function get_all_blob_image_objects_and_URLs_from_page(){
	var arr_images = content.document.querySelectorAll("img[src*='blob']");

	for(var i=0; i<arr_images.length; i++){
		var image = arr_images[i];
		
		if(image.width){
			if(image.width == blob_image_width){
				if(image.src){
					var img_URL = image.src;
					
					// var img_width = blob_image_width;
					var img_height;
					
					if(image.height){
						img_height = image.height;
						
					} else{
						img_height = blob_image_width;
					}
					
					var int_tx;
					var int_ty;
					
					if(image.style.transform.includes("translate3d")){
						var arr_translate3d_values = get_transform_translate3d_values(image);

						if(!arr_translate3d_values.length == 0){
							var regEx = /(-*[\d\.]*)/;	
							
							if(arr_translate3d_values[0]){
								var str_tx = arr_translate3d_values[0].match(regEx);

								if(str_tx){
									int_tx = parseInt(str_tx);
								}
							}

							if(arr_translate3d_values[1]){
								var str_ty = arr_translate3d_values[1].match(regEx);

								if(str_ty){
									int_ty = parseInt(str_ty);
								}
							}
						}
						
						var arr_temp = [int_ty, int_tx, img_height, img_URL];
						arr_blob_images_parameters.push(arr_temp);
						
					} else{
						int_tx = 0;
						int_ty = 0;
						
						var arr_temp = [int_ty, int_tx, img_height, img_URL];
						arr_blob_images_parameters.push(arr_temp);
					}
				}
				
				if(i == arr_images.length - 1){
					prompts__for_save_blob_images.alert(null, 'Save Partial Images Parameters to Array', 'Saving Partial Image Parameters to Array is Complete');
				}
			}
		}
	}
}

function get_image_in_blob_format_with_XMLHttpRequest(img_URL) {
	var xhr = new XMLHttpRequest();

	xhr.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			var contentType;
			var img_blob;
			
			get_response();

			async function get_response() {
				for (var i = 0; i < 1; i++) {
					contentType = xhr.getResponseHeader('Content-Type');
					img_blob = xhr.response;
					
					if(img_blob){
						get_base64_image_from_image_blob_format_and_save_base64_to_array(img_blob, contentType);
						
						break;
						
					} else{
						await new Promise(resolve => setTimeout(resolve, 2000));
					}
				}
			}
		}
	};

	xhr.open("GET", img_URL, true);
	xhr.responseType = "blob";
	xhr.send();
}

function get_base64_image_from_image_blob_format_and_save_base64_to_array(img_blob, contentType) {
	try{
		var blobToBase64 = function(blob, cb) {
			var reader = new FileReader();
			
			reader.onload = function() {
				var dataUrl = reader.result;
				var base64 = dataUrl.split(',')[1];
				cb(base64);
			}
			
			reader.readAsDataURL(blob);
		};
		
		blobToBase64(img_blob, function(base64) {
			var base64_Image = "data:" + contentType + ";base64," + base64;
			
			arr_blob_Images_in_base64_Format.push(base64_Image);
		});
		
	} catch(err){
		// alert(err.message);
	}
}

this.buttonClick___get_the_image_generated_with_blob_URLs_and_display_it_in_a_new_tab = function(event){
	if(event.button == 0 && event.ctrlKey && !event.altKey && !event.shiftKey){
		get_all_blob_image_objects_and_URLs_from_page();
	}
	
	if(event.button == 0 && event.altKey && !event.ctrlKey && !event.shiftKey){
		var arr_blob_images_parameters__unique_elements = get_unique_elements_from_array__for_save_blob_images(arr_blob_images_parameters);

		var arr_blob_images_parameters__unique_elements__sorted = arr_blob_images_parameters__unique_elements.sort( function (a,b) {
			if (a[0] > b[0]) return  1;
			if (a[0] < b[0]) return -1;
			if (a[1] > b[1]) return  1;
			if (a[1] < b[1]) return -1;
			
			return 0;
		});
		
		var previous_int_ty = arr_blob_images_parameters__unique_elements__sorted[0][0];
		var number_of_rows = 1;

		for(var i=0; i<arr_blob_images_parameters__unique_elements__sorted.length; i++){
			var arr_image_parameters = arr_blob_images_parameters__unique_elements__sorted[i];
			var current_int_ty = arr_image_parameters[0];
			
			if(current_int_ty != previous_int_ty){
				number_of_rows = number_of_rows + 1;
			}
			
			var img_URL = arr_image_parameters[3];
					
			get_image_in_blob_format_with_XMLHttpRequest(img_URL);
			
			previous_int_ty = current_int_ty;
			
			if(i == arr_blob_images_parameters__unique_elements__sorted.length - 1){
				prompts__for_save_blob_images.alert(null, 'Save Partial Images to Array in "base64" Format', 'Saving Partial Images to Array in "base64" Format is Complete');

				var html = '<html><head><meta charset="utf-8"></head><body></body></html>';
				var page_URL = "data:text/html," + encodeURIComponent(html);

				var final_position = gBrowser.tabContainer.selectedIndex + 1;
				var new_tab = gBrowser.addTab(page_URL);
				gBrowser.moveTabTo(new_tab, final_position);
				gBrowser.selectedTab = new_tab;

				setTimeout(function() {
					try{
						var body = content.document.getElementsByTagName("body")[0];

						for(var j=0; j<arr_blob_Images_in_base64_Format.length; j++){
							var img_tag = content.document.createElement("img");
							img_tag.src = arr_blob_Images_in_base64_Format[j];
							img_tag.style.width = blob_image_width;
							body.appendChild(img_tag);
						}
						
						var number_of_images_per_row = arr_blob_Images_in_base64_Format.length / number_of_rows;
						
						var page_width = number_of_images_per_row * blob_image_width;
						
						setTimeout(function() {
							var final_body = content.document.getElementsByTagName("body")[0];
							final_body.style.cssText = "width: 2048px; margin: 0px; padding: 0px;";
							
						}, 100);
						
					} catch(err){
						// alert(err.message);
					}
					
				}, 1000);
			}
		}
	}
	
	if(event.button == 0 && event.shiftKey && !event.ctrlKey && !event.altKey){
		arr_blob_Images_in_base64_Format.length = 0;
		arr_blob_images_parameters.length = 0;
		
		prompts__for_save_blob_images.alert(null, 'Reset Arrays', 'The Reset of Arrays used in the last session is Complete');
	}
}

this.setAttribute("onclick", "this.buttonClick___get_the_image_generated_with_blob_URLs_and_display_it_in_a_new_tab(event)");

this.name = '\n Capture at Maximum Resolution the Image generated from the mix of "blob" URLs \n\n • Display the Resulting Image in a new TAB \n ';

this.image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACDklEQVQ4jYWRMWgTURjHP0iGgEugFRwEMzgILknve6ggePceJQ5qknfdOmRwcLODxSVDIiZ26JAhTW88sZh7g1IxoNLe5pDB0cHxBpH27oIBkxjICc/hcimGa/zgWz7e//f//u8DWKisWUyjpRuKxX0UPEBL/4KCP1p8F1tK5/6qIriDQpeLvSZKlf8CUPDmTHBCXpc2c68eIFq6Ec54oJj6teUbWLqDQpdKp1T+d857M/DyLbJmMbP3eJ39WMeWy0jP18gdAADscAuFLhVL310K8ChWPIqBx4j0GJGn2o1C7i2/ogh9iEKXRJQ2zxX7THkSCV2Gnz1Gtjba9wxF8EHozp2MqabindXrl1xKJh4j0qPKzjy74Icz8besWcyc6+7O3F1Kvt59dspoY1yljXH1lmG0UGwU1JqaXJrdZ3jgMSJ9SnbVmpPS6qOPtDGSWn000RqjPACArEHyj50oR/2rC6tnERha4frkOQBAHGRwCOnATsqop0eQPYtAsRp+HulFs0WI+bLSnIknUzth/v4Al+eA7+raVY+S8HyqUo6D5F/0Ze9NXk7thBV/CYrN+RkpGn0txwbtdHbw6eLW0713MoJst94/jAU4aiblUnIQQTxG5Hh/RQZ2Uo6PLsjtVjdY/NjY6mtY8BkeuwyH4/ZKMLUTTnCc3OlZNzO0PupqjeFAqw9P1PrP2wAAfwEpM0QpeBBBmQAAAABJRU5ErkJggg==";

Note: The code above must be copied into the "Initialization Code" TAB in Custom Button ( https://forum.palemoon.org/viewtopic.php?f=71&t=32626 ), and Pale Moon must be restarted before using this button.

IMPORTANT: There is a variable in the code ( var blob_image_width = 512; ) whose value ( 512px ) I took from the HTML code of the page https://artsandculture.google.com/asset ... _mSi8tlbXw AFTER I maximized the size of the partial image ( 100% ). This value must be adjusted on a case-by-case basis.

HELP:

1. Ctrl + Click on Button = Save the parameters of the partial image tag with "blob" URL to a variable, after maximizing the image.

IMPORTANT: This step must be repeated for each new partial image obtained by scrolling the previous partial image, until every portion of the full image is displayed ( see the screenshots below, which show the first and last partial images parameters being saved ).

2. Alt + Click on Button = Save partial images in "base64" format to an array ( converted from the "blobs" retrieved with XMLHttpRequest ), remove duplicates and sort them in the correct order, then displays the mix of partial images in a new tab. This mix of partial images can be saved to disk as a single file containing the entire image ( using an add-on that takes a screenshot of the entire page ).

3. Ctrl + Shift on Button = Reset the variables used in the code before running this Custom Button to capture another image that uses "blob" URLs.

Screenshots:

01.png

02.png

03.png

04.png

05.png

06.png

07.png

08.png

09.png

[joshex]

I've had a quick look and I don't see any issues. There are bigger still images that you can just grab with right-click context menu. The animated ones ("cutscenes") are canvas and you can snap those as stills as well, but you'll have to either go through the devtools to "screenshot node" on the canvas element inside "pixi-component", or just make screenshots in your OS. Of course you cannot capture the animation.
I did not see any "content protected images" at all, anywhere.

the character fullsize images don't provide a rightclick save image as option. I even tried removing the overlay, still no right click save as.

not sure how you're grabbing them.

edit:
I had to remove several overlays, but it's a blob on a canvas, the png downloads as blank. ex: blob:https://bootyheroes.com/1bae7298-0522-4 ... a717592992

[gabrgv]

This site lets you download images from Google Arts & Culture: https://dezoomify.ophir.dev/

[adoxa]

the character fullsize images don't provide a rightclick save image as option. I even tried removing the overlay, still no right click save as.

Huh, I just evolved one and it looks like the images come from the server, not stored in the js like their other games. You can find your own images by either viewing the page source and searching for webp, or opening the console and looking at userData.player.heroes. Should be able to give you a script to copy the URLs (or maybe create a basic page), if you'd like.

[joshex]

the character fullsize images don't provide a rightclick save image as option. I even tried removing the overlay, still no right click save as.

Huh, I just evolved one and it looks like the images come from the server, not stored in the js like their other games. You can find your own images by either viewing the page source and searching for webp, or opening the console and looking at userData.player.heroes. Should be able to give you a script to copy the URLs (or maybe create a basic page), if you'd like.

I was able to create a working link, however, while valid it produces ServerError every time in a download manager. essentially loading it from the server aint gonna happen, pulling it from active memory is the only way.[quote=tellu-white


EDIT: LOL I'm stupid I had the image server blocked in my firewall when I was getting "server error".

so I am now able to get backgroundless images of any character I've completed. nice.

so in order to do this the url will look like https://cdn.bootyheroes.com/static/asse ... 78@1x.webp (NSFW) in example

essentially you click the asset in the list made by userData.player.heroes in console, then expand images and select the corresponding url and put cdn.bootyheroes.com in front of it. ripping success.