imageTransformVariants resize issue: Uncaught (in promise) TypeError: Cannot set property 'size' of undefined

[willwilson]

I found an issue when imageResizeUpscale = false, smaller images (smaller than imageResizeTargetWidth or imageResizeTargetHeight) don't have access to the resize transform in imageTransformVariants. In order to work around this, I enable imageResizeUpscale, so that I can resize everything, but I end up throwing away the original image after it gets to the server. Here is a snippet of the code that has issues:

    const pond = FilePond.create(document.querySelector('input'), {
      imageResizeTargetWidth: 1280,
      imageResizeTargetHeight: 1280,
      imageResizeMode: 'contain',
      imageResizeUpscale: false,
      imageTransformOutputQuality: 80,

      imageTransformVariants: {
        'm_': transforms => {
          // errors here on any image that is less than the 1280x1280 defined above, since it doesn't have to resize the image.
          transforms.resize.size.width = 640;
          transforms.resize.size.height = 640;
          return transforms;
        }
     }
  });

[rikschennink]

I'm sorry but I'm not sure I understand the issue, can you elaborate?

[willwilson]

Sure, using the code above, if I try to upload an image that is 800px by 800px (it's less than 1280), it will error on the transforms.resize.size.width = 640; line saying the resize transform doesn't exist. BUT if I change the imageResizeUpscale to true, then it will work, but it's not the outcome I want since the image will be upscaled to 1280.

[rikschennink]

Can you try something like:

transforms.resize = {
    size: { width: 640 }
}

[xcrap]

I don't understand where to add this, and also If I should leave imageResizeUpscale true or false.

[rikschennink]

@xcrap inside a imageTransformVariants function.

[xcrap]

Well I already had that

'thumb_medium_': transforms => {
			transforms.resize.size.width = 500
			// transforms.resize = { size: { width: 500 }}
            return transforms;
		},

This has no effect, the original image is scaled to the full size or gives an error if upscale is set to false.

Adding transforms.resize = { size: { width: 500 }} inside imageTransformVariants I get this.

custom.min.js:1 Uncaught TypeError: Failed to execute 'createImageData' on 'CanvasRenderingContext2D': Value is not of type 'long'.

[rikschennink]

Something like this should work:

  imageTransformVariants: {
    thumb_medium_: (transforms) => {
      console.log(transforms);
      transforms.resize = {
        size: {
          width: 400,
          height: 400,
        }
      }
      return transforms;
    },
    thumb_small_: (transforms) => {
      transforms.resize = {
        size: {
          width: 200,
          height: 200,
        }
      }
      return transforms;
    }
  }

[xcrap]

It worked, actually, the problem was the lack of height, without it I get this error.

custom.min.js:formatted:8915 Uncaught TypeError: Failed to execute 'createImageData' on 'CanvasRenderingContext2D': Value is not of type 'long'.

Setting the height works perfectly. I wonder if a height it's really necessary.

[tomdav999]

Something like this should work:

  imageTransformVariants: {
    thumb_medium_: (transforms) => {
      console.log(transforms);
      transforms.resize = {
        size: {
          width: 400,
          height: 400,
        }
      }
      return transforms;
    },
    thumb_small_: (transforms) => {
      transforms.resize = {
        size: {
          width: 200,
          height: 200,
        }
      }
      return transforms;
    }
  }

Hi @rikschennink could you update the imageTransformVariants example in the documentation with the proposed solution? I think a lot of these problems (including my own) arise from using the example in the documentation which sets transforms.resize.size.width. At first blush I thought that was equivalent to the solution above, but it isn't. The current documentation is the problem not the solution. ;)

[rikschennink]

@tomdav999 Good point, done.