Huh-image-viewer NPM

HUH Image Viewer Usage Guide

huh-image-viewer is a JavaScript library that allows you to display .huh format images in your web application. This guide explains how to install, use, and integrate the library into your projects.

Installation via CDN

Alternatively, you can use the library directly from a CDN:

<script src="https://cdn.jsdelivr.net/npm/huh-image-viewer@latest/dist/index.min.js"></script>

2. Basic Usage

The following example shows how to load a .huh file and display it on a canvas using the huh-image-viewer library.

HTML structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HUH Image Viewer</title>
</head>
<body>
    <h1>HUH Image Viewer</h1>

    <!-- Canvas element to draw the image -->
    <canvas id="imageCanvas"></canvas>

    <!-- Button to load the image -->
    <button onclick="loadImage('yigit.huh')">Show Image</button>

    <!-- Including the huh-image-viewer library -->
    <script src="/node_modules/huh-image-viewer/dist/index.js"></script>
    <script>
        // Initialize the HuhImageViewer class
        const viewer = new HuhImageViewer(null, 'imageCanvas');

        // Function to load the image from the server
        function loadImage(filename) {
            const url = `/image/${filename}`;

            fetch(url)
                .then(response => response.blob())
                .then(blob => {
                    const file = new File([blob], filename);
                    viewer.load(file);
                })
                .catch(error => console.error('Image loading failed:', error));
        }
    </script>
</body>
</html>

3. Server-Side Usage

If you want to serve .huh files from a server, you can use a Node.js server.

Server Code (NodeJS)

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

// Serve static files from the public directory
app.use(express.static('public'));

// Endpoint to serve .huh files to the client
app.get('/image/:filename', (req, res) => {
    const { filename } = req.params;
    const filePath = path.join(__dirname, 'images', filename);
    res.sendFile(filePath, (err) => {
        if (err) {
            res.status(404).send('File not found');
        }
    });
});

app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
});

huh image canvas viewer

0.0.1

5 months ago