Image Editor
About this app
An image editing app with magical pen and color effects.
Image Editor Image Editor Upload Image Magical Pen Color
Put this on your site
Related apps
VoiceSong Studio - Créez votre propre hit !
Baccara Suite Master - Prédiction 1xBet & Casino
Elite Baccarat - Professional Casino Experience
YTPMV Scan - Ultimate Meme Sequencer
YTPMV Scan - Ultimate Audio Visual Sequencer
Pro-Roulette 0-14 Predictor | Advanced Strategic Analytics
Twelve - The Ultimate 12-Step Daily Harmony Planner
Otter Python - Calc Runner Game
Harmony - Гид по здоровым отношениям и романтике
LoopTube 2016 - Infinite Video Looper & Repeater
VoxTransform - 50+ Pro Video Voice Effects
TinyTip | Simple Tip Calculator & Bill Splitter
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="An image editing app with magical pen and color effects.">
<meta name="keywords" content="image editor, photo editor, magical pen, color effects">
<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">
<link href="https://fonts.googleapis.com/css?family=Roboto" 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) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var img = document.getElementById("uploaded-image");
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
// Function to apply the magical pen effect
function applyMagicalPenEffect() {
var img = document.getElementById("uploaded-image");
img.style.filter = "sepia(100%)";
}
// Function to apply the color effect
function applyColorEffect() {
var img = document.getElementById("uploaded-image");
img.style.filter = "hue-rotate(90deg)";
}
// Event listener for image upload
var fileInput = document.getElementById("image-upload");
fileInput.addEventListener("change", handleImageUpload);
// Event listener for magical pen effect button
var magicalPenButton = document.getElementById("magical-pen-button");
magicalPenButton.addEventListener("click", applyMagicalPenEffect);
// Event listener for color effect button
var colorButton = document.getElementById("color-button");
colorButton.addEventListener("click", applyColorEffect);
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
font-family: 'Roboto', sans-serif;
background-color: #f1f1f1;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
h1 {
color: #333;
margin-bottom: 30px;
}
#image-upload {
display: none;
}
.upload-label {
display: inline-block;
padding: 10px 20px;
background-color: #333;
color: #fff;
font-size: 16px;
cursor: pointer;
}
#uploaded-image {
max-width: 100%;
margin-top: 30px;
filter: none;
transition: filter 0.5s ease-in-out;
}
.effect-buttons {
margin-top: 30px;
}
.effect-buttons button {
display: inline-block;
padding: 10px 20px;
margin-right: 10px;
background-color: #333;
color: #fff;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Image Editor</h1>
<input type="file" id="image-upload" accept="image/*">
<label for="image-upload" class="upload-label">Upload Image</label>
<img id="uploaded-image" src="" alt="Uploaded Image">
<div class="effect-buttons">
<button id="magical-pen-button">Magical Pen</button>
<button id="color-button">Color</button>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!