Ghibli Art Photo Filter App | Upload & Convert Image to Anime Style

Create a Ghibli-Style Art Filter Web App Using HTML, CSS, and JavaScript

Studio Ghibli is renowned for its beautiful, whimsical art style — soft pastels, dreamy colors, and an almost magical atmosphere. Many digital artists attempt to emulate this look through filters or post-processing. In this blog post, we’ll walk through building a web app that allows users to upload a photo and apply a Ghibli-style artistic filter using only HTML, CSS, and JavaScript.

We’ll cover:

Project Overview
Setting Up the HTML Layout
Styling with CSS
Applying Image Processing with JavaScript
Enhancing the Effect with Filters
Potential Improvements
Final Thoughts

Let’s begin!

🎨 Project Overview

The idea is simple: the user clicks a button to upload a photo. Once the image is loaded onto a canvas, clicking another button will apply a Ghibli-style transformation.

While we won’t use complex AI models in this basic version, we will simulate the feel using:

Color tone adjustments
Desaturation and warmth
Light pastel effects via canvas manipulation

We'll create this in a single-page format using vanilla HTML, CSS, and JavaScript.

🧱 Step 1: Creating the HTML Structure

First, we need to build the skeleton of our application. This includes:

A title
A file input for uploading the image
A button to start the conversion
A canvas element to display the result

Here’s the code:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Ghibli Art Photo Filter</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  <div class="container">
    <h1>Ghibli Art Photo Filter</h1>
    <input type="file" id="upload" accept="image/*" />
    <button id="startBtn">Click to Convert</button>
    <canvas id="canvas"></canvas>
  </div>

  <script src="script.js"></script>
</body>
</html>

Explanation:

<input type="file"> lets the user select an image from their device.
<canvas> will display the image and apply pixel-based filters.
<button> is used to trigger the transformation.

🎨 Step 2: Adding CSS Styles for Aesthetic Appeal

We want our application to be minimal, clean, and somewhat reminiscent of the soft tones of Ghibli films.

css
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f9f6ef;
  min-height: 100vh;
}

.container {
  text-align: center;
  padding: 20px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 2em;
  color: #555;
}

#upload {
  margin-top: 20px;
}

#startBtn {
  margin: 15px;
  padding: 10px 20px;
  background: #3eaf7c;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

canvas {
  margin-top: 20px;
  max-width: 100%;
  border-radius: 15px;
  box-shadow: 0 0 10px #ccc;
}

Design Notes:

Soft white and green colors
Rounded buttons and shadows for a clean look
Canvas is bordered and shadowed for an artistic presentation

🧠 Step 3: Writing JavaScript to Handle Image Upload

Our next step is enabling users to upload an image and render it onto the canvas.

javascript
const upload = document.getElementById('upload');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let img = new Image();

upload.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();

  reader.onload = function (event) {
    img.onload = function () {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
    };
    img.src = event.target.result;
  };

  reader.readAsDataURL(file);
});

What This Code Does:

When the user uploads an image, we read it using FileReader.
We load it as an Image and draw it on the canvas.
The canvas size is adjusted to match the image’s dimensions.

At this point, uploading works. Now we apply the magic!

✨ Step 4: Simulating Ghibli Art Filters

Let’s apply a soft tone filter to the image on the canvas. Ghibli-style art is often:

Less saturated
Warm (reddish/yellowish)
Slightly desaturated
Dreamy and pastel

Here's how we simulate this with JavaScript pixel manipulation:

javascript
document.getElementById('startBtn').addEventListener('click', () => {
  if (!img.src) {
    alert('Please upload an image first.');
    return;
  }

  ctx.drawImage(img, 0, 0);
  let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  let data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;

    data[i] = avg + 30;        // Red
    data[i + 1] = avg + 20;    // Green
    data[i + 2] = avg;         // Blue

    data[i] += 15;             // add warmth to red
    data[i + 1] += 5;          // slightly warmer green
  }

  ctx.putImageData(imageData, 0, 0);
});

Pixel Manipulation Breakdown:

data[i], data[i+1], and data[i+2] represent Red, Green, and Blue.
We average the colors and shift tones to simulate Ghibli-like visuals.
These manual adjustments emulate a dreamier, painted look.

🌈 Optional: Enhancing with CSS or Advanced Filters

To go even further without using AI or TensorFlow, you can add CSS filters like blur, brightness, or sepia.

Example:

css
canvas {
  filter: contrast(1.1) brightness(1.05) saturate(0.9);
}

This further reduces contrast, softens brightness, and slightly decreases saturation to enhance the Ghibli style.

📈 Additional Enhancements

To make your app even more advanced:

1. Live Preview

Display a thumbnail of the uploaded image and preview the result side-by-side.

2. Download Button

Allow users to save the filtered image:

javascript
function downloadImage() {
  const link = document.createElement('a');
  link.download = 'ghibli-art.png';
  link.href = canvas.toDataURL();
  link.click();
}

3. AI-Based Style Transfer

If you want real Ghibli-style rendering:

Use TensorFlow.js with a style transfer model.
Or connect to an API that returns stylized images.

🛠️ Real-World Use Cases

This web app is a great learning project and can also be expanded into:

An artistic photo editor
A social media post generator
A Ghibli-themed gallery tool
A children’s photo filter app

🚀 Deployment

You can host your app on:

GitHub Pages (free)
Netlify (drag and drop)
Vercel (automatic from repo)

All files (HTML, CSS, JS) can be zipped or pushed to a repository.

🔚 Final Thoughts

Studio Ghibli has captured hearts for decades, and their signature style is one many admire. While replicating it perfectly requires artistic nuance or AI models, the filter we built gives a satisfying approximation using just web technologies.

This project is:

✅ Beginner-friendly
✅ Customizable
✅ A great intro to canvas and image manipulation

💡 Next Steps

Want to take it further?

Add more filters (black & white, neon, retro)
Use WebGL for GPU-accelerated effects
Connect with Web APIs for style transfer
Add animation or transitions on canvas

By diving into image processing, you'll unlock endless creative potential on the web.

winscoder

Search This Blog