JS tricks by Oscar

debounce-run-last-call.js

const debounce = (callback, wait) => {
  let timeoutId = null;
  return (...args) => {
    window.clearTimeout(timeoutId);
    timeoutId = window.setTimeout(() => {
      callback.apply(null, args);
    }, wait);
  };
}

const doStuff = debounce((ev) => {
  // Do stuff with the event!
}, 250);
window.addEventListener('mousemove', doStuff);

perfect-sized-image.vue

<script>
import { defineComponent } from "vue";
import ContentCarousel from "./ContentCarousel.vue";
import SlideDots from "./SlideDots.vue";

export default defineComponent({

  props: {
    image: {
      type: Object,
      required: true,
    },
  },
  data() {
    const lowResolutionImage =
      this.image &&
      this.$toLitiumMediaUrl(this.image.imageId, { maxWidth: 100 });

    return {
      highResolutionImage: null,
      imgUrl: lowResolutionImage,
      isImageDownloaded: false,
    };
  },
  mounted() {
    if (!this.imgUrl) {
      return;
    }

    const media = this.image.dimension;
    const container = this.$refs.mediaContainer;
    const mediaAspectRatio = media.isEmpty ? 1 : media.width / media.height;
    const containerAspectRatio = !container ? 0.75 : container.clientWidth / container.clientHeight;
    
    this.highResolutionImage = this.$toLitiumMediaUrl(this.image.imageId,
      {
        ...(mediaAspectRatio < containerAspectRatio
          ? { maxWidth: container.clientWidth }
          : { maxHeight: container.clientHeight }),
      });

    this.$nextTick(() => {
      const img = new Image();

      img.onload = () => {
        this.imgUrl = this.highResolutionImage;
        this.isImageDownloaded = true;
      };

      img.src = this.highResolutionImage;
    });
  },
});
</script>

<template>
  <div class="image" ref="mediaContainer">
    <div class="image__spacer"></div>
    <img 
      :class="['image__image',
        {'image__image-loading' : !isImageDownloaded}]" 
      :src="imgUrl" 
    />
    <div class="image__overlay"></div>
  </div>
</template>

<style>
.image {
  position: relative;
}

.image__spacer {
  padding-top: 130%;
}

.image__image {
  position: absolute;
  inset: 0;
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
}

.image__image-loading {
  filter: blur(5px);
}

.image__overlay {
  z-index: 10;
  position: absolute;
  inset: 0;
  opacity: 0.8;
  background-color: #fafafa;
  mix-blend-mode: darken;
}

@media (min-width: 768px) {
}
</style>

pixelate-image.js

function pixelateImage(pixelSize, imageWidth, callback) {
  const pixel_size = pixelSize; // the size of the pixelated image's pixels.
  const image_width = imageWidth; 

  const sourceImage = new Image();
  const c = document.createElement("canvas");
  ctx = c.getContext('2d');

  sourceImage.onload = function () {
    
    w = sourceImage.width;
    h = sourceImage.height;

    c.width = w;
    c.height = h;
    ctx.drawImage(sourceImage, 0, 0);

    var pixelArr = ctx.getImageData(0, 0, w, h).data;

    for (let y = 0; y < h; y += pixel_size) {
      for (let x = 0; x < w; x += pixel_size) {
        const p = (x + (y*w)) * 4;
        ctx.fillStyle = "rgba(" + pixelArr[p] + "," + pixelArr[p + 1] + "," + pixelArr[p + 2] + "," + pixelArr[p + 3] + ")";
        ctx.fillRect(x, y, pixel_size, pixel_size);
      }
    }

    const pixelImage = new Image();
    pixelImage.src = c.toDataURL("image/webp"); //send this value back in the callback if an img element is already defined
    pixelImage.width = image_width;
    callback(pixelImage);
  };

  sourceImage.src = 'exampleImage.jpg';
}

pixelateImage(10, 800, function(result) {
  console.log(result); //instead of logging, here we can do other cool stuff with the image.
});