如何使用裁剪后将图像保存在文件夹中 裁剪 (Jquery 图像裁剪器).

Question

我正在使用裁剪饼裁剪到数据库的文件夹和图像路径后尝试保存图像，但它转换为base64，我也不知道如何将此数据发送到控制器以及如何将图像保存到文件夹中及其数据库路径。

我已经尝试保存file.write功能，但它没有将图像数据发送回控制器

public ActionResult AddProduct(Tbl_Product product,HttpPostedFileBase file_photo)
        {
            string name = null;
            string ext = null;           
            if (ModelState.IsValid==true)
            {
                if (file_photo != null)
                {
                    name = Path.GetFileNameWithoutExtension(file_photo.FileName);
                    ext = Path.GetExtension(file_photo.FileName);
                    string path = Path.Combine(Server.MapPath("~/ProductImages"), name + ext);
                    file_photo.SaveAs(path);
                }
                product.ProductImage = name + ext;
                product.CreatedDate = DateTime.Now;
                _unitofwork.GetRepositoryInstance<Tbl_Product>().Add(product);
                return RedirectToAction("Product");
            }
            else
            {
                ViewBag.CategoryList = GetCategory();
                return View();
            }            
        }

我想将图像保存在文件夹和数据库路径中，但它显示 base64 图像

Answer 1

我写了一篇关于使用 croppie.js c# 的完整文章

设置裁剪饼的函数，

裁剪图像的功能，

然后通过 ajax 将图像日期发送到 Web 方法，

将图像数据转换为图像并将其保存在文件夹中。

这是链接，https://shaktisinghcheema.com/image-upload-with-cropping/

此外，在将图像数据发送到Web方法时，您可能会遇到超时问题，这是解决方案的链接：通过 json 发送 base64 字符串时出错

我希望这可能会帮助那些落在这个问题上的人。

Answer 2

在裁剪中，裁剪图像后，您将获得 base64 格式的结果，将此 base64 保留在一些隐藏字段中，如下所示，

$('#imagebase64').val(base64_data);

在控制器操作方法中，使用以下代码将图像存储在文件夹中。

if (product.imagebase64 != null)
{
    try
    {
         var base64Data = Regex.Match(product.imagebase64, @"data:image/(?<type>.+?),(?<data>.+)").Groups["data"].Value;
         byte[] imageBytes = Convert.FromBase64String(base64Data);
         string filename = DateTime.Now.ToString("ddMMyyyy_hhmmss"); // You can write custom name here
         string path = Path.Combine(Server.MapPath("~/ProductImages"), filename + ".jpg");
         System.IO.File.WriteAllBytes(path, imageBytes);
    }
    catch (Exception ex)
    {
    }
}