使用Croppie裁剪后如何在文件夹中保存图像(jQuery图像裁剪器)

时间:2019-04-10 06:31:38

标签: c# asp.net asp.net-mvc asp.net-mvc-5 croppie

我正在尝试使用croppie将图像裁剪到文件夹和图像路径后保存到数据库,但它会转换为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图像

2 个答案:

答案 0 :(得分:1)

在裁剪中,裁剪图像后,您将获得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)
    {

    }
}

答案 1 :(得分:0)

我写了一篇完整的文章,介绍如何在c#中使用croppie.js

设置裁剪的功能,

裁剪图像的功能,

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

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

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

此外,将图像数据发送到Web方法时,您可能还会遇到超时问题, 这是解决方案的链接: Error while sending base64 string through json

我希望这会对遇到这个问题的人有所帮助。