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();
})();