| Current File : /home/users/barii/public_html/finansenl.com.pl/wodki/admin/imienniki/imienniki.php |
<?php
include('../config.php');
// Przetwarzanie przesłanego pliku
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$coords = $_POST['coords'];
$target_dir = "../downloads/imienniki/";
$target_file = $target_dir . basename($_FILES["imageLoader"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
// Sprawdź, czy plik to obrazek
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["imageLoader"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// Zapisz obrazek w folderze "uploads"
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
} else {
if (move_uploaded_file($_FILES["imageLoader"]["tmp_name"], $target_file)) {
echo "The file ". htmlspecialchars(basename($_FILES["imageLoader"]["name"])). " has been uploaded.";
$id = $mysql->sqlInsertArray('imienniki_wzory', ['plik' => $target_file, 'cord_x' => $_POST['the_x'], 'cord_y' => $_POST['the_y'], 'cord_width' => $_POST['the_width'], 'cord_height' => $_POST['the_height']], true);
if ($id > 0) {
echo 'Pomyślnie dodano!';
}
} else {
echo "Sorry, there was an error uploading your file.";
}
}
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zaznaczanie obszaru na obrazku</title>
<style>
#canvas-wrapper {
position: relative;
flex-wrap: wrap;
}
h2 {
width: 100%;
display: flex;
}
canvas {
width: 100%;
height: 100%;
border: 1px solid black;
}
#coords {
margin-top: 10px;
width: 600px;
}
#canvas-wrapper2 {
width: 100%;
display: flex;
}
</style>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<input type="file" id="imageLoader" name="imageLoader" accept="image/*">
<input type="hidden" id="the_x" name="the_x" value="">
<input type="hidden" id="the_y" name="the_y" value="">
<input type="hidden" id="the_width" name="the_width" value="">
<input type="hidden" id="the_height" name="the_height" value="">
<div id="canvas-wrapper" style="display:none;">
<h2>Zaznacz pole do generowania:</h2>
<div id="canvas-wrapper2">
<canvas id="canvas"></canvas>
</div>
<button type="submit" id="submit_button" style="display: none;">Wyślij plik</button>
</form>
</body>
</html>
<script>
document.addEventListener('DOMContentLoaded', function () {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const the_x = document.getElementById('the_x');
const the_y = document.getElementById('the_y');
const the_width = document.getElementById('the_width');
const the_height = document.getElementById('the_height');
const imageLoader = document.getElementById('imageLoader');
let startX, startY, isDrawing = false;
let image = new Image();
imageLoader.addEventListener('change', function (e) {
const reader = new FileReader();
reader.onload = function (event) {
image.onload = function () {
// Set canvas dimensions
canvas.width = image.width;
canvas.height = image.height;
// Update style to match canvas dimensions for accurate rendering
canvas.style.width = image.width + 'px';
canvas.style.height = image.height + 'px';
ctx.drawImage(image, 0, 0, image.width, image.height);
};
image.src = event.target.result;
};
reader.readAsDataURL(e.target.files[0]);
const canvas_wrapper = document.getElementById('canvas-wrapper');
canvas_wrapper.style.display = 'flex';
});
function setRectangle(x, y, width, height) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, 0, 0, image.width, image.height);
ctx.beginPath();
ctx.rect(x, y, width, height);
ctx.strokeStyle = 'red'; // Making rectangle more visible
ctx.stroke();
}
canvas.addEventListener('mousedown', function(e) {
startX = e.offsetX;
startY = e.offsetY;
isDrawing = true;
});
canvas.addEventListener('mousemove', function(e) {
if (isDrawing) {
const width = e.offsetX - startX;
const height = e.offsetY - startY;
setRectangle(startX, startY, width, height);
}
});
canvas.addEventListener('mouseup', function(e) {
isDrawing = false;
const rectWidth = e.offsetX - startX;
const rectHeight = e.offsetY - startY;
the_x.value = startX;
the_y.value = startY;
the_width.value = rectWidth;
the_height.value = rectHeight;
const button = document.getElementById('submit_button');
button.style.display = 'flex';
});
});
</script>