PixelPlace Image Overlayer

Place images on pixelplace.io
换行
// ==UserScript==
// @name         PixelPlace Image Overlayer
// @namespace    http://tampermonkey.net/
// @version      v3
// @description  Place images on pixelplace.io
// @author       Ghost
// @match        https://pixelplace.io/*
// @grant        none
// ==/UserScript==
 
(function() {
    'use strict';
 
    let image = document.createElement('img');
    image.style.position = 'absolute';
    image.style.opacity = '0.5'; // 50% transparent by default
    let imageSize = 100; // Initial image size
    let imageUrl = ''; // URL for image
    let originalImageUrl = ''; // Original URL for image
    let locked = false; // Image lock state
    let lockImageUrl = 'https://i.imgur.com/RmYtAGW.jpg'; // URL for lock image
    let copyrightElement = document.getElementById('copyright');
 
    // Create buttons for resizing and uploading images
    let uploadButton = createButton('Upload Image', '150px', '10%', '-50%', 'translateY(-50%)');
    let biggerButton = createButton('Bigger', '150px', '25%', '-50%', 'translateY(-50%)');
    let smallerButton = createButton('Smaller', '150px', '40%', '-50%', 'translateY(-50%)');
    let lockButton = createButton('Lock Image', '150px', '55%', '-50%', 'translateY(-50%)');
    // Create opacity slider
    let opacitySlider = createSlider('Opacity', '150px', '70%', '-50%', 'translateY(-50%)');
 
    // Create menu button
    let menuButton = createButton('Menu', '80px', '5%', '-50%', 'translateY(-50%)');
    menuButton.style.display = ''; // Ensure menu button is visible initially
 
    // Function to create a button
    function createButton(text, width, top, topTranslation, transform) {
        let button = document.createElement('button');
        button.textContent = text;
        button.style.position = 'fixed';
        button.style.left = '50%';
        button.style.transform = 'translateX(-50%) ' + transform; // Center horizontally
        button.style.width = width;
        button.style.top = top;
        button.style.display = 'none'; // Initially invisible
        // Adding rainbow outline to the buttons
        button.style.outline = '3px solid transparent';
        button.style.outlineOffset = '-3px';
        button.style.animation = 'rainbow 2s infinite';
        document.body.appendChild(button);
        return button;
    }
 
    // Function to create a slider
    function createSlider(text, width, top, topTranslation, transform) {
        let label = document.createElement('label');
        label.textContent = text;
        label.style.position = 'fixed';
        label.style.left = '50%';
        label.style.transform = 'translateX(-50%) ' + transform; // Center horizontally
        label.style.width = width;
        label.style.top = top;
        label.style.display = 'none'; // Initially invisible
 
        let slider = document.createElement('input');
        slider.type = 'range';
        slider.min = '0';
        slider.max = '100';
        slider.value = '50'; // Starting at 50% opacity
        slider.style.width = '100%';
        slider.style.position = 'absolute';
        slider.style.left = '0';
        slider.style.top = '20px'; // Position below the label
        slider.style.outline = '1px solid blue'; // Adding outline to the slider
        slider.style.display = 'none'; // Initially invisible
 
        label.appendChild(slider);
        document.body.appendChild(label);
 
        return slider;
    }
 
    // Function to toggle the visibility of other buttons
    function toggleMenu() {
        let buttons = [uploadButton, biggerButton, smallerButton, lockButton, opacitySlider];
        for (let button of buttons) {
            button.style.display = button.style.display === 'none' ? '' : 'none';
        }
        opacitySlider.parentNode.style.display = opacitySlider.parentNode.style.display === 'none' ? '' : 'none';
    }
 
    // Event listener for menu button
    menuButton.addEventListener('click', toggleMenu);
 
    // Function to place the image at the clicked position
    function placeImage(event) {
        if (!locked && imageUrl) {
            const x = event.clientX + window.scrollX;
            const y = event.clientY + window.scrollY;
            image.src = imageUrl;
            image.style.left = x + 'px';
            image.style.top = y + 'px';
            image.style.width = imageSize + 'px';
            // Adding rainbow outline to the submitted image
            image.style.outline = '3px solid transparent';
            image.style.outlineOffset = '-3px';
            image.style.boxShadow = '0 0 0 3px white inset'; // Adding white inset outline
            image.style.animation = 'rainbow 2s infinite';
            document.body.appendChild(image);
        }
    }
 
    // Function to toggle image lock
    function toggleLock() {
        locked = !locked;
        if (!locked) {
            image.src = originalImageUrl; // Restore original image when unlocked
        }
        updateOpacity(); // Update opacity only if the image is not locked
        updateCopyright();
    }
 
    // Function to update the opacity based on lock state and slider
    function updateOpacity() {
        if (!locked) {
            let opacityValue = opacitySlider.value;
            image.style.opacity = opacityValue / 100; // Convert to 0-1 range for CSS
        }
    }
 
    // Function to update the text in the copyright element
    function updateCopyright() {
        if (locked) {
            copyrightElement.textContent = 'Image Locked';
            copyrightElement.style.color = 'red';
        } else {
            copyrightElement.textContent = 'Image Not Locked';
            copyrightElement.style.color = 'green';
        }
    }
 
    // Event listener for mouse click to place the image
    document.addEventListener('click', placeImage);
 
    // Event listener for resizing the image bigger
    biggerButton.addEventListener('click', function() {
        imageSize += 10;
        image.style.width = imageSize + 'px';
    });
 
    // Event listener for resizing the image smaller
    smallerButton.addEventListener('click', function() {
        if (imageSize > 10) {
            imageSize -= 10;
            image.style.width = imageSize + 'px';
        }
    });
 
    // Event listener for uploading an image
    uploadButton.addEventListener('click', function() {
        const fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.accept = 'image/*';
        fileInput.addEventListener('change', function() {
            const file = fileInput.files[0];
            const reader = new FileReader();
            reader.onload = function(e) {
                imageUrl = e.target.result;
                originalImageUrl = imageUrl; // Store original image URL
                if (!locked && imageUrl) {
                    image.src = imageUrl;
                    image.style.width = imageSize + 'px';
                }
            };
            reader.readAsDataURL(file);
        });
        fileInput.click();
    });
 
    // Event listener for locking/unlocking the image
    lockButton.addEventListener('click', toggleLock);
 
    // Event listener for the opacity slider
    opacitySlider.addEventListener('input', function() {
        updateOpacity(); // Adjust opacity in real-time
    });
 
    // Event listener for keyboard controls
    document.addEventListener('keydown', function(event) {
        // Down arrow key: Toggle image lock
        if (event.key === 'ArrowDown') {
            toggleLock();
        }
    });
 
    // Prevent interactions with elements behind the image
    image.addEventListener('mousedown', function(event) {
        event.stopPropagation();
    });
 
    // Ensure mouse events pass through the image
    image.style.pointerEvents = 'none';
 
    // Initialize the copyright text
    updateCopyright();
})();
欢迎访问Greasy Fork镜像
