Cloudinary Vue JavaScript API how can I get the pixellate effect when loading the image

Options
r3plica
r3plica Member Posts: 4 ✭
in Developer APIs

Hey all,

I have a directive that gets an image using the JavaScript API. Currently it looks like this:

const url = cloudinaryCore.url(publicId, {
  secure: true,
  transformation: [
    {
      height,
      width,
      gravity,
      crop,
      quality: "auto",
      fetchFormat: "auto",
    },
  ],
});

This works and I can apply the image to the background as so:

element.style.background = `url(${url})`;
element.style.backgroundPosition = "center";
element.style.backgroundRepeat = "no-repeat";
element.style.backgroundSize = "cover";

In another part of my application, I use a normal image:

<cld-image
  :style="{
    height: dimensions && dimensions.height + 'px',
    width: dimensions && dimensions.width + 'px',
  }"
  :publicId="publicId"
  :crop="crop"
  :gravity="gravity"
  :height="dimensions.height"
  :width="dimensions.width"
  :secure="true"
  v-if="hasDimensions"
>
  <cld-placeholder type="pixelate" />
</cld-image>

This image has a placeholder with pixelate, I would love to do the same on the background images. So my question is, is there a way to add the pixelate placeholder to background images?

Tagged:

Best Answer

  • r3plica
    r3plica Member Posts: 4 ✭
    Answer ✓
    Options

    Nevermind, I figured it out:

    const url = cloudinaryCore.url(publicId, {
  secure: true,
  transformation: [
    {
      height,
      width,
      gravity,
      crop,
      quality: "auto",
      fetchFormat: "auto",
    },
  ],
  placeholder: "pixelate",
});

Answers

  • rlux
    rlux Administrator, Cloudinary Staff Posts: 53
    Options

    Awesome! Thanks for sharing the answer. :)

  • r3plica
    r3plica Member Posts: 4 ✭
    Options

    Unfortunately, it wasn't the answer. Now it just shows the pixelated image at all times. I am going to look into it and see if I can figure out why (unless someone knows offhand)

  • r3plica
    r3plica Member Posts: 4 ✭
    Options

    Ok, now I have tried another way.

    This is what I did:

    const url = cloudinaryCore.url(publicId, {
  secure: true,
  transformation: [
    {
      height,
      width,
      gravity,
      crop,
      quality: "auto",
      fetchFormat: "auto",
    },
  ],
  placeholder: "pixelate",
});


element.style.background = `url(${url})`;
element.style.backgroundPosition = "center";
element.style.backgroundRepeat = "no-repeat";
element.style.backgroundSize = "cover";


loadImage(element, url);

    The first part is all the same (i.e. I get the pixelated image). But then I have a new function called loadImage which does this:

    function loadImage(element, url) {
  const image = document.createElement("img");
  const originalUrl = url.replace("e_pixelate,", "");
  image.addEventListener(
    "load",
    () => (element.style.background = `url(${originalUrl})`)
  );
  image.src = originalUrl;
}

    As you can see, it creates an element and set's the src to the image url (minus the pixelate placeholder). Then when that has loaded, it sets the background image to the full image.

    That seems to work, but I am not sure it's 100% correct. Any comments welcome

Categories