Turn Any Photo Into a Glasses Try-On Experience (No Frameworks Needed)

A lot of people use glasses. And a lot of people want to see themselves in glasses before they commit to wearing glasses.

But don't make it into a fun way that people can try and get people's reaction.

It will be a fun way to get used to glasses and eventually wearing one.

What's my idea?

I created some glasses designs in sprite sheets and uploaded them to a webpage (which I am going to share the code for) where you can try some glasses on your face (a photo uploaded of you or anyone you want) and see them on yourself.

What it does

There are 6 glass designs.
You upload your image and put the glasses on your face.
Finally, you can download the image.

The code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Glasses Try-On</title>

<style>
  body {
    font-family: Arial;
    text-align: center;
    background: #f5f5f5;
  }

  #container {
    position: relative;
    display: inline-block;
    margin-top: 20px;
  }

  #userImage {
    max-width: 90vw;
    max-height: 70vh;
    display: block;
  }

  #glasses {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 150px;
    z-index: 10;
    cursor: grab;
    touch-action: none;
  }

  .controls {
    margin-top: 15px;
  }

  button {
    margin: 5px;
    padding: 8px 12px;
    cursor: pointer;
  }

  input[type="range"] {
    width: 200px;
  }
</style>
</head>

<body>

<h2>👓 Glasses Try-On Tool</h2>

<input type="file" id="upload" accept="image/*">

<div id="container">
  <img id="userImage" src="">
  <img id="glasses" src="glasses1.png">
</div>

<div class="controls">
  <h3>Select Glasses</h3>
  <button onclick="changeGlasses('glasses1.png')">1</button>
  <button onclick="changeGlasses('glasses2.png')">2</button>
  <button onclick="changeGlasses('glasses3.png')">3</button>
  <button onclick="changeGlasses('glasses4.png')">4</button>
  <button onclick="changeGlasses('glasses5.png')">5</button>
  <button onclick="changeGlasses('glasses6.png')">6</button>

  <h3>Resize</h3>
  <input type="range" id="sizeSlider" min="50" max="400" value="150">

  <br><br>
  <button onclick="downloadImage()">📸 Download</button>
</div>

<!-- html2canvas -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
const upload = document.getElementById("upload");
const userImage = document.getElementById("userImage");
const glasses = document.getElementById("glasses");
const slider = document.getElementById("sizeSlider");

// Upload image
upload.addEventListener("change", function () {
  const file = this.files[0];
  if (file) {
    userImage.src = URL.createObjectURL(file);
  }
});

// Change glasses
function changeGlasses(src) {
  glasses.src = src;
}

// Resize
slider.addEventListener("input", function () {
  glasses.style.width = this.value + "px";
});

// Drag system (mouse + touch)
let isDragging = false;
let offsetX = 0;
let offsetY = 0;

function getClientX(e) {
  return e.touches ? e.touches[0].clientX : e.clientX;
}

function getClientY(e) {
  return e.touches ? e.touches[0].clientY : e.clientY;
}

function startDrag(e) {
  isDragging = true;

  const rect = glasses.getBoundingClientRect();
  offsetX = getClientX(e) - rect.left;
  offsetY = getClientY(e) - rect.top;

  glasses.style.cursor = "grabbing";
}

function moveDrag(e) {
  if (!isDragging) return;

  const containerRect = document.getElementById("container").getBoundingClientRect();

  glasses.style.left = (getClientX(e) - containerRect.left - offsetX) + "px";
  glasses.style.top = (getClientY(e) - containerRect.top - offsetY) + "px";
}

function stopDrag() {
  isDragging = false;
  glasses.style.cursor = "grab";
}

// Mouse events
glasses.addEventListener("mousedown", startDrag);
document.addEventListener("mousemove", moveDrag);
document.addEventListener("mouseup", stopDrag);

// Touch events (mobile)
glasses.addEventListener("touchstart", startDrag);
document.addEventListener("touchmove", moveDrag);
document.addEventListener("touchend", stopDrag);

// Download image
function downloadImage() {
  const container = document.getElementById("container");

  html2canvas(container, { scale: 2 }).then(canvas => {
    const link = document.createElement("a");
    link.download = "my-glasses-look.png";
    link.href = canvas.toDataURL();
    link.click();
  });
}
</script>

</body>
</html>

What part of the code is the most important?

Upload images (you want to put glasses on).

upload.addEventListener("change", function () {
  const file = this.files[0];
  if (file) {
    userImage.src = URL.createObjectURL(file);
  }
});

No face image
Nothing to place glasses on

The glasses images

<img id="glasses" src="glasses1.png">

Must be position: absolute.
Must be inside #container

To choose between glasses designs

function changeGlasses(src) {
  glasses.src = src;
}

This connects your buttons to different images.

To drag the glasses to put presicely on face

function moveDrag(e) {
  if (!isDragging) return;

  const containerRect = document.getElementById("container").getBoundingClientRect();

  glasses.style.left = (getClientX(e) - containerRect.left - offsetX) + "px";
  glasses.style.top = (getClientY(e) - containerRect.top - offsetY) + "px";
}

Finally, if you want to try it yourself. Here's a demo.

Is it helpful?

Yes, people can use it for fun. See themselves in glasses before buying glasses, or even see if they like a design. So it's more than just an app. It's a way to experience glasses before buying one.

Conclusion

My project proves that with a little bit of help from AI. Some good pixel images. And the desire to build something. You can build a true difference in the world.