html5-canvas - 如何在.net core 2.1中保存画布图像

Question

我正在尝试通过在 ASP.NET Core 2.1 中将视频元素捕获到我的控制器方法来发送 javascript 画布 blob 图像。

我已成功捕获图像，并且从 captureimage 函数将 blob 传递给控制器​​，我正在使用以下代码：

从控制器操作方法我不知道如何保存图像。

感谢帮助。

          function captureimage(){

            var video = document.querySelector(videoId);
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas.getContext('2d').drawImage(video, 0, 0);
            //trigger the registered vall back with the blob
            canvas.toBlob(
              var formdata = new FormData();
            formdata.append("image", blob);

            return $.ajax({
                type: "POST",
                dataType: 'json',
                url: `Info/SaveImage',
                contentType: false,
                processData: false,
                data: formdata
              }).then(function () {

               });
            );

    public async Task<ActionResult> SaveImage(IFormFile image)
    {
          //how to save from IfromFile.
    }

标签： html5-canvasasp.net-core-2.0azure-cognitive-services

Answer 1

我不知道如何保存图像

这取决于您要保存图像的位置。

要保存到服务器磁盘，您可以尝试如下代码：

[HttpPost("UploadFiles")]
public async Task<IActionResult> Post(List<IFormFile> files)
{
    long size = files.Sum(f => f.Length);

    // full path to file in temp location
    var filePath = Path.GetTempFileName();

    foreach (var formFile in files)
    {
        if (formFile.Length > 0)
        {
            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                await formFile.CopyToAsync(stream);
            }
        }
    }

    // process uploaded files
    // Don't rely on or trust the FileName property without validation.

    return Ok(new { count = files.Count, size, filePath});
}

要将图像字节保存到数据库，请尝试如下代码：

public async Task<IActionResult> Register(RegisterViewModel model)
{
    ViewData["ReturnUrl"] = returnUrl;
    if  (ModelState.IsValid)
    {
        var user = new ApplicationUser {
          UserName = model.Email,
          Email = model.Email
        };
        using (var memoryStream = new MemoryStream())
        {
            await model.AvatarImage.CopyToAsync(memoryStream);
            user.AvatarImage = memoryStream.ToArray();
        }
    // additional logic omitted

    // Don't rely on or trust the model.AvatarImage.FileName property 
    // without validation.
}