Skip to content

Instantly share code, notes, and snippets.

@Hacksore
Last active May 4, 2025 15:00
Show Gist options
  • Save Hacksore/0abc4b48dce4e2c948abc66d73a6ff88 to your computer and use it in GitHub Desktop.
Save Hacksore/0abc4b48dce4e2c948abc66d73a6ff88 to your computer and use it in GitHub Desktop.
You can just put images in the devtools console

😂

console.image = function (url, size = 100) {
  var image = new Image();
  image.onload = function () {
    var style = [
      "font-size: 1px;",
      "padding: " +
        (this.height / 100) * size +
        "px " +
        (this.width / 100) * size +
        "px;",
      "background: url(" + url + ") no-repeat;",
      "background-size: contain;",
    ].join(" ");
    console.log("%c ", style);
  };
  image.src = url;
};

(async () => {
  // console.image(image, 100);
  let blob = await fetch(
    "https://upload.wikimedia.org/wikipedia/en/f/f7/RickRoll.png",
  ).then((r) => r.blob());

  let dataUrl = await new Promise((resolve) => {
    let reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });

  console.image(dataUrl, 100);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment