如何截取 div 并将值插入模型的属性 ASP .NET Core

Question

我正在尝试制作横幅创建器。用户动态更改照片和标题，但我必须将所有文本和图片存储在 SQL 表中，因此我为它创建了一个模型。当我单击保存按钮时，我希望将横幅 div 保存为我的项目 img 文件夹中的 jpeg 文件，然后必须将其传递给我的模型“照片”属性以进行存储。

我的观点

@model HPBanner1ViewModel
<div class="row" id="canvas1">
                My Picture Here
            </div>

<form enctype="multipart/form-data" asp-controller="HPBannerType1" asp-action="Create" method="post">

                <div class="form-group row">
                    <label asp-for="PromosyonMetin" class="col-sm-2 col-form-label">Metin</label>
                    <div class="col-sm-10">
                        <textarea asp-for="PromosyonMetin" type"="text" class="form-control" id="metinsrc" placeholder="Bol kabaklı mücver menüsü..." onKeyPress="copyText()"></textarea>
                    </div>
                </div>

                <div class="form-group row">
                    <label asp-for="Fiyat" class="col-sm-2 col-form-label">Fiyat</label>
                    <div class="col-sm-10">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">₺</span>
                                <span class="input-group-text">0.00</span>
                            </div>
                            <input asp-for="Fiyat" type="text" class="form-control" id="fiyatsrc" aria-label="Amount (to the nearest lira)">
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <p><b>Banner Resmi</b></p>
                    <div class="input-group mb-3">
                        <div class="custom-file">
                            <input asp-for="BannerPicture" type="file" class="custom-file-input" id="inputGroupFile01">
                            <label asp-for="BannerPicture" class="custom-file-label" for="inputGroupFile01"></label>
                        </div>
                    </div>

                </div>
                <input asp-for="LogoURL" type="hidden" value="@Model.LogoURL">
                <input asp-for="RestaurantName" type="hidden" value="@Model.RestaurantName">
                <input asp-for="RestaurantID" type="hidden" value="@Model.RestaurantID">
                <input asp-for="CreationDate" type="hidden" value="@DateTime.Now">
                <div class="row">
                    <div class="form-group row">
                        <div class="col-sm-10">
                            <a id="savebutton" class="btn btn-primary">Oluştur</a>

                        </div>
                    </div>

                </div>
            </form>

我使用下面的代码下载图像，但我找不到如何将其保存到我的项目 img 文件夹并获取我的模型属性的路径。我该怎么做？

 $('#savebutton').click(function () {

        html2canvas($("#canvas1").get(0)).then(function (canvas) {

;
                    var aw = document.createElement('a');
                    var image = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
                    aw.href = image;
                    aw.download = '@Guid.NewGuid()-@Model.RestaurantName-@DateTime.Now-HP1MOB.jpg';
            aw.click();


        });

    });

Answer 1

您可以使用 ajax 将图像和 imageName 传递给控制器​​，在那里您可以上传文件并将路径保存到数据库。

Javascript：

$('#savebutton').click(function () {

    html2canvas($("#canvas1").get(0)).then(function (canvas) {

        var image = canvas.toDataURL("image/jpeg");

        var data = {
            imageData: image,
            imageName: '@Guid.NewGuid()-@Model.RestaurantName-@DateTime.Now-HP1MOB.jpg'
        };
        $.ajax({
            type: 'POST',
            url: '/Home/SaveImage',
            data: data,
            success: function (msg) {
                alert('Image saved successfully !');
            }
        });

    });

});

家庭控制器：

public class HomeController : Controller
{
    private readonly IHostingEnvironment _hostingEnv;
    private readonly ApplicationDbContext _context;
    public HomeController(IHostingEnvironment hostingEnv,ApplicationDbContext context)
    {
        _hostingEnv = hostingEnv;
        _context = context;
    }
    [HttpPost]
    public  void SaveImage(string imageData,string imageName)
    {
        //save to Myapp/images folders
        //replace filepath with your own path to store files      
        var filePath = Path.Combine(_hostingEnv.ContentRootPath, "images", imageName);

        using (FileStream fs = new FileStream(filePath, FileMode.Create))
        {
            using (BinaryWriter bw = new BinaryWriter(fs))

            {
                imageData = imageData.Replace("data:image/jpeg;base64,", "");
                byte[] data = Convert.FromBase64String(imageData);
                bw.Write(data);
                bw.Close();
            }
            //...
            //save path into database 
        }
    }