How to use @expo/image-utils - 6 common examples

To help you get started, we’ve selected a few @expo/image-utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github expo / expo-cli / packages / expo-optimize / src / assets.ts View on Github external
async function optimizeImageAsync(
  projectRoot: string,
  inputPath: string,
  quality: number
): Promise {
  console.log(`\u203A Checking ${chalk.reset.bold(relative(projectRoot, inputPath))}`);

  const outputPath = temporary.directory();
  await sharpAsync({
    input: inputPath,
    output: outputPath,
    quality,
    // https://sharp.pixelplumbing.com/en/stable/api-output/#parameters_4
    adaptiveFiltering: true,
  });
  return join(outputPath, basename(inputPath));
}
github expo / expo-cli / packages / webpack-pwa-manifest-plugin / src / icons.ts View on Github external
const { width, height } = toSize(size);
  if (width <= 0 || height <= 0) {
    throw Error(`Failed to process image with invalid size: { width: ${width}, height: ${height}}`);
  }
  const mimeType = mime.getType(icon.src);
  if (!mimeType) {
    throw new Error(`Invalid mimeType for image with source: ${icon.src}`);
  }

  const dimensions = `${width}x${height}`;
  const fileName = `icon_${dimensions}.${mime.getExtension(mimeType)}`;

  let imageBuffer: Buffer | null = await getImageFromCacheAsync(fileName, cacheKey);
  if (!imageBuffer) {
    // Putting the warning here will prevent the warning from showing if all images were reused from the cache
    if (!hasWarned && !(await isAvailableAsync())) {
      hasWarned = true;
      // TODO: Bacon: Fallback to nodejs image resizing as native doesn't work in the host environment.
      console.log('ff', cacheKey, fileName, dimensions);
      console.log();
      console.log(
        chalk.bgYellow.black(
          `PWA Images: Using node to generate images. This is much slower than using native packages.`
        )
      );
      console.log(
        chalk.yellow(
          `- Optionally you can stop the process and try again after successfully running \`npm install -g sharp-cli\`.\n- If you are using \`expo-cli\` to build your project then you could use the \`--no-pwa\` flag to skip the PWA asset generation step entirely.`
        )
      );
    }
    imageBuffer = await getBufferWithMimeAsync(icon, mimeType, { width, height });
github expo / expo-cli / packages / webpack-pwa-manifest-plugin / src / icons.ts View on Github external
inputPath: string,
  mimeType: string,
  width: number,
  height: number,
  fit: ResizeMode = 'contain',
  background: string
): Promise {
  if (!(await isAvailableAsync())) {
    return await jimpResize(inputPath, mimeType, width, height, fit, background);
  }

  const format = ensureValidMimeType(mimeType.split('/')[1]);
  const outputPath = temporary.directory();

  try {
    await sharpAsync(
      {
        input: inputPath,
        output: outputPath,
        format,
      },
      [
        {
          operation: 'flatten',
          background,
        },
        {
          operation: 'resize',
          width,
          height,
          fit,
          background,
github expo / expo-cli / packages / webpack-pwa-manifest-plugin / src / icons.ts View on Github external
async function resize(
  inputPath: string,
  mimeType: string,
  width: number,
  height: number,
  fit: ResizeMode = 'contain',
  background: string
): Promise {
  if (!(await isAvailableAsync())) {
    return await jimpResize(inputPath, mimeType, width, height, fit, background);
  }

  const format = ensureValidMimeType(mimeType.split('/')[1]);
  const outputPath = temporary.directory();

  try {
    await sharpAsync(
      {
        input: inputPath,
        output: outputPath,
        format,
      },
      [
        {
          operation: 'flatten',
github expo / expo-cli / packages / expo-optimize / src / assets.ts View on Github external
outdated.forEach(outdatedHash => {
    delete assetInfo[outdatedHash];
  });

  const { include, exclude, save } = options;
  const quality = options.quality == null ? 80 : options.quality;

  const images = include || exclude ? selectedFiles : allFiles;

  for (const image of images) {
    const hash = hashes[image];
    if (assetInfo[hash]) {
      continue;
    }

    if (!(await isAvailableAsync())) {
      console.log(
        chalk.bold.red(
          `\u203A Cannot optimize images without sharp-cli.\n\u203A Run this command again after successfully installing sharp with \`${chalk.magenta`npm install -g sharp-cli`}\``
        )
      );
      return;
    }

    const { size: prevSize } = statSync(image);

    const newName = createNewFilename(image);
    const optimizedImage = await optimizeImageAsync(projectRoot, image, quality);

    const { size: newSize } = statSync(optimizedImage);
    const amountSaved = prevSize - newSize;
    if (amountSaved > 0) {
github expo / expo-cli / packages / xdl / src / AssetUtils.ts View on Github external
export async function optimizeImageAsync(inputPath: string, quality: number): Promise {
  logger.global.info(`Optimizing ${inputPath}`);
  const outputPath = temporary.directory();
  await sharpAsync({
    input: inputPath,
    output: outputPath,
    quality,
  });
  return path.join(outputPath, path.basename(inputPath));
}

@expo/image-utils

A package used by Expo CLI for processing images

MIT
Latest version published 15 days ago

Package Health Score

83 / 100
Full package analysis