Asma Siddiqua Ответов: 1

Как загрузить canvas в папку проекта с помощью javascript и MVC?


Я хотел бы сохранить свой холст в папке моего проекта "Upload", поэтому пытаюсь преобразовать его в изображение, а затем отправить его в код позади и сохранить. Но он получает весь скриншот веб - страницы, а не только холст.

Что я уже пробовал:

Это мой javascript код :

html2canvas(document.body, {onrendered: function (canvas) {
var mergedImage = canvas.toDataURL("image/png");
mergedImage = mergedImage.replace('data:image/png;base64,', '');
var param = { imageData: mergedImage };
$http({
        method: 'POST',
        url: '/Admin/MyController/UploadImage',
        data: JSON.stringify(param),
        dataType: 'JSON',
        headers: { 'content-type': 'application/json' }
     }).then(function (response) {
 alert('Your photos successfully uploaded!');
});
}
});


Это мой код c# в файле mvc controlle:

[HttpPost]
        public ContentResult UploadImage(string imageData)
        {
            try
            {
                string fileNameWithPath = Server.MapPath("~/Images/SomeFolder/custom_name.png");
                if (!Directory.Exists(fileNameWithPath))
                {
                    using (FileStream fs = new FileStream(fileNameWithPath, FileMode.Create))
                    {
                        using (BinaryWriter bw = new BinaryWriter(fs))
                        {
                            byte[] data = Convert.FromBase64String(imageData);
                            bw.Write(data);
                            bw.Close();
                        }
                    }
                }
            }
            catch (Exception ex)
            {

            }

            return Content("Uploaded");
        }

Мне просто нужно сохранить холст только в папке моего проекта.

F-ES Sitecore

Это только предположение, но я предполагаю, что "document.body", который вы передаете в функцию, является элементом, который она преобразует в изображение, поэтому вы преобразуете всю страницу. Если вам нужен только определенный элемент, то передайте его функции html2canvas, а не document.body.

Asma Siddiqua

так что же может быть элементом вместо document.body? где мне нужно просто поймать холст на изображение и сохранить его в папку..

F-ES Sitecore

Любой элемент, который вы хотите превратить в образ. Вы не показали соответствующую наценку, поэтому мы не можем сказать точно.

Asma Siddiqua

У меня нет никакого элемента для преобразования изображения..У меня есть холст, который нужно преобразовать в изображение и сохранить его.

1 Ответов

Рейтинг:
1

MadMyche

Я бы попробовал прочитать документацию для html2canvas; простой поиск в Google приведет вас на домашнюю страницу проекта с хорошим простым образцом:

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

<script lang="text/javascript">

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});
</script>

Обратите внимание, как это называется; использование документа.querySelector() передает идентификатор нужного элемента. В вашем коде вы передаете document.body; и, следовательно, возникающая проблема.

Ссылка:
https://html2canvas.hertzen.com/[^]