imageFileResizer is not a function after build about react-image-file-resizer HOT 11 CLOSED

@mikejackowski

working TS version

/**
 *
 * @author Onur Zorluer
 *
 */
function changeHeightWidth(
  height: number,
  maxHeight: number,
  width: number,
  maxWidth: number,
  minWidth?: number,
  minHeight?: number,
) {
  if (width > maxWidth) {
    height = Math.round((height * maxWidth) / width);
    width = maxWidth;
  }
  if (height > maxHeight) {
    width = Math.round((width * maxHeight) / height);
    height = maxHeight;
  }
  if (minWidth && width < minWidth) {
    height = Math.round((height * minWidth) / width);
    width = minWidth;
  }
  if (minHeight && height < minHeight) {
    width = Math.round((width * minHeight) / height);
    height = minHeight;
  }
  return { height, width };
}

function resizeAndRotateImage(
  image: HTMLImageElement,
  maxWidth: number,
  maxHeight: number,
  minWidth: undefined | number,
  minHeight: undefined | number,
  compressFormat = 'jpeg',
  quality = 100,
  rotation = 0,
) {
  const qualityDecimal = quality / 100;
  const canvas = document.createElement('canvas');

  let width = image.width;
  let height = image.height;

  const newHeightWidth = changeHeightWidth(height, maxHeight, width, maxWidth, minWidth, minHeight);
  if (rotation && (rotation === 90 || rotation === 270)) {
    canvas.width = newHeightWidth.height;
    canvas.height = newHeightWidth.width;
  } else {
    canvas.width = newHeightWidth.width;
    canvas.height = newHeightWidth.height;
  }

  width = newHeightWidth.width;
  height = newHeightWidth.height;

  const ctx = canvas.getContext('2d');

  if (!ctx) {
    return;
  }
  ctx.fillStyle = 'rgba(0, 0, 0, 0)';
  ctx.fillRect(0, 0, width, height);

  if (ctx.imageSmoothingEnabled && ctx.imageSmoothingQuality) {
    ctx.imageSmoothingQuality = 'high';
  }

  if (rotation) {
    ctx.rotate((rotation * Math.PI) / 180);
    if (rotation === 90) {
      ctx.translate(0, -canvas.width);
    } else if (rotation === 180) {
      ctx.translate(-canvas.width, -canvas.height);
    } else if (rotation === 270) {
      ctx.translate(-canvas.height, 0);
    } else if (rotation === 0 || rotation === 360) {
      ctx.translate(0, 0);
    }
  }
  ctx.drawImage(image, 0, 0, width, height);

  return canvas.toDataURL(`image/${compressFormat}`, qualityDecimal);
}

function b64toByteArrays(b64Data: string) {
  const sliceSize = 512;

  const byteCharacters = atob(
    b64Data.toString().replace(/^data:image\/(png|jpeg|jpg|webp);base64,/, ''),
  );
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }
  return byteArrays;
}

function b64toBlob(b64Data: string, contentType: string = 'image/jpeg') {
  const byteArrays = b64toByteArrays(b64Data);
  const blob = new Blob(byteArrays, {
    lastModified: new Date(), // TODO: check problem
    type: contentType,
  } as BlobPropertyBag);
  return blob;
}

function b64toFile(b64Data: string, fileName: string, contentType: string = 'image/jpeg') {
  const byteArrays = b64toByteArrays(b64Data);
  const file = new File(byteArrays, fileName, {
    lastModified: new Date(), // TODO: check problem
    type: contentType,
  } as BlobPropertyBag);
  return file;
}

function createResizedImage(
  file: File,
  maxWidth: number,
  maxHeight: number,
  compressFormat: string,
  quality: number,
  rotation: number,
  responseUriFunc: (blob: string | File | Blob) => void,
  outputType = 'base64',
  minWidth?: number,
  minHeigh?: number,
) {
  const reader = new FileReader();
  if (file) {
    if (file.type && !file.type.includes('image')) {
      throw Error('File Is NOT Image!');
    } else {
      reader.readAsDataURL(file);
      reader.onload = () => {
        const image = new Image();
        image.src = reader.result?.toString() || '';
        image.onload = function () {
          const resizedDataUrl = resizeAndRotateImage(
            image,
            maxWidth,
            maxHeight,
            minWidth,
            minHeigh,
            compressFormat,
            quality,
            rotation,
          );

          if (!resizedDataUrl) {
            return; // TODO: improve typings
          }

          const contentType = `image/${compressFormat}`;
          switch (outputType) {
            case 'blob':
              const blob = b64toBlob(resizedDataUrl, contentType);
              responseUriFunc(blob);
              break;
            case 'base64':
              responseUriFunc(resizedDataUrl);
              break;
            case 'file':
              const fileName = file.name;
              const fileNameWithoutFormat = fileName
                .toString()
                .replace(/(png|jpeg|jpg|webp)$/i, '');
              const newFileName = fileNameWithoutFormat.concat(compressFormat.toString());
              const newFile = b64toFile(resizedDataUrl, newFileName, contentType);
              responseUriFunc(newFile);
              break;
            default:
              responseUriFunc(resizedDataUrl);
          }
        };
      };
      reader.onerror = (error: any) => {
        throw Error(error);
      };
    }
  } else {
    throw Error('File Not Found!');
  }
}

export { createResizedImage };

from react-image-file-resizer.

yo pude solucionarlo asi:

1. Copiar todo lo que esta en el index : https://github.com/onurzorluer/react-image-file-resizer/blob/3a0fab44211f985aaf048b4fa71027b7149da90e/src/index.js

2. la parte donde dice exporta default lo eliminas, luego agregas esto en tu class Resizer, asi:

   static imageFileResizer = (file, maxWidth, maxHeight, compressFormat, quality, rotation, responseUriFunc, outputType, minWidth, minHeight) => { return Resizer.createResizedImage( file, maxWidth, maxHeight, compressFormat, quality, rotation, responseUriFunc, outputType, minWidth, minHeight, ); }

3. Esto pones fuera de Class Resizer :
   const resizeFile = (file) => new Promise((resolve) => { Resizer.imageFileResizer(file, 125, 125, "png", 100, 0, (uri) => { resolve(uri) }, "file"); });

   const imageResize = async (file) => { try { const resFile = await resizeFile(file) console.info("todo bien", resFile) return resFile } catch (err) { console.error("esto es un error", err) throw new Error("Return error"); } }
export { imageResize }

4. Asi lo uso:
   a) import {imageResize} from './utils/imageResize'
   b) imageResize(event.target.files[0]).then((convertedFile) => { console.log(convertedFile) })

from react-image-file-resizer.

yo pude solucionarlo asi:

1. Copiar todo lo que esta en el index : https://github.com/onurzorluer/react-image-file-resizer/blob/3a0fab44211f985aaf048b4fa71027b7149da90e/src/index.js
2. la parte donde dice exporta default lo eliminas, luego agregas esto en tu class Resizer, asi:
   static imageFileResizer = (file, maxWidth, maxHeight, compressFormat, quality, rotation, responseUriFunc, outputType, minWidth, minHeight) => { return Resizer.createResizedImage( file, maxWidth, maxHeight, compressFormat, quality, rotation, responseUriFunc, outputType, minWidth, minHeight, ); }
3. Esto pones fuera de Class Resizer :
   const resizeFile = (file) => new Promise((resolve) => { Resizer.imageFileResizer(file, 125, 125, "png", 100, 0, (uri) => { resolve(uri) }, "file"); });
const imageResize = async (file) => { try { const resFile = await resizeFile(file) console.info("todo bien", resFile) return resFile } catch (err) { console.error("esto es un error", err) throw new Error("Return error"); } }
export { imageResize }
4. Asi lo uso:
   a) import {imageResize} from './utils/imageResize'
   b) imageResize(event.target.files[0]).then((convertedFile) => { console.log(convertedFile) })

Worked for me, thank you 🔥

from react-image-file-resizer.

Nevermind. This is most definitely a problem with Vitejs or more specifically whatever build tools they're using. I moved a minimal reproduction over to Create React App and hey what do you know... It built and it works wonderfully. Thanks, again, for this wonderful utility! Have a great day!

from react-image-file-resizer.

Nevermind. This is most definitely a problem with Vitejs or more specifically whatever build tools they're using. I moved a minimal reproduction over to Create React App and hey what do you know... It built and it works wonderfully. Thanks, again, for this wonderful utility! Have a great day!

Hi ADParris, dying to know how you fixed this issue, did you have to do something to vite config..?
Much appreciated.

from react-image-file-resizer.

Thank you. I did implemented it, and worked; and will be filing up a version with TypeScript rather soon.

from react-image-file-resizer.

I'm still having this issue.

from react-image-file-resizer.

Gracias! This worked great.

from react-image-file-resizer.

@mikejackowski

working TS version

/**
 *
 * @author Onur Zorluer
 *
 */
function changeHeightWidth(
  height: number,
  maxHeight: number,
  width: number,
  maxWidth: number,
  minWidth?: number,
  minHeight?: number,
) {
  if (width > maxWidth) {
    height = Math.round((height * maxWidth) / width);
    width = maxWidth;
  }
  if (height > maxHeight) {
    width = Math.round((width * maxHeight) / height);
    height = maxHeight;
  }
  if (minWidth && width < minWidth) {
    height = Math.round((height * minWidth) / width);
    width = minWidth;
  }
  if (minHeight && height < minHeight) {
    width = Math.round((width * minHeight) / height);
    height = minHeight;
  }
  return { height, width };
}

