Pixel Fruit Generator
About this app
Generate pixel art fruit images with custom pixel size.
Pixelizar imagen Pixelizar imagen Tamaño del pixel: Tamaño de la imagen: Pixelizar Pantalla completa Descargar
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pixelizar imagen</title>
<meta name="description" content="Pixeliza una imagen con este sencillo generador.">
<meta name="keywords" content="pixelizar, imagen, generador">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
text-align: center;
}
h1 {
color: #ff4081;
margin-top: 50px;
}
.container {
margin-top: 50px;
}
.image-container {
display: flex;
justify-content: center;
margin-top: 30px;
}
.controls {
display: flex;
justify-content: center;
margin-top: 20px;
}
.control-input {
margin: 0 10px;
}
.pixelate-btn {
background-color: #ff4081;
color: white;
font-size: 18px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.pixelate-btn:hover {
background-color: #e91e63;
}
.fullscreen-btn {
background-color: #008CBA;
color: white;
font-size: 18px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.fullscreen-btn:hover {
background-color: #004C8C;
}
.preview-container {
display: flex;
justify-content: center;
margin-top: 30px;
}
.preview-image {
width: 500px;
height: auto;
image-rendering: pixelated;
outline: 2px solid black;
}
</style>
</head>
<body>
<h1>Pixelizar imagen</h1>
<div class="container">
<input type="file" id="image-input" accept="image/*">
<div class="controls">
<label for="pixel-size">Tamaño del pixel:</label>
<input type="number" id="pixel-size" class="control-input" min="1" value="10">
<label for="image-size">Tamaño de la imagen:</label>
<input type="number" id="image-size" class="control-input" min="100" value="500">
</div>
<button class="pixelate-btn" onclick="pixelateImage()">Pixelizar</button>
<button class="fullscreen-btn" onclick="openFullscreen()">Pantalla completa</button>
<a id="download-link" href="#" download="pixelated_image.png" style="display: none;">Descargar</a>
</div>
<div class="image-container">
<canvas id="pixelated-canvas"></canvas>
</div>
<div class="preview-container">
<img id="preview-image" class="preview-image" src="" alt="Vista previa">
</div>
<script>
function pixelateImage() {
const imageInput = document.getElementById('image-input');
const pixelatedCanvas = document.getElementById('pixelated-canvas');
const downloadLink = document.getElementById('download-link');
const previewImage = document.getElementById('preview-image');
const file = imageInput.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const image = new Image();
image.onload = function() {
const pixelSize = parseInt(document.getElementById('pixel-size').value);
const imageSize = parseInt(document.getElementById('image-size').value);
const width = image.width;
const height = image.height;
const ratio = width / height;
let canvasWidth, canvasHeight;
if (width > height) {
canvasWidth = imageSize;
canvasHeight = imageSize / ratio;
} else {
canvasHeight = imageSize;
canvasWidth = imageSize * ratio;
}
pixelatedCanvas.width = canvasWidth;
pixelatedCanvas.height = canvasHeight;
const context = pixelatedCanvas.getContext('2d');
context.drawImage(image, 0, 0, canvasWidth, canvasHeight);
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
context.drawImage(pixelatedCanvas, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth / pixelSize, canvasHeight / pixelSize);
const dataURL = pixelatedCanvas.toDataURL();
downloadLink.href = dataURL;
downloadLink.style.display = 'inline-block';
previewImage.src = dataURL;
};
image.src = event.target.result;
};
reader.readAsDataURL(file);
}
function openFullscreen() {
const previewImage = document.getElementById('preview-image');
if (previewImage.requestFullscreen) {
previewImage.requestFullscreen();
} else if (previewImage.mozRequestFullScreen) { // Firefox
previewImage.mozRequestFullScreen();
} else if (previewImage.webkitRequestFullscreen) { // Chrome, Safari and Opera
previewImage.webkitRequestFullscreen();
} else if (previewImage.msRequestFullscreen) { // IE/Edge
previewImage.msRequestFullscreen();
}
}
</script>
</body>
</html>
NEW APPS
These are apps made by the community!