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. 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>


<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> <!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>


<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);
  }
}); upload.addEventListener("change", function () {
  const file = this.files[0];
  if (file) {
    userImage.src = URL.createObjectURL(file);
  }
}); No face image Nothing to place glasses on No face image Nothing to place glasses on The glasses images <img id="glasses" src="glasses1.png"> <img id="glasses" src="glasses1.png"> Must be position: absolute.Must be inside #container Must be position: absolute. Must be inside #container To choose between glasses designs function changeGlasses(src) {
  glasses.src = src;
} 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";
} 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. 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.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Building a DIY Keypad Circuit With Diodes and AI Tools

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Building a DIY Keypad Circuit With Diodes and AI Tools

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps