@edifice.io/utilities/dist/image-resizer/image-resizer.js

Edifice Utilities Package

class p {
  /**
   * Adjusts the dimensions of an image to fit within the specified maximum width and height,
   * preserving the aspect ratio.
   *
   * @param height - The original height of the image.
   * @param maxHeight - The maximum allowed height for the image.
   * @param width - The original width of the image.
   * @param maxWidth - The maximum allowed width for the image.
   * @returns An object containing the adjusted height and width of the image.
   */
  static changeDimension(e, n, t, a) {
    return t > a && (e = Math.round(e * a / t), t = a), e > n && (t = Math.round(t * n / e), e = n), { height: e, width: t };
  }
  /**
   * Renames the file extension of a given filename.
   *
   * @param filename - The original filename whose extension needs to be changed.
   * @param newExtension - The new extension to be applied to the filename.
   * @returns The filename with the new extension.
   */
  static renameFileNameExtension(e, n) {
    const t = e.split(".");
    return t.pop(), t.join(".") + "." + n;
  }
  /**
   * Resizes an image to the specified dimensions and compresses it to the specified format and quality.
   *
   * @param image - The HTMLImageElement to be resized.
   * @param fileName - The name of the output file.
   * @param maxWidth - The maximum width of the resized image.
   * @param maxHeight - The maximum height of the resized image.
   * @param compressFormat - The format to compress the image to (default is "jpeg").
   * @param quality - The quality of the compressed image, as a percentage (default is 80).
   * @returns A Promise that resolves to a File object containing the resized and compressed image.
   */
  static resizeImage(e, n, t, a, s = "jpeg", g = 80) {
    const r = g / 100, i = document.createElement("canvas"), l = `image/${s}`;
    let c = e.width, m = e.height;
    const h = this.changeDimension(
      m,
      a,
      c,
      t
    );
    c = h.width, m = h.height;
    const o = i.getContext("2d");
    return o && (i.width = c, i.height = m, o.fillStyle = "white", o.fillRect(0, 0, i.width, i.height), o.imageSmoothingEnabled && o.imageSmoothingQuality && (o.imageSmoothingQuality = "high"), o.drawImage(e, 0, 0, c, m)), new Promise((u, w) => {
      i.toBlob(
        (d) => {
          d ? u(
            new File([d], n, {
              type: l,
              lastModified: (/* @__PURE__ */ new Date()).getTime()
            })
          ) : w();
        },
        l,
        r
      );
    });
  }
  /**
   * Resize and compress Image File in JPEG format (other format don't work well with canvas.toBlob() with quality parameter)
   * @param file  The image file to resize
   * @param maxWidth  The maximum width of the resized image
   * @param maxHeight   The maximum height of the resized image
   * @param quality   The quality of the compressed image
   * @returns   The resized image file
   */
  static async resizeImageFile(e, n = 1440, t = 1440, a = 80) {
    if (!e) throw Error("Image resizer: file not found!");
    if (!e.type || !e.type.startsWith("image/"))
      throw Error("Image resizer: the file given is not an image.");
    const s = "jpeg";
    return new Promise((g) => {
      const r = new Image();
      r.setAttribute("style", "max-width: none;"), r.src = URL.createObjectURL(e), r.onload = async () => {
        const i = await this.resizeImage(
          r,
          this.renameFileNameExtension(e.name, s),
          n,
          t,
          s,
          a
        );
        g(i);
      }, r.onerror = (i) => {
        throw Error("Image Loading Error: " + i);
      };
    });
  }
}
export {
  p as default
};