Image compare with JavaScript

With this JavaScript code we can compare two images:

p169C4_javascript_image_compare.aia (1.8 MB)

javascript_imagecompare2

<!DOCTYPE html><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style>
.c-compare {
  --h: 9;
  --m: 1rem 0;
  --w: 16;
  --thumb-bgc: red;
  --thumb-bgc-focus: hsla(0, 70%, 70%, 0.7);
  --thumb-w: 1rem;

  margin: 0; var(--m);
  position: relative;
}
.c-compare::after {
  content: "";
  display: block;
  padding-bottom: calc((var(--h) / var(--w)) * 100%);
}
.c-compare__left,
.c-compare__right {
  height: 100%;
  object-fit: cover;
  position: absolute;
  width: 100%;
}
.c-compare__left {
  clip-path: polygon(0% 0%, var(--value) 0%, var(--value) 100%, 0% 100%);
}
.c-compare__right {
  clip-path: polygon(100% 0%, var(--value) 0%, var(--value) 100%, 100% 100%);
}
.c-compare__range {
  background-color: transparent;
  box-sizing: border-box;
  font-family: inherit;
  height: 100%;
  margin: 0;
  outline: none;
  position: absolute;
  top: 0;
  width: 100%;
}
.c-compare__range::-moz-range-thumb {
  background-color: var(--thumb-bgc);
  cursor: ew-resize;
  height: 100%;  
  width: var(--thumb-w);
}
.c-compare__range::-webkit-slider-thumb {
  background-color: transparent; //var(--thumb-bgc);
  cursor: ew-resize;
  height: 100%;  
  width: var(--thumb-w);
}
.c-compare__range:focus::-webkit-slider-thumb {
  background-color: var(--thumb-bgc-focus);
  box-shadow: 0 0 0 3px var(--thumb-bgc);
}
.c-compare__range:focus::-moz-range-thumb {
  background-color: var(--thumb-bgc-focus);
  box-shadow: 0 0 0 3px var(--thumb-bgc);
}
.c-compare__range::-moz-range-track {
  background: transparent;
  background-size: 100%;
  box-sizing: border-box;
}
.c-compare__range::-webkit-slider-runnable-track {
  background: transparent;
  background-size: 100%;
  box-sizing: border-box;
  height: 100%;
}
.c-compare__range,
.c-compare__range::-webkit-slider-runnable-track,
.c-compare__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="c-compare" style="--value:50%;">
  <img class="c-compare__left" src="trocadero_c.png" alt="Color" />
  <img class="c-compare__right" src="trocadero_b.png" alt="B/W" />
  <input type="range" class="c-rng c-compare__range" min="0" max="100" value="50" oninput="this.parentNode.style.setProperty('--value', `${this.value}%`)" />
</div>
</body>
</html>
4 Likes

2.- Get value of the change of image.

Modifying the following line we can obtain the value of the separation of the images, it will be a number from 0 to 100.
<input type="range" class="c-rng c-compare__range" min="0" max="100" value="50" oninput="this.parentNode.style.setProperty('--value', ${this.value}%); **window.AppInventor.setWebViewString('' + this.value)** " />

p169C4_javascript_image_compare_v2.aia (1.8 MB)

javascript_imagecompare4

2 Likes