news media journalism

documentation technical

adult content

government public service

technology software

English

Domain 'tekstoverlay-1-q7st0h5a3n.edgeone.app' uses the application-focused generic top-level domain (.app); it also runs on subdomain 'tekstoverlay-1-q7st0h5a3n'. Count 7 characters in 'edgeone' with 4 vowels and three consonants. Splitting it apart reveals two words: edge, one. Median word length comes out to 3.5 characters. No strong language cues emerged from the frequency lists.

html/66/d0/66d03c1b-2091-4e1a-82a8-fde9533419a5.html.gz

bb0442d69a4d4673320f689bc6e16c05a0e3f16ccfbf551f394d90a7e7cfc772

d0e3ddffe9a292d7ef00ad3d328c8f0416e820e813d9687057b01a80efce1e43

viewport

html/66/d0/66d03c1b-2091-4e1a-82a8-fde9533419a5_nodriver.html.gz

Pro Image Text Editor (Powered by Fabric.js)

Prudence Malinki

MarkMonitor Inc.

edgeone.app

IRT-SG-ACE

ACE administrator

ACE-SG


        // --- Initialisatie ---
        const fabricCanvas = new fabric.Canvas('canvas', {
            preserveObjectStacking: true, // Zorgt dat selectie niet automatisch naar de voorgrond komt
        });

        const imageInput = document.getElementById('imageInput');
        const addTextBtn = document.getElementById('addTextBtn');
        const downloadBtn = document.getElementById('downloadBtn');
        const layerList = document.getElementById('layer-list');
        const propertiesPanel = document.getElementById('properties-panel');

        // Context menu inputs
        const propTextContent = document.getElementById('text-content');
        const propFontFamily = document.getElementById('font-family');
        const propTextColor = document.getElementById('text-color');
        const propTextBgColor = document.getElementById('text-bgcolor');
        const propTextBgOpacity = document.getElementById('text-bgopacity');
        const propDeleteBtn = document.getElementById('delete-layer-btn');

        let backgroundImageObject = null;

        // --- STAP 1: Foto Inladen ---
        imageInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = (f) => {
                const data = f.target.result;
                fabric.Image.fromURL(data, (img) => {
                    // Schaal de afbeelding zodat deze in het hoofdvenster past, maar niet groter is dan oorspronkelijk
                    const maxW = window.innerWidth - 400;
                    const maxH = window.innerHeight - 100;
                    
                    let scale = 1;
                    if (img.width > maxW || img.height > maxH) {
                        scale = Math.min(maxW / img.width, maxH / img.height);
                    }

                    fabricCanvas.setWidth(img.width * scale);
                    fabricCanvas.setHeight(img.height * scale);

                    // Zet de afbeelding als achtergrond (niet selecteerbaar)
                    fabricCanvas.setBackgroundImage(img, fabricCanvas.renderAll.bind(fabricCanvas), {
                        scaleX: scale,
                        scaleY: scale,
                        originX: 'left',
                        originY: 'top'
                    });

                    backgroundImageObject = img;
                    addTextBtn.disabled = false; // Knop aanzetten
                    updateLayerList();
                });
            };
            reader.readAsDataURL(file);
        });

        // --- STAP 2: Tekst Toevoegen (fabric.IText voor dubbelklik-edit) ---
        addTextBtn.addEventListener('click', () => {
            const text = new fabric.IText('Dubbelklik mij', {
                left: fabricCanvas.width / 2,
                top: fabricCanvas.height / 2,
                fontFamily: 'Impact',
                fill: '#ffffff', // Tekstkleur
                backgroundColor: 'rgba(0,0,0,0.5)', // Standaard achtergrond
                fontSize: 40,
                originX: 'center',
                originY: 'center',
                cornerColor: varPrimaryColor(), // Geef hoekjes onze blauwe kleur
                cornerSize: 10,
                transparentCorners: false,
                borderColor: varPrimaryColor(),
                borderDashArray: [3, 3] // Stippellijntje
            });

            fabricCanvas.add(text);
            fabricCanvas.setActiveObject(text); // Direct selecteren
            updateLayerList();
        });

        // --- UI/UX: Lagenbeheer ---

        // Loop door alle objecten en update de lijst in de zijbalk
        function updateLayerList() {
            layerList.innerHTML = '';
            const objects = fabricCanvas.getObjects();
            
            // We loopen achterstevoren omdat fabric de volgorde van onder naar boven opslaat
            for (let i = objects.length - 1; i >= 0; i--) {
                const obj = objects[i];
                if (obj === backgroundImageObject) continue; // Achtergrond niet in lijst

                const li = document.createElement('li');
                li.className = 'layer-item';
                if (obj === fabricCanvas.getActiveObject()) li.classList.add('active');

                // Preview tekst
                const textPreview = document.createElement('span');
                textPreview.textContent = `T: "${obj.text.substring(0, 15)}${obj.text.length > 15 ? '...' : ''}"`;
                li.appendChild(textPreview);

                // Controls (omhoog/omlaag)
                const controls = document.createElement('div');
                controls.className = 'layer-controls';

                const btnUp = document.createElement('button');
                btnUp.innerHTML = '▲'; btnUp.className = 'layer-btn';
                btnUp.onclick = (e) => { e.stopPropagation(); moveLayer(obj, 'up'); };
                
                const btnDown = document.createElement('button');
                btnDown.innerHTML = '▼'; btnDown.className = 'layer-btn';
                btnDown.onclick = (e) => { e.stopPropagation(); moveLayer(obj, 'down'); };

                controls.appendChild(btnUp);
                controls.appendChild(btnDown);
                li.appendChild(controls);

                // Klik op laag in lijst = selecteer op canvas
                li.onclick = () => {
                    fabricCanvas.setActiveObject(obj);
                    fabricCanvas.renderAll();
                };

                layerList.appendChild(li);
            }
        }

        // Objecten verplaatsen in de stack
        function moveLayer(obj, direction) {
            if (direction === 'up') {
                fabricCanvas.bringForward(obj);
            } else {
                // Zorg dat we niet ónder de achtergrondfoto zakken (index 0 is achtergrond)
                const index = fabricCanvas.getObjects().indexOf(obj);
                if (index > 0) {
                    fabricCanvas.sendBackwards(obj);
                }
            }
            fabricCanvas.renderAll();
            updateLayerList();
        }

        // --- UI/UX: Contextueel Properties Paneel ---

        // Event: Als een object geselecteerd wordt
        fabricCanvas.on('selection:created', (e) => { showProperties(e.selected[0]); updateLayerList(); });
        fabricCanvas.on('selection:updated', (e) => { showProperties(e.selected[0]); updateLayerList(); });
        
        // Event: Als selectie weg is
        fabricCanvas.on('selection:cleared', () => { 
            propertiesPanel.classList.remove('active'); 
            updateLayerList(); 
        });

        // Event: Als IText wordt aangepast via dubbelklik
        fabricCanvas.on('text:changed', () => {
            const active = fabricCanvas.getActiveObject();
            if(active) propTextContent.value = active.text;
            updateLayerList();
        });

        function showProperties(obj) {
            if (obj.type !== 'i-text') {
                propertiesPanel.classList.remove('active');
                return;
            }

            // Vul waarden in paneel met waarden van het object
            propTextContent.value = obj.text;
            propFontFamily.value = obj.fontFamily;
            propTextColor.value = obj.fill;
            
            // Fabric slaat backgroundColor op als 'rgba(r,g,b,a)' of '#hex'. We moeten hex eruit vissen.
            if(obj.backgroundColor) {
                const colors = fabric.parseColor(obj.backgroundColor);
                // Kleur naar Hex omzetten voor input[type=color]
                const hex = `#${Math.round(colors[0]).toString(16).padStart(2, '0')}${Math.round(colors[1]).toString(16).padStart(2, '0')}${Math.round(colors[2]).toString(16).padStart(2, '0')}`;
                propTextBgColor.value = hex;
                propTextBgOpacity.value = colors[3]; // Alpha
            } else {
                 propTextBgOpacity.value = 0;
            }

            propertiesPanel.classList.add('active');
        }

        // --- Eigenschappen Live Toepassen ---
        function updateActiveObjectProp(prop, value) {
            const active = fabricCanvas.getActiveObject();
            if (!active) return;

            if (prop === 'backgroundColor') {
                // Achtergrond vereist RGBA combinatie
                const hex = propTextBgColor.value;
                const opacity = propTextBgOpacity.value;
                const rgba = fabric.util.hexToRgba(hex); // Werkt in v5 niet direct met alpha erin
                const colorArr = fabric.parseColor(rgba);
                active.set('backgroundColor', `rgba(${colorArr[0]},${colorArr[1]},${colorArr[2]},${opacity})`);
            } else {
                active.set(prop, value);
            }

            fabricCanvas.renderAll();
        }

        // Listeners voor inputs in het paneel
        propTextContent.addEventListener('input', (e) => updateActiveObjectProp('text', e.target.value));
        propFontFamily.addEventListener('change', (e) => updateActiveObjectProp('fontFamily', e.target.value));
        propTextColor.addEventListener('input', (e) => updateActiveObjectProp('fill', e.target.value));
        propTextBgColor.addEventListener('input', () => updateActiveObjectProp('backgroundColor', null));
        propTextBgOpacity.addEventListener('input', () => updateActiveObjectProp('backgroundColor', null));

        // Verwijderen knop in paneel
        propDeleteBtn.addEventListener('click', () => {
            const active = fabricCanvas.getActiveObject();
            if(active) {
                fabricCanvas.remove(active);
                fabricCanvas.discardActiveObject(); // Deselecteer
                fabricCanvas.renderAll();
                updateLayerList();
            }
        });

        // --- Download ---
        downloadBtn.addEventListener('click', () => {
            if (!backgroundImageObject) { alert("Voeg eerst een foto toe."); return; }
            
            // Deselecteer alles voor een schone export (geen stippellijnen)
            fabricCanvas.discardActiveObject();
            fabricCanvas.renderAll();

            const dataURL = fabricCanvas.toDataURL({
                format: 'png',
                quality: 1
            });

            const link = document.createElement('a');
            link.download = 'pro-editor-export.png';
            link.href = dataURL;
            link.click();
        });

        // Helper: krijg CSS variable kleur
        function varPrimaryColor() { return getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim(); }

    

Requests	IP Address	Location	AS Autonomous System
2	104.17.25.14	United States	AS139341
1	43.152.26.58	Singapore	AS139341ACE
3	2	-	-

Security Scan Report: tekstoverlay-1-q7st0h5a3n.edgeone.app

Summary

AI Security Verdict

Safe Website

Safety Factors

Details

Screenshot

Page Load Overview

Language Analysis

Primary Language

Detection Details

Website Classification

Primary Category

All Detected Categories

Detected Features

Domain & IP Information

Detected Technologies2

Content Similarity HashesFor malware variant detection

TLSH (Trend Micro Locality Sensitive Hash)

ssdeep (Context Triggered Piecewise Hashing)

sdhash (Similarity Digest Hashing)

Image Hashes

Perceptual Hashes

Other Hashes

Scan History