Git Product home page Git Product logo

my-test-repo's Introduction

photon

Powered by @silvia-odwyer/photon Forked at a2cefcb

Installation

Install the package by running the following command in terminal:

npm install @cf-wasm/photon

Usage

  • Cloudflare workers
    import * as photon from "@cf-wasm/photon";
  • Next.js (Webpack) import * as photon from "@cf-wasm/photon/next";
  • CJS (file base) import * as photon from "@cf-wasm/photon/node"';

wasm-image-optimization

  • Cloudflare workers
    import { optimizeImage } from 'wasm-image-optimization';
  • Next.js(Webpack)
    import { optimizeImage } from 'wasm-image-optimization/next';
  • ESM(import base)
    import { optimizeImage } from 'wasm-image-optimization/esm';
  • CJS(file base)
    import { optimizeImage } from 'wasm-image-optimization/node';

Example

Here is an example for Cloudflare Workers in which image is being resized and converted to webp format:

import * as photon from "@cf-wasm/photon";

export type Env = Readonly<{}>;

const worker: ExportedHandler<Env> = {
  async fetch() {
    // url of image to fetch
    const imageUrl = "https://avatars.githubusercontent.com/u/314135";

    // fetch image and get the Uint8Array instance
    const inputBytes = await fetch(imageUrl)
      .then((res) => res.arrayBuffer())
      .then((buffer) => new Uint8Array(buffer));

    // create a photon instance
    const inputImage = photon.PhotonImage.new_from_byteslice(inputBytes);

    // resize image using photon
    const outputImage = photon.resize(
      inputImage,
      inputImage.get_width() * 0.5,
      inputImage.get_height() * 0.5,
      1
    );

    // get webp bytes
    const outputBytes = outputImage.get_bytes_webp();

    // for other formats
    // png  : outputImage.get_bytes();
    // jpeg : outputImage.get_bytes_jpeg(quality);

    // create a Response instance
    const imageResponse = new Response(outputBytes, {
      headers: {
        "Content-Type": "image/webp"
      }
    });

    // call free() method to free memory
    inputImage.free();
    outputImage.free();

    return imageResponse;
  }
};

export default worker;

Documentation

To explore all the functions, view the official documentation.

my-test-repo's People

Contributors

fineshop avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.