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.
## 1. Installation via NPM You can add the **huh-image-viewer** library to your project using npm: ``` npm install huh-image-viewer ```
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>
The following example shows how to load a .huh file and display it on a canvas using the huh-image-viewer library.
<!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>
If you want to serve .huh files from a server, you can use a Node.js server.
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}`);
});