Javascript 如何拍摄div的屏幕截图并将值插入model'；s属性ASP.NET内核

我想做一个横幅创造者。用户动态更改照片和标题，但我必须将所有文本和图片存储在SQL表中，因此我为其创建了一个模型。当我点击save按钮时，我希望banner div在我的projects img文件夹中被保存为jpeg文件，然后它必须被传递到我的models“Photo”属性进行存储

我的看法

@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>

---

您可以使用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 
        }
    }

---

谢谢这似乎是一个正确的方法

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 
        }
    }