Сохранить dataurl холста в файловой системе пользователя

Итак, у меня есть приложение MVC, в котором я создаю изображение холста и получаю URL-адрес данных, просто выполняя canvas.toDataURL("image/png"). Что я хотел бы сделать, так это сохранить это в файловой системе пользователя.

Я попытался сделать это только с помощью javascript, выполнив:

var saveUrl = canvas.toDataURL("image/png");
saveUrl = saveUrl.replace("image/png", "application/octet");
window.open(saveUrl);

Но это просто дает мне файл с именем download без какого-либо расширения или чего-либо еще. Я хотел бы получить диалоговое окно сохранения, указать тип и имя файла и сохранить его на диске пользователя.

Поэтому я решил, что могу отправить данные на сервер, а затем сделать что-то с заголовками ответа, чтобы сообщить браузеру, что я пытаюсь сохранить для него изображение, но я не могу найти хороший способ сделать это. Я использую ASP.NET MVC. У кого-нибудь есть хороший простой способ сделать это?


javascript asp.net-mvc html5-canvas
person Colin DeClue    schedule 11.04.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот что у меня получилось:

Пост изображение:

[HttpPost]
public void PostImageForPrinting(string dataUrl)
{
    SomePersistentObject.CurrentDataURL = dataUrl;
}

Подавать изображение:

public ActionResult PrintMission()
{
    var url =
            SomePersistentObject.CurrentDataURL.Substring(SomePersistentObject.CurrentDataURL.IndexOf(",") + 1);
    var image = Convert.FromBase64String(url);
    return base.File(image, "image/png", "mission.png");
}

Сторона клиента:

var saveUrl = canvas.toDataURL("image/png");
var jsonString = JSON.stringify({ dataUrl: saveUrl });
$.ajax({
    url: "/Home/PostImageForPrinting",
    contentType: "application/json",
    type: "POST",
    data: jsonString,
    success: function (result) {
        window.location.href = "/Home/PrintMission";
    }
});
person Colin DeClue    schedule 12.04.2013