Dev hack: Viewing tricky-to-view images in the browser

Have you ever been in a situation where you come across an image on the web, you choose to open it in a new tab to look at it in detail, but you don't see anything? This is probably because the image is black with transparent parts. Take an image like this:

If you are on Chrome (not tested in other browsers), and you open the image in a new tab, you will not see much of anything because the image is black with a transparent background. This can become a bit frustrating when you need to zoom in on these images.

Luckily, now there's a solution! 😁 Open up your browser console on an image webpage, and enter the following snippet:

function c(o){document.body.style.background="rgb("+o.rgb.map(Math.round).join(",")+")"}s=document.createElement("script"),s.src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js",document.body.appendChild(s),document.body.innerHTML+="<input class=\"jscolor {onFineChange:'c(this)'}\"style='position:absolute;right:0;top:0'value='0e0e0e'type='search'autocomplete='off'>";

Using this, you will get a handy-dandy color picker in the top-right of your screen that will live-update the background color of the page as you change it in the picker. This is to make it easier to view the images that blend in. Let's pull apart this program:

• function c(o){document.body.style.background="rgb("+o.rgb.map(Math.round).join(",")+")"} - A function to set the webpage background based on a jscolor object (more on that later).

• s=document.createElement("script") - Create a new <script> element.

• s.src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js" - Set the src of the <script> element to the library we want to load.

• document.body.appendChild(s) - Append the <script> element to the document, loading the resource.

• document.body.innerHTML+="<input class=\"jscolor {onFineChange:'c(this)'}\"style='position:absolute;right:0;top:0'value='0e0e0e'type='search'autocomplete='off'> - Add a custom jscolor input element to create the color picker. Set it up to call c() every time the color updates.

As seen in the verbose version, the snippet uses the library jscolor for the color picker.

I hope this small snippet helps you!