This code offers a simple demonstration of using an HTML canvas to create item removal masks. It's a basic illustration of the concept and may not be suitable for all use cases without further development. You are under no obligation to use this particular code; it's provided solely for educational purposes and to aid in understanding the fundamental principles involved in interactive mask creation. Consider it a starting point for your own implementations, which can be tailored to meet specific project requirements.
Copy <!DOCTYPE html>
<html>
<head>
<title>Item Removal Mask</title>
<style>
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Item Removal Mask</h1>
<canvas id="canvas"></canvas>
<br>
<label for="brushSize">Brush Size:</label>
<select id="brushSize">
<option value="0.2">20%</option>
<option value="0.5">50%</option>
<option value="0.7">70%</option>
<option value="1.0" selected>100%</option>
</select>
<button id="exportButton">Export Mask</button>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const exportButton = document.getElementById('exportButton');
const brushSizeSelect = document.getElementById('brushSize');
let image = new Image();
let drawing = false;
const brushColor = '#7878CD';
let currentBrushSize = 1.0;
const imageUrl = 'https://s3.amazonaws.com:443/aihomedesign/service/626c5023-27bf-40a4-b3de-45948a67694b.jpg';
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0, image.width, image.height);
};
image.src = imageUrl;
brushSizeSelect.addEventListener('change', function() {
currentBrushSize = parseFloat(brushSizeSelect.value);
});
canvas.addEventListener('mousedown', function(e) {
drawing = true;
draw(e);
});
canvas.addEventListener('mouseup', function() {
drawing = false;
ctx.beginPath();
});
canvas.addEventListener('mouseout', function() {
drawing = false;
ctx.beginPath();
});
canvas.addEventListener('mousemove', function(e) {
if (!drawing) return;
draw(e);
});
function draw(e) {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const baseBrushSize = Math.min(canvas.width, canvas.height) / 20;
ctx.lineWidth = baseBrushSize * currentBrushSize;
ctx.lineCap = 'round';
ctx.strokeStyle = brushColor;
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}
exportButton.addEventListener('click', function() {
const maskDataURL = canvas.toDataURL('image/png');
let link = document.createElement('a');
link.href = maskDataURL;
link.download = 'mask.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
</script>
</body>
</html> 