Round /circle image Generator / Image editor - Circle-Round Image editor -latest updated -download option -fit center-zoomin and zoom out option
Hello Friends
Round Image Editor
![Preview Image]()
.png)
Round Image Editor
Drag to move the image. Scroll or pinch to resize.
.png)
code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Round Image Editor</title>
<style>
/* General styles */
body {
font-family: 'Arial', sans-serif;
background-color: #f0f4f7;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 400px;
width: 100%;
margin: auto;
}
h2 {
margin-bottom: 20px;
color: #333;
font-size: 22px;
}
/* Round Image Preview */
.round-image {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
margin: 20px auto;
background-color: #ddd;
position: relative;
border: 4px solid #4CAF50;
}
.round-image img {
position: absolute;
top: 0;
left: 0;
width: 300px; /* Default size */
height: auto;
cursor: grab;
touch-action: none; /* Prevent default touch events */
}
/* Instructions text */
.instructions {
font-size: 14px;
color: #555;
margin-bottom: 20px;
}
/* Buttons */
input[type="file"], button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px auto;
font-size: 16px;
display: block;
width: 100%;
}
input[type="file"]:hover, button:hover {
background-color: #45a049;
}
button {
background-color: #0069d9;
}
button:hover {
background-color: #0056b3;
}
canvas {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h2>Round Image Editor</h2>
<!-- Round Image Preview -->
<div class="round-image" id="imageContainer">
<img id="preview" src="" alt="Preview Image" />
</div>
<!-- Instructions for users -->
<div class="instructions">
<p>Drag to move the image. Scroll or pinch to resize.</p>
</div>
<!-- Upload Button -->
<input type="file" id="upload" accept="image/*" />
<!-- Download Button -->
<button onclick="downloadImage()">Download Image</button>
</div>
<canvas id="canvas"></canvas>
<script>
let isDragging = false;
let startX, startY;
let pinchStartDistance = 0; // For pinch zoom
let currentWidth = 300; // Default image width
let minWidth = 50; // Minimum width for image
let maxWidth = 800; // Maximum width for image
const image = document.getElementById('preview');
const imageContainer = document.getElementById('imageContainer');
const canvas = document.getElementById('canvas');
// Load Image Function
document.getElementById('upload').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
image.src = e.target.result;
image.onload = function() {
image.style.top = '0px';
image.style.left = '0px';
currentWidth = 300; // Reset size to default
image.style.width = currentWidth + 'px';
}
};
reader.readAsDataURL(file);
}
});
// Mouse and Touch Dragging for both desktop and mobile
const startDrag = function (e) {
isDragging = true;
startX = (e.touches ? e.touches[0].clientX : e.clientX) - image.offsetLeft;
startY = (e.touches ? e.touches[0].clientY : e.clientY) - image.offsetTop;
image.style.cursor = 'grabbing';
};
const duringDrag = function (e) {
if (isDragging) {
const x = (e.touches ? e.touches[0].clientX : e.clientX) - startX;
const y = (e.touches ? e.touches[0].clientY : e.clientY) - startY;
image.style.left = x + 'px';
image.style.top = y + 'px';
}
};
const stopDrag = function () {
isDragging = false;
image.style.cursor = 'grab';
};
imageContainer.addEventListener('mousedown', startDrag);
imageContainer.addEventListener('mousemove', duringDrag);
imageContainer.addEventListener('mouseup', stopDrag);
imageContainer.addEventListener('mouseleave', stopDrag);
// Touch Dragging for mobile
imageContainer.addEventListener('touchstart', startDrag);
imageContainer.addEventListener('touchmove', duringDrag);
imageContainer.addEventListener('touchend', stopDrag);
// Mouse Scroll to Resize on Desktop
imageContainer.addEventListener('wheel', function (e) {
e.preventDefault();
currentWidth += e.deltaY < 0 ? 10 : -10;
if (currentWidth > minWidth && currentWidth < maxWidth) {
image.style.width = currentWidth + 'px';
}
});
// Pinch to Zoom for Mobile Devices
imageContainer.addEventListener('touchmove', function (e) {
if (e.touches.length === 2) {
e.preventDefault();
const distance = Math.sqrt(
Math.pow(e.touches[1].clientX - e.touches[0].clientX, 2) +
Math.pow(e.touches[1].clientY - e.touches[0].clientY, 2)
);
if (pinchStartDistance === 0) {
pinchStartDistance = distance;
} else {
const scaleFactor = distance / pinchStartDistance;
const newWidth = currentWidth * scaleFactor;
if (newWidth > minWidth && newWidth < maxWidth) {
currentWidth = newWidth;
image.style.width = currentWidth + 'px';
}
}
}
});
imageContainer.addEventListener('touchend', function () {
pinchStartDistance = 0;
});
// Download the adjusted image
function downloadImage() {
// Set canvas size to the round image size
canvas.width = 200;
canvas.height = 200;
const ctx = canvas.getContext('2d');
// Draw the adjusted image onto the canvas
const imgX = parseInt(image.style.left || 0, 10);
const imgY = parseInt(image.style.top || 0, 10);
const imgWidth = image.offsetWidth; // Use the current width after resizing
ctx.beginPath();
ctx.arc(100, 100, 100, 0, 2 * Math.PI);
ctx.clip(); // Clip to a circle
ctx.drawImage(image, imgX, imgY, imgWidth, imgWidth * image.naturalHeight / image.naturalWidth);
// Download the canvas as an image
const link = document.createElement('a');
link.download = 'round-image.png';
link.href = canvas.toDataURL('image/png');
link.click();
}
</script>
</body>
</html>
Comments
Post a Comment