Logo

dev-resources.site

for different kinds of informations.

Base 64

Published at
3/29/2024
Categories
codepen
images
base64
create
Author
sudo-self
Categories
4 categories in total
codepen
open
images
open
base64
open
create
open
Author
9 person written this
sudo-self
open
Base 64

Upload an image
base64 encode
download as a .txt
download as a .css (background use)
copy string to clipboard

Buttons

//copy to clipboard

function copyToClipboard() {
  const textarea = document.getElementById("encodedCode");
  textarea.select();
  document.execCommand("copy");
  alert("Code copied to clipboard!");
}

//download txt

function downloadImage() {
  const base64EncodedImage = document.getElementById("encodedCode").value;
  const blob = new Blob([base64EncodedImage], { type: "text/plain" });

  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "sudo-self.txt"; //file name here//
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  alert("Text file downloaded!");
}

//download css

function downloadCSS() {
  const base64EncodedImage = document.getElementById("encodedCode").value;
  const cssContent = `body {
        background-image: url("${base64EncodedImage}");
        background-repeat: no-repeat;
        background-size: 80%;
        background-attachment: fixed;
      }`;
  const blob = new Blob([cssContent], { type: "text/plain" });
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "sudo-self.css"; //file name here//
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  alert("CSS file downloaded!");
}

function displayImage(input) {
  var file = input.files[0];
  var imageType = /image.*/;

  if (file.type.match(imageType)) {
    var reader = new FileReader();

    reader.onload = function (e) {
      var img = new Image();
      img.src = reader.result;

      img.onload = function () {
        var width = this.width;
        var height = this.height;
        document.getElementById("thumbnail").src = this.src;
        document.getElementById("thumbnail").style.display = "inline";
        document.getElementById("resolution").innerText =
          width + " x " + height;
      };
    };

    reader.readAsDataURL(file);
  } else {
    alert("File format not supported!");
  }
}
Enter fullscreen mode Exit fullscreen mode
images Article's
30 articles in total
Favicon
Proxy de imΓ‘genes.
Favicon
Deploying Mancala with Minikube β€” A beginners guide
Favicon
Collect All Requested Images on a Website Using Puppeteer
Favicon
I’m Building a Website Builder Tool, and I Created a Simple Placeholder Image Service Along the Way
Favicon
Enhancing Data Collection Images AI Accuracy and Performance
Favicon
Dynamic watermarking on the JVM
Favicon
Understanding Dockerfile: The Blueprint of Docker Containers and Images
Favicon
A simple Image to text website built with Next.js
Favicon
Error while loading images in Oracle APEX application runtime
Favicon
Base 64
Favicon
Alpaca image generator website Built with ReactJS
Favicon
Use your own neural net to generate images
Favicon
How to calculate RGB values in Python
Favicon
More Fun with AI Generated Images
Favicon
Useful websites for stock images
Favicon
Optimizing Images for Enhanced Website Performance: A Free Tool for Your Website
Favicon
RuGiVi
Favicon
A Simple Approach to LCP Image Optimization with TwicPics Components
Favicon
Fix: Opencart cache images not generated
Favicon
Keeping your fonts in embedded SVG
Favicon
Upload the image with a preview using HTML, CSS & JavaScript
Favicon
Handling Image Uploads in Node with Multer and Cloudinary
Favicon
Before and after image slider in pure CSS
Favicon
Product Page Images Grid
Favicon
Convert images in Webp
Favicon
🎁 Collection of free illustrations for OpenGraph images
Favicon
Create High Quality Images And Videos With GenmoAI
Favicon
Instantly adds nice compression artifacts to your JPEG images
Favicon
React Image Pan And Zoom With Commenting
Favicon
Bring back the Twitter link preview

Featured ones: