Сначала необходимо очистить холст, а затем перерисовать изображение.
Вы можете очистить холст, выполнив следующие действия:
ctx.clearRect(0, 0, canvas.width, canvas.height);
Вы можете добавить эту строку в начале вашей функции resetPoint().
Теперь, когда вы хотите сохранить изображение, вам нужно сохранить загруженный файл изображения где-нибудь, чтобы вы могли перерисовать его. Я предлагаю сделать переменную вне вашей resetPoint() функции:
var files;
и затем в начале вашей функции resetPoint() добавьте:
files = this.file
Также измените все ссылки на this.files на файлы.
Рабочий фрагмент приведен ниже:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style type="text/css">
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<h2>Title
<p id="demo"></p>
</h2>
<div class="card">
<div class="card-header">
<input type='file' id="fileUpload"/>
<button type="button" class="btn btn-secondary" id="resetButton" onclick="resetPoint()">Reset</button>
</div>
<div class="card-body">
<canvas id="canvas" width="500px" height="500px"></canvas>
</div>
<div class="card-footer">Footer</div>
</div>
<script>
var fileUpload = document.getElementById('fileUpload');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var files; // Add this
var img = new Image();
function readImage() {
files = this.files; // Set a reference to this.files (the image)
if (files && files[0] ) { // Update this line to only reference the files variable
var percorso = files[0]; // And this line
var FR= new FileReader();
FR.onload = function(e) {
img.src = e.target.result;
img.onload = function() {
ctx.drawImage(img, 0, 0,500,500);
};
};
FR.readAsDataURL( files[0] ); // And this line
}
}
fileUpload.onchange = readImage;
var coordinate=[];
canvas.onclick = function(e) {
if (coordinate.length < 4) {
var x = e.offsetX;
var y = e.offsetY;
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.arc(x, y, 3, 0, Math.PI * 2);
ctx.fill();
ctx.font="25px Arial";
ctx.fillText(coordinate.length+1,x+2, y+2);
var coordinataN=[x,y];
coordinate.push(coordinataN);
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coords;
}
};
function resetPoint() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
readImage()
coordinate.length = 0;
alert("Points deleted");
}
</script>
</body>
</html>