Как загрузить холст в папку проекта, используя javascript и mvc - PullRequest
Новая
       6

Как загрузить холст в папку проекта, используя javascript и mvc

4 голосов
/ 14 октября 2019

Я бы хотел сохранить свой холст в папке моего проекта «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");
        }

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

1 Ответ

0 голосов
/ 23 октября 2019

Похоже, вы получаете скриншот, поэтому ваш контроллер должен работать нормально. Однако, глядя на https://html2canvas.hertzen.com/,, я вижу: 

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

и: 

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

Предполагаемый результат - сделать скриншот того, что находится внутри элемента #capture. Таким образом, они делают это с html2canvas(document.querySelector(" # capture ")).then().

Вы говорите, что вы получаете целую веб-страницу, а не только холст. Но я думаю, что это ожидаемое поведение, учитывая, что вы написали это: html2canvas( document.body , ...), где вы запрашиваете скриншот элемента body . Используя html2canvas , вы должны заменить document.body на идентификатор холста.

Однако вам может и не понадобиться это делать. Вы можете просто получить данные изображения холста и сохранить его. Для этого вы можете использовать: const dataURL = canvas.toDataURL(); или, если вам нужно что-то еще: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement

Это также может помочь: https://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

...