Мне нужно создать шаблон изображения, в котором пользователь определит и отметит / выделит / некоторые регионы. цель состоит в том, чтобы в следующий раз, когда пользователь загрузит подобное изображение, программа распознает его и автоматически выделит области, которые были определены в шаблоне.
это должно быть сделано как веб-приложение, поэтому я использую ASP. net core
Я думал загрузить изображение, сохранить его на холсте, а затем нарисовать прямоугольником мыши по областям и каким-то образом сохранять каждый раз, когда указатель мыши / координата прямоугольника на холсте и размер.
Загрузка файла с последующим отображением изображения (не в Canvas) работает отлично.
Но я понятия не имею, почему изображение не загружается в холст.
@{
ViewData["Title"] = "Home Page";
}
<script src="~/js/jquery-2.2.3.min.js"></script>
<form method="post" asp-controller="Home" asp-action="ImageUpload" enctype="multipart/form-data">
<div class="from-group row">
<label class="col-sm-2 col-form-label">Scan Datei </label>
<div class="col-sm-10">
<div class="custom-file">
<input class="from-control custom-file-input" type="file" name="file" onchange="LoadImagetoCanvas()" />
<label class="custom-file-label">Datei auswählen</label>
</div>
</div>
<button type="submit">Bild laden</button>
</div>
<img calss="custom-image" src="@ViewData["FileLocation"]" width="600" height="400" />
<canvas id="imageCanvas" height="740" width="1024" runat="server" style="border:2px solid black">
Your browser is not supporting HTML5 Canvas .Upgrade Browser to view this program or check with Chrome or in Firefox.
</canvas>
</form>
<script>
$(function () {
$(".custom-file-input").change(function (e) {
var file = e.target.files[0],
imageType = /image.*/;
if (!file.type.match(imageType))
return;
var reader = new FileReader();
reader.onload = fileOnload;
reader.readAsDataURL(file);
});
function fileOnload(e) {
var $img = $('<img>', { src: e.target.result });
$img.load(function () {
var canvas = $('#imageCanvas')[0];
var context = canvas.getContext('2d');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
context.drawImage(this, 0, 0);
});
}
});
</script>
и код c#:
public class HomeController : Controller
{
IHostingEnvironment _env;
public HomeController(IHostingEnvironment environment)
{
_env = environment;
}
public IActionResult Index()
{
return View();
}
public IActionResult Privacy()
{
return View();
}
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
public IActionResult Error()
{
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
[HttpPost]
public async Task<IActionResult> ImageUpload(IFormFile file)
{
if(file != null && file.Length>0)
{
string imagePath = @"\Upload\Images\";
string uploadPath = _env.WebRootPath + imagePath;
if(!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
string uniqFileName = Guid.NewGuid().ToString();
string filename = Path.GetFileName(uniqFileName+"."+file.FileName.Split(".")[1].ToLower());
string fullPath = uploadPath + filename;
imagePath = imagePath + @"\";
string filePath = @".." + Path.Combine(imagePath, filename);
using (FileStream fileStream = new FileStream(fullPath, FileMode.Create))
{
await file.CopyToAsync(fileStream);
}
ViewData["FileLocation"] = filePath;
}
return View("../Home/Index");
}
}
Я даже пытался добавить функцию Javascript и вызывать ее из части c#, но безуспешно, даже если При вызове функции кажется, что он не может найти мой Canvas:
script "text/javascript">
function LoadImagetoCanvas() {
var c = document.getElementById("imageCanvas")
var ctx = c.getContext("2d")
var imageObj = new Image()
//imageObj.src = @ViewData["FileLocation"]
imageObj.src = "./Uploads/Test.jpg"
imageObj.onload = () => {
ctx.drawImage(imageObj, 0, 0)
}
}
</script>
и в C#:
ScriptManager.RegisterStartupScript(this, GetType(), "LoadImagetoCanvas", "LoadImagetoCanvas()", true);