Image Editor
About this app
The most famous image editor in the world.
Image Editor Image Editor Upload Image Magic Pen Colorful Negative Pop Art Positive Reset Effects
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Image Editor</title>
<meta name="description" content="The most famous image editor in the world.">
<meta name="keywords" content="image editor, photo editor, magic pen, colorful, negative, pop art, positive, JunyTony, BabyShark">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
// Function to handle image upload
function handleImageUpload(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
const imageSrc = e.target.result;
// Render the uploaded image
renderImage(imageSrc);
}
reader.readAsDataURL(file);
}
// Function to render the uploaded image
function renderImage(imageSrc) {
const imageContainer = document.getElementById('image-container');
const imageElement = document.createElement('img');
imageElement.src = imageSrc;
imageContainer.innerHTML = '';
imageContainer.appendChild(imageElement);
}
// Event listener for image upload
const imageInput = document.getElementById('image-input');
imageInput.addEventListener('change', handleImageUpload);
// Function to apply magic pen effect
function applyMagicPenEffect() {
const imageElement = document.getElementById('image-container').querySelector('img');
imageElement.classList.add('magic-pen-effect');
}
// Function to apply colorful effect
function applyColorfulEffect() {
const imageElement = document.getElementById('image-container').querySelector('img');
imageElement.classList.add('colorful-effect');
}
// Function to apply negative effect
function applyNegativeEffect() {
const imageElement = document.getElementById('image-container').querySelector('img');
imageElement.classList.add('negative-effect');
}
// Function to apply pop art effect
function applyPopArtEffect() {
const imageElement = document.getElementById('image-container').querySelector('img');
imageElement.classList.add('pop-art-effect');
}
// Function to apply positive effect
function applyPositiveEffect() {
const imageElement = document.getElementById('image-container').querySelector('img');
imageElement.classList.add('positive-effect');
}
// Function to reset all effects
function resetEffects() {
const imageElement = document.getElementById('image-container').querySelector('img');
imageElement.classList.remove('magic-pen-effect', 'colorful-effect', 'negative-effect', 'pop-art-effect', 'positive-effect');
}
// Event listener for magic pen button
const magicPenButton = document.getElementById('magic-pen-button');
magicPenButton.addEventListener('click', applyMagicPenEffect);
// Event listener for colorful button
const colorfulButton = document.getElementById('colorful-button');
colorfulButton.addEventListener('click', applyColorfulEffect);
// Event listener for negative button
const negativeButton = document.getElementById('negative-button');
negativeButton.addEventListener('click', applyNegativeEffect);
// Event listener for pop art button
const popArtButton = document.getElementById('pop-art-button');
popArtButton.addEventListener('click', applyPopArtEffect);
// Event listener for positive button
const positiveButton = document.getElementById('positive-button');
positiveButton.addEventListener('click', applyPositiveEffect);
// Event listener for reset button
const resetButton = document.getElementById('reset-button');
resetButton.addEventListener('click', resetEffects);
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
font-family: 'Arial', sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
.upload-container {
margin-bottom: 20px;
}
.upload-container input[type="file"] {
display: none;
}
.upload-container label {
display: block;
padding: 10px 20px;
background-color: #333;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
.image-container {
margin-bottom: 20px;
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.effect-buttons {
margin-bottom: 20px;
}
.effect-buttons button {
margin-right: 10px;
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.reset-button {
margin-bottom: 20px;
}
.reset-button button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.magic-pen-effect {
filter: contrast(200%) saturate(200%);
}
.colorful-effect {
filter: sepia(100%) hue-rotate(100deg);
}
.negative-effect {
filter: invert(100%);
}
.pop-art-effect {
filter: brightness(150%) contrast(150%) saturate(100%);
}
.positive-effect {
filter: contrast(150%) saturate(150%);
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Image Editor</h1>
<div class="upload-container">
<input type="file" id="image-input" accept="image/*">
<label for="image-input">Upload Image</label>
</div>
<div class="image-container" id="image-container"></div>
<div class="effect-buttons">
<button id="magic-pen-button">Magic Pen</button>
<button id="colorful-button">Colorful</button>
<button id="negative-button">Negative</button>
<button id="pop-art-button">Pop Art</button>
<button id="positive-button">Positive</button>
</div>
<div class="reset-button">
<button id="reset-button">Reset Effects</button>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!