AI Image Editor
About this app
An AI-powered image editor that can identify and remove lost pixels, enhance sharpness, and provide various editing features.
AI Image Editor AI Image Editor Number of Pixels to Identify: 1 2 3 4 5 6 7 8 9 10 Upload Image: Original Image Edited Image Colors Used Tools Undo Redo Zoom In Zoom Out Sharpness Manual Adjustment
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>AI Image Editor</title>
<meta name="description" content="An AI-powered image editor that can identify and remove lost pixels, enhance sharpness, and provide various editing features.">
<meta name="keywords" content="AI, image editor, lost pixels, sharpness, zoom, undo, redo, manual adjustment">
<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 {
document.addEventListener("DOMContentLoaded", function() {
// Constants
const MAX_PIXELS = 10;
// Variables
let image = null;
let editedImage = null;
let pixelCount = 1;
let colors = [];
// Event listeners
$("#pixel-count").on("change", function() {
pixelCount = parseInt($(this).val());
});
$("#upload-image").on("change", function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(event) {
$("#original-image").attr("src", event.target.result);
image = new Image();
image.src = event.target.result;
image.onload = function() {
updateEditedImage();
updateColors();
}
}
reader.readAsDataURL(file);
});
$("#undo-button").on("click", function() {
if (editedImage && editedImage.filters.length > 0) {
editedImage.filters.pop();
editedImage.applyFilters();
updateEditedImage();
}
});
$("#redo-button").on("click", function() {
if (editedImage && editedImage.undoneFilters.length > 0) {
const filter = editedImage.undoneFilters.pop();
editedImage.filters.push(filter);
editedImage.applyFilters();
updateEditedImage();
}
});
$("#zoom-in-button").on("click", function() {
if (editedImage) {
editedImage.scaleX *= 1.1;
editedImage.scaleY *= 1.1;
editedImage.applyFilters();
updateEditedImage();
}
});
$("#zoom-out-button").on("click", function() {
if (editedImage) {
editedImage.scaleX /= 1.1;
editedImage.scaleY /= 1.1;
editedImage.applyFilters();
updateEditedImage();
}
});
$("#sharpness-slider").on("input", function() {
const value = parseInt($(this).val());
if (editedImage) {
editedImage.filters.push(new fabric.Image.filters.Convolute({
matrix: [ 0, -1, 0, -1, 5, -1, 0, -1, 0 ],
opaque: true
}));
editedImage.applyFilters();
updateEditedImage();
}
});
$("#manual-adjustment-slider").on("input", function() {
const value = parseInt($(this).val());
if (editedImage) {
editedImage.filters.push(new fabric.Image.filters.Brightness({
brightness: value
}));
editedImage.applyFilters();
updateEditedImage();
}
});
// Functions
function updateEditedImage() {
if (image) {
const canvas = new fabric.Canvas("edited-image-canvas");
editedImage = new fabric.Image(image.getElement(), {
left: 0,
top: 0,
selectable: false
});
canvas.setWidth(editedImage.width);
canvas.setHeight(editedImage.height);
canvas.add(editedImage);
canvas.renderAll();
}
}
function updateColors() {
if (editedImage) {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = editedImage.width;
canvas.height = editedImage.height;
context.drawImage(editedImage._element, 0, 0);
const imageData = context.getImageData(0, 0, canvas.width, canvas.height).data;
const uniqueColors = new Set();
for (let i = 0; i < imageData.length; i += 4) {
const r = imageData[i];
const g = imageData[i + 1];
const b = imageData[i + 2];
const rgb = `${r},${g},${b}`;
uniqueColors.add(rgb);
}
colors = Array.from(uniqueColors);
$("#color-list").empty();
colors.forEach(color => {
const [r, g, b] = color.split(",");
const colorBox = `<div class="color-box" style="background-color: rgba(${r}, ${g}, ${b}, 1);"></div>`;
const colorText = `<span class="color-text">${color}</span>`;
const colorItem = `<li>${colorBox} ${colorText}</li>`;
$("#color-list").append(colorItem);
});
}
}
});
} catch (error) {
throw error;
}
</script>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 28px;
color: #333;
margin: 20px 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 20px;
}
.image-upload {
border: 2px dashed #ccc;
border-radius: 5px;
padding: 20px;
text-align: center;
cursor: pointer;
}
#original-image {
max-width: 100%;
margin-top: 20px;
}
#edited-image-canvas {
border: 2px solid #ccc;
margin-top: 20px;
}
.color-box {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.color-text {
vertical-align: middle;
}
.toolbar {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.toolbar .btn {
margin-right: 10px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>AI Image Editor</h1>
<div class="form-group">
<label for="pixel-count">Number of Pixels to Identify:</label>
<select id="pixel-count" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<label for="upload-image">Upload Image:</label>
<input type="file" id="upload-image" accept="image/*" class="form-control">
</div>
<h2>Original Image</h2>
<img id="original-image">
<h2>Edited Image</h2>
<canvas id="edited-image-canvas"></canvas>
<h2>Colors Used</h2>
<ul id="color-list"></ul>
<h2>Tools</h2>
<div class="toolbar">
<div>
<button id="undo-button" class="btn btn-primary" disabled><i class="fa fa-undo"></i> Undo</button>
<button id="redo-button" class="btn btn-primary" disabled><i class="fa fa-repeat"></i> Redo</button>
</div>
<div>
<button id="zoom-in-button" class="btn btn-primary" disabled><i class="fa fa-search-plus"></i> Zoom In</button>
<button id="zoom-out-button" class="btn btn-primary" disabled><i class="fa fa-search-minus"></i> Zoom Out</button>
</div>
</div>
<h2>Sharpness</h2>
<input type="range" id="sharpness-slider" min="0" max="100" value="0" class="form-range">
<h2>Manual Adjustment</h2>
<input type="range" id="manual-adjustment-slider" min="-100" max="100" value="0" class="form-range">
</div>
</body>
</html>
NEW APPS
These are apps made by the community!