Nerdy Programmers Mingling

    @thi.ng/dl-asset
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.19 • Public • Published

    dl-asset

    npm version npm downloads Twitter Follow

    This project is part of the @thi.ng/umbrella monorepo.

    About

    Canvas, video recording & file asset download helpers for web apps.

    Status

    STABLE - used in production

    Search or submit any issues for this package

    Related packages

    • @thi.ng/mime - 650+ file extension to MIME type mappings, based on mime-db

    Installation

    yarn add @thi.ng/dl-asset

    ES module import:

    <script type="module" src="https://cdn.skypack.dev/@thi.ng/dl-asset"></script>

    Skypack documentation

    For Node.js REPL:

    # with flag only for < v16
    node --experimental-repl-await
    
    > const dlAsset = await import("@thi.ng/dl-asset");
    

    Package sizes (brotli'd, pre-treeshake): ESM: 578 bytes

    Dependencies

    Usage examples

    Several demos in this repo's /examples directory are using this package.

    A selection:

    Screenshot Description Live demo Source
    Probabilistic color theme generator Demo Source
    Color palette generation via dominant color extraction from uploaded images Demo Source
    Various hdom-canvas shape drawing examples & SVG conversion / export Demo Source
    Worker based, interactive Mandelbrot visualization Demo Source
    Parser grammar livecoding editor/playground & codegen Demo Source
    Animated Voronoi diagram, cubic splines & SVG download Demo Source
    Interactive grid generator, SVG generation & export, undo/redo support Demo Source
    rdom & WebGL-based image channel editor Demo Source
    1D Wolfram automata with OBJ point cloud export Demo Source
    Zig-based DOM creation & canvas drawing app Demo Source

    API

    Generated API docs

    Basic usage

    import { download } from "@thi.ng/dl-asset";
    
    const src = "Hellö wörld!";
    
    // mime type derived from file extension (.txt)
    download("hello.txt", src, {
        utf8: true,
        expire: 1000
    });
    
    // with explicit MIME type string
    download("hello.txt", src, {
        mime: "text/plain",
        utf8: true,
        expire: 1000
    });

    ...or using MIME type preset from @thi.ng/mime.

    import { preferredType } from "@thi.ng/mime";
    
    downloadWithMime("hello.txt", src, {
        // here mandatory to provide MIME type
        mime: preferredType("txt"), // text/plain
        utf8: true,
        expire: 1000
    });

    Simplified canvas downloads

    Since v2.1.0, HTML canvas downloads can be simplified using downloadCanvas():

    import { downloadCanvas } from "@thi.ng/dl-asset";
    
    // download as PNG (default)
    downloadCanvas(canvas, "file-name-without-ext");
    
    // download as JPG or WebP with given quality
    downloadCanvas(canvas, "file-name-without-ext", "jpeg", 0.9);
    
    downloadCanvas(canvas, "file-name-without-ext", "webp", 0.9);

    Authors

    Karsten Schmidt

    If this project contributes to an academic publication, please cite it as:

    @misc{thing-dl-asset,
      title = "@thi.ng/dl-asset",
      author = "Karsten Schmidt",
      note = "https://thi.ng/dl-asset",
      year = 2020
    }

    License

    © 2020 - 2022 Karsten Schmidt // Apache Software License 2.0

    Install

    npm i @thi.ng/dl-asset

    DownloadsWeekly Downloads

    94

    Version

    2.3.19

    License

    Apache-2.0

    Unpacked Size

    33.5 kB

    Total Files

    14

    Last publish

    Collaborators

    • thi.ng