Как сделать снимок экрана div и вставить значение в свойство модели ASP. NET Core - PullRequest
Новая
       2

Как сделать снимок экрана div и вставить значение в свойство модели ASP. NET Core

0 голосов
/ 11 марта 2020

Я пытаюсь сделать баннер создателем. Пользователь изменяет фотографии и подписи динамически, но я должен хранить все тексты и изображения в таблице SQL, поэтому я создал для нее модель. Когда я нажимаю кнопку «Сохранить», я хочу, чтобы баннерная метка div сохранялась в виде файла jpeg в папке img моих проектов, а затем она должна передаваться в свойство «Photo» моих моделей для сохранения.

My View 

@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();


        });

    });

1 Ответ

0 голосов
/ 12 марта 2020

Вы можете использовать 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 !');
            }
        });

    });

});

HomeController: 

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