function resizeAndRotateImage(
  image: HTMLImageElement,
  maxWidth: number,
  maxHeight: number,
  minWidth: undefined | number,
  minHeight: undefined | number,
  compressFormat = 'jpeg',
  quality = 100,
  rotation = 0,
) {
  const qualityDecimal = quality / 100;
  const canvas = document.createElement('canvas');

  let width = image.width;
  let height = image.height;

  const newHeightWidth = changeHeightWidth(height, maxHeight, width, maxWidth, minWidth, minHeight);
  if (rotation && (rotation === 90 || rotation === 270)) {
    canvas.width = newHeightWidth.height;
    canvas.height = newHeightWidth.width;
  } else {
    canvas.width = newHeightWidth.width;
    canvas.height = newHeightWidth.height;
  }

  width = newHeightWidth.width;
  height = newHeightWidth.height;

  const ctx = canvas.getContext('2d');

  if (!ctx) {
    return;
  }
  ctx.fillStyle = 'rgba(0, 0, 0, 0)';
  ctx.fillRect(0, 0, width, height);

  if (ctx.imageSmoothingEnabled && ctx.imageSmoothingQuality) {
    ctx.imageSmoothingQuality = 'high';
  }

  if (rotation) {
    ctx.rotate((rotation * Math.PI) / 180);
    if (rotation === 90) {
      ctx.translate(0, -canvas.width);
    } else if (rotation === 180) {
      ctx.translate(-canvas.width, -canvas.height);
    } else if (rotation === 270) {
      ctx.translate(-canvas.height, 0);
    } else if (rotation === 0 || rotation === 360) {
      ctx.translate(0, 0);
    }
  }
  ctx.drawImage(image, 0, 0, width, height);

  return canvas.toDataURL(`image/${compressFormat}`, qualityDecimal);
}

function b64toByteArrays(b64Data: string) {
  const sliceSize = 512;

  const byteCharacters = atob(
    b64Data.toString().replace(/^data:image\/(png|jpeg|jpg|webp);base64,/, ''),
  );
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }
  return byteArrays;
}

function b64toBlob(b64Data: string, contentType: string = 'image/jpeg') {
  const byteArrays = b64toByteArrays(b64Data);
  const blob = new Blob(byteArrays, {
    lastModified: new Date(), // TODO: check problem
    type: contentType,
  } as BlobPropertyBag);
  return blob;
}

function b64toFile(b64Data: string, fileName: string, contentType: string = 'image/jpeg') {
  const byteArrays = b64toByteArrays(b64Data);
  const file = new File(byteArrays, fileName, {
    lastModified: new Date(), // TODO: check problem
    type: contentType,
  } as BlobPropertyBag);
  return file;
}

function createResizedImage(
  file: File,
  maxWidth: number,
  maxHeight: number,
  compressFormat: string,
  quality: number,
  rotation: number,
  responseUriFunc: (blob: string | File | Blob) => void,
  outputType = 'base64',
  minWidth?: number,
  minHeigh?: number,
) {
  const reader = new FileReader();
  if (file) {
    if (file.type && !file.type.includes('image')) {
      throw Error('File Is NOT Image!');
    } else {
      reader.readAsDataURL(file);
      reader.onload = () => {
        const image = new Image();
        image.src = reader.result?.toString() || '';
        image.onload = function () {
          const resizedDataUrl = resizeAndRotateImage(
            image,
            maxWidth,
            maxHeight,
            minWidth,
            minHeigh,
            compressFormat,
            quality,
            rotation,
          );

          if (!resizedDataUrl) {
            return; // TODO: improve typings
          }

          const contentType = `image/${compressFormat}`;
          switch (outputType) {
            case 'blob':
              const blob = b64toBlob(resizedDataUrl, contentType);
              responseUriFunc(blob);
              break;
            case 'base64':
              responseUriFunc(resizedDataUrl);
              break;
            case 'file':
              const fileName = file.name;
              const fileNameWithoutFormat = fileName
                .toString()
                .replace(/(png|jpeg|jpg|webp)$/i, '');
              const newFileName = fileNameWithoutFormat.concat(compressFormat.toString());
              const newFile = b64toFile(resizedDataUrl, newFileName, contentType);
              responseUriFunc(newFile);
              break;
            default:
              responseUriFunc(resizedDataUrl);
          }
        };
      };
      reader.onerror = (error: any) => {
        throw Error(error);
      };
    }
  } else {
    throw Error('File Not Found!');
  }
}

export { createResizedImage };

Thanks man!

from react-image-file-resizer.

Is there an NPM version that just works with Vite or are we required to manually pull in this code?

from react-image-file-resizer.

Thank you the TS version works for me!

from react-image-file-resizer.