Create preview image file from original image

Ask the community
4

@ErikAKSkallevold Thank you for the Responsive Image tip. I was aware of this and perhaps I could use this as a solution in my case, though I’m not sure if the code behind the responsive screen size detection would work. My project is an image gallery, where I need a smaller size version (like a thumbnail) of each image for the gallery page itself, before selecting one item thus displaying the full-size version. Although I managed to create a smaller version using the answers here: How do I send a file object from a coded component to the datastore? - #5 by lbj, I’m still having trouble actually displaying this object using its File Content URL. I’ve verified that the content is truly there by pasting its blob string in a browser. I still haven’t managed to get this preview image to display.

Here’s the coded component code that’s starting when I enable it by clicking an Upload Image icon (setting App Variables.hasClickedUploadImage to true, which is later set to false in this code) :

const uploadByFile = async (the_image) => { 
  const newImage = await blobToImage(the_image.__file);

  const canvas = document.createElement('canvas');

  canvas.width = 400;

  canvas.height = (newImage.naturalHeight / newImage.naturalWidth) * canvas.width;

  if (canvas.getContext) {
    const cntxt = canvas.getContext("2d");

    cntxt.drawImage(newImage, 0, 0, canvas.width,canvas.height);

    const dataURL = canvas.toDataURL('image/jpeg', 0.25);

    window.the_blob = dataURL;

    await appfarm.actions.uploadImage();

    const url = appfarm.data.PreviewImage.get();
    
    return {
      success: 1,
      file: { url }
    }; 
  } else {
    console.log('could not get canvas context!');
  }
}

const blobToImage = (blob) => {
  return new Promise(resolve => {
    const url = URL.createObjectURL(blob);

    let img = new Image();

    img.onload = () => {
      URL.revokeObjectURL(url);

      resolve(img);
    }

    img.src = url;
  })
}

// reset hasClickedUploadImage var
appfarm.actions.unclick();

const image = appfarm.data.image.get();

// create preview image
uploadByFile(image);

The uploadImage action creates the PreviewImage file object by having “return window.the_blob;” as a function for providing the image data. This works.

I presume that images stored in Appfarm are done so to a CDN service. I’m familiar with this like f.ex. Cloudinary where images can be fetched in all sizes simply based on URL params. I’m also guessing images are cached based on messages I see in the console log. So in other words, if I can include the max size of the images listed in the gallery then this would be both fetched from the CDN and cached, so the thumbnails would hardly even require a server fetch by time (theoretically). Is this what said Responsive Image actually does or is the fetched size controlled by code reading the target screen size? There’s a big difference there for my particular gallery scenario.

Thank you.
Mikkel