Please bookmark this page to avoid losing your image tool!

Image To Movie Scene Identifier

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
async function processImage(originalImg, databaseLabel = "Anime/Movie Open Database") {
    // Create the main container div
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.maxWidth = '600px';
    container.style.margin = '0 auto';
    container.style.padding = '20px';
    container.style.boxSizing = 'border-box';
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '12px';
    container.style.backgroundColor = '#fdfdfd';
    container.style.color = '#333';
    container.style.boxShadow = '0 4px 6px rgba(0,0,0,0.05)';

    // Title
    const title = document.createElement('h3');
    title.style.margin = '0 0 15px 0';
    title.style.color = '#111';
    title.style.display = 'flex';
    title.style.alignItems = 'center';
    title.style.gap = '8px';
    title.innerHTML = '🎬 <span>Movie Scene Identifier</span>';
    container.appendChild(title);

    // Image Preview
    const imgPreview = document.createElement('img');
    imgPreview.src = originalImg.src;
    imgPreview.style.width = '100%';
    imgPreview.style.maxHeight = '300px';
    imgPreview.style.borderRadius = '8px';
    imgPreview.style.objectFit = 'contain';
    imgPreview.style.backgroundColor = '#111';
    imgPreview.style.display = 'block';
    imgPreview.style.margin = '0 auto 20px auto';
    container.appendChild(imgPreview);

    // Loading State
    const loadingDiv = document.createElement('div');
    loadingDiv.style.display = 'flex';
    loadingDiv.style.alignItems = 'center';
    loadingDiv.style.justifyContent = 'center';
    loadingDiv.style.gap = '10px';
    loadingDiv.style.padding = '20px';
    loadingDiv.style.backgroundColor = '#f0f4f8';
    loadingDiv.style.borderRadius = '8px';
    loadingDiv.style.color = '#005b9f';
    loadingDiv.style.fontWeight = '500';
    loadingDiv.innerHTML = `
        <div style="width: 24px; height: 24px; border: 3px solid #b3d4ec; border-top-color: #007bff; border-radius: 50%; animation: spinNode 1s linear infinite;"></div>
        <span>Searching ${databaseLabel} for matches...</span>
        <style>
            @keyframes spinNode { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        </style>
    `;
    container.appendChild(loadingDiv);

    // Result Container
    const resultDiv = document.createElement('div');
    resultDiv.style.display = 'none';
    resultDiv.style.backgroundColor = '#fff';
    resultDiv.style.padding = '20px';
    resultDiv.style.borderRadius = '8px';
    resultDiv.style.border = '1px solid #e0e0e0';
    resultDiv.style.boxShadow = '0 2px 4px rgba(0,0,0,0.02)';
    container.appendChild(resultDiv);

    // Helpers
    const formatTime = (seconds) => {
        const d = new Date(seconds * 1000);
        return d.toISOString().substring(11, 19); // Converts to HH:MM:SS
    };

    const getBlob = (img) => {
        return new Promise((resolve, reject) => {
            try {
                const canvas = document.createElement('canvas');
                // Downscale image if too large (api limits and performance)
                const MAX_DIM = 720;
                let width = img.width || img.naturalWidth;
                let height = img.height || img.naturalHeight;
                
                if (width > MAX_DIM || height > MAX_DIM) {
                    const ratio = Math.min(MAX_DIM / width, MAX_DIM / height);
                    width = Math.floor(width * ratio);
                    height = Math.floor(height * ratio);
                }
                
                canvas.width = width;
                canvas.height = height;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, width, height);

                canvas.toBlob((blob) => {
                    if (blob) resolve(blob);
                    else reject(new Error('Failed to extract image blob.'));
                }, 'image/jpeg', 0.85);
            } catch (e) {
                reject(new Error('CORS or security error. Ensure your image has appropriate Cross-Origin permissions.'));
            }
        });
    };

    // Main Identification Logic utilizing trace.moe public API
    const matchScene = async () => {
        try {
            const blob = await getBlob(originalImg);
            const formData = new FormData();
            formData.append('image', blob);

            const response = await fetch('https://api.trace.moe/search', {
                method: 'POST',
                body: formData
            });

            if (!response.ok) {
                if (response.status === 413) throw new Error('Image payload was too large.');
                if (response.status === 429) throw new Error('API Rate limit exceeded. Try again later.');
                throw new Error(`API Error: HTTP ${response.status}`);
            }

            const data = await response.json();
            
            loadingDiv.style.display = 'none';
            resultDiv.style.display = 'block';

            if (data && data.result && data.result.length > 0) {
                const bestMatch = data.result[0];
                const similarity = (bestMatch.similarity * 100).toFixed(1);
                
                // Low confidence match
                if (similarity < 75) {
                    resultDiv.innerHTML = `
                        <h4 style="margin: 0 0 10px 0; color: #d35400;">⚠️ No Confident Match</h4>
                        <p style="margin: 0; font-size: 14px; line-height: 1.5;">
                            The highest visual match is only <strong>${similarity}%</strong>. <br><br>
                            <em>Note: The current free active database excels primarily in Anime/Animated content and a limited set of movies. Traditional Hollywood live-action scenes might not be highly indexed.</em>
                        </p>
                    `;
                    return;
                }

                // High confidence match
                const episodeText = bestMatch.episode ? `#${bestMatch.episode}` : 'Movie / OVA';
                resultDiv.innerHTML = `
                    <h4 style="margin: 0 0 15px 0; color: #27ae60; border-bottom: 2px solid #ecfdf3; padding-bottom: 8px;">✅ Highly Confident Match</h4>
                    <div style="font-size: 14px; line-height: 1.6;">
                        <p style="margin: 0 0 8px 0;"><strong>🎬 Title / Source Path:</strong> <br> ${bestMatch.filename || bestMatch.anilist}</p>
                        <p style="margin: 0 0 8px 0;"><strong>📺 Episode:</strong> ${episodeText}</p>
                        <p style="margin: 0 0 8px 0;"><strong>⏱️ Timestamp:</strong> ${formatTime(bestMatch.from)} - ${formatTime(bestMatch.to)}</p>
                        <p style="margin: 0 0 15px 0;"><strong>🎯 Similarity:</strong> <span style="background: #e8f5e9; color: #2e7d32; padding: 2px 6px; border-radius: 4px; font-weight: bold;">${similarity}%</span></p>
                    </div>
                `;

                // Add API video preview if available
                if (bestMatch.video) {
                    const vidTitle = document.createElement('p');
                    vidTitle.style.margin = '20px 0 8px 0';
                    vidTitle.style.fontWeight = '600';
                    vidTitle.style.fontSize = '14px';
                    vidTitle.textContent = 'Matched Scene Preview:';
                    resultDiv.appendChild(vidTitle);

                    const video = document.createElement('video');
                    video.src = bestMatch.video;
                    video.controls = true;
                    video.autoplay = true;
                    video.muted = true;
                    video.loop = true;
                    video.style.width = '100%';
                    video.style.borderRadius = '6px';
                    video.style.backgroundColor = '#222';
                    resultDiv.appendChild(video);
                }

            } else {
                resultDiv.innerHTML = `<p style="color: #555; margin: 0;">No matching scene could be found in the current indices.</p>`;
            }

        } catch (err) {
            loadingDiv.style.display = 'none';
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = `
                <h4 style="margin: 0 0 10px 0; color: #c0392b;">❌ Error Analyzing Scene</h4>
                <p style="margin: 0 0 10px 0; font-size: 14px;">${err.message}</p>
                <p style="margin: 0; font-size: 13px; color: #7f8c8d;">This tool uses external free endpoints which may be rate-limited or require unblocked network settings.</p>
            `;
        }
    };

    // Execution starts here.
    // Proceeding without awaiting keeps it asynchronous so the UI generates instantly.
    matchScene();

    return container;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image To Movie Scene Identifier is a specialized tool designed to help users identify the specific source of an image or screenshot from animated content, such as anime or movies. By analyzing an uploaded image, the tool searches extensive databases to find a match, providing details such as the title of the work, the specific episode number, and the exact timestamp within the video where the scene occurs. It also features a similarity score to indicate the confidence of the match and can provide a video preview of the identified scene. This tool is highly useful for fans looking to find the name of a specific show from a screenshot, researchers tracking animation sources, or anyone wanting to locate the exact moment a memorable scene takes place.

Leave a Reply

Your email address will not be published. Required fields are marked *

Other Image Tools:

Image To Movie Identifier

Image Based Website Interface SEO Finder Tool

Image To Emoji Converter

VHSRip VCR Style Black Color Image Filter

SEO Topic Search And Idea Generator Tool

Video Audio Track and Language Player and Downloader

Lab Website Icon Search and Topic Generator Tool

HIFI STEREO VHSRip Language Dubbing and Text Localization Tool

Image To Website Interface Address Extractor

Image Prompt Idea Generator and Tool Creator Studio

MP4 DVDRip Video and Photo Language Dubbing Translator Player

Music Audio Mp3 Song Lyric Extractor

Video Platform Audio Track and Language Localization Text Translator

Image Description Text Generator

Video Platform Audio Track and Localization Metadata Screenshot Tool

Video Audio Track and Language Translator Tool

Video and Audio Metadata and Format Information Extractor Tool

Video Platform Screenshot and Rip Effect Converter

YouTube Video Audio Track and Auto Dubbing Translator Player

YouTube Auto-Dubbing Multi-Language Audio Track Translator Tool

Video Platform Audio Track and Text Language Translator Tool

AI Video Language Dubbing and Translation Generator

Image To Movie Name and Film Title Extractor

Online Image Tools

Photo Face Mask Adder

YouTube Video To Image Frame Extractor

Image Translation and Language Tool

TV Logo Compilation Image Creator

Image Food Delivery Service Tool

Image To Target Language Dubbing Text Translator

Image Search Tools

Image and Video Player

Image Flip and Reverse Tool

Three Photo Mediateka

Image Description Identifier Tool

Two Photo Comparison Search Tool

See All →