Image Editor
About this app
Image Editor - Edit your images with magical pen, colorful, and negative effects
Image Editor Image Editor
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="Image Editor - Edit your images with magical pen, colorful, and negative effects">
<meta name="keywords" content="image editor, edit images, magical pen, colorful effect, negative effect">
<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 the image upload
function handleImageUpload() {
var input = document.getElementById("image-input");
var file = input.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
image.onload = function() {
// Create canvas element
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
// Apply magical pen effect
magicalPenEffect(ctx);
// Apply colorful effect
colorfulEffect(ctx);
// Apply negative effect
negativeEffect(ctx);
// Display the edited image
var editedImage = document.createElement("img");
editedImage.src = canvas.toDataURL();
editedImage.classList.add("img-fluid");
document.getElementById("image-container").appendChild(editedImage);
};
};
reader.readAsDataURL(file);
}
// Function to apply the magical pen effect
function magicalPenEffect(ctx) {
var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
var r = data[i];
var g = data[i + 1];
var b = data[i + 2];
// Apply magical pen effect by swapping red and blue channels
data[i] = b;
data[i + 2] = r;
}
ctx.putImageData(imageData, 0, 0);
}
// Function to apply the colorful effect
function colorfulEffect(ctx) {
var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
var r = data[i];
var g = data[i + 1];
var b = data[i + 2];
// Apply colorful effect by increasing the saturation
var hsv = rgbToHsv(r, g, b);
hsv[1] = 1;
var rgb = hsvToRgb(hsv[0], hsv[1], hsv[2]);
data[i] = rgb[0];
data[i + 1] = rgb[1];
data[i + 2] = rgb[2];
}
ctx.putImageData(imageData, 0, 0);
}
// Function to apply the negative effect
function negativeEffect(ctx) {
var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
var r = data[i];
var g = data[i + 1];
var b = data[i + 2];
// Apply negative effect by subtracting each channel from 255
data[i] = 255 - r;
data[i + 1] = 255 - g;
data[i + 2] = 255 - b;
}
ctx.putImageData(imageData, 0, 0);
}
// Helper function to convert RGB to HSV
function rgbToHsv(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, v = max;
var d = max - min;
s = max === 0 ? 0 : d / max;
if (max === min) {
h = 0; // achromatic
} else {
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, v];
}
// Helper function to convert HSV to RGB
function hsvToRgb(h, s, v) {
var r, g, b;
var i = Math.floor(h * 6);
var f = h * 6 - i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}
// Event listener for image upload
document.getElementById("image-input").addEventListener("change", handleImageUpload);
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
background-color: #f8f9fa;
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
.img-fluid {
max-width: 100%;
height: auto;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Image Editor</h1>
<div>
<input type="file" id="image-input">
</div>
<div id="image-container"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!