удобный метод сохранения изображений с помощью kineticjs

Был вопрос о том, как упростить сохранение изображений с помощью kineticJS, который, кстати, оказался отличным фреймворком. С его помощью я создал это приложение, которое позволяет учителям наших курсов для профессиональных разработчиков создавать карту класса и сохранять ее как изображение:

http://courses.edtechleaders.org/html_cores/trainingcores/multimedia/classroom_app/

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

http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/

Но я продолжал получать сообщения «файл не найден» в файлах PHP, которые я настроил, и другие загадочные сообщения об ошибках. Итак, я ищу решение, которое, как мы знаем, хорошо сочетается с kineticJS (и, надеюсь, использует минимальный php или вообще не использует его). Любая помощь будет принята с благодарностью!

Спасибо!

Невин


image save kineticjs
person user1886615    schedule 15.02.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В наши дни всплывающие окна не рекомендуются и не поддерживаются многими браузерами.

Кроме того, вы не можете выбрать место для сохранения изображения на клиентском компьютере. Это большая проблема безопасности.

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

  1. добавьте скрытый диалог div в конец HTML-кода или где угодно

    <div id="popup"></div>

  2. создайте изображение и добавьте его в это всплывающее окно, а затем покажите его с помощью пользовательского интерфейса JQuery.

    stage.toDataURL({
   callback: function (dataUrl) {
      $("#popup").html( $("<img />").attr("src", dataUrl) );
      $("#popup").append("To save image, right-click, Save Image As");
      $("#popup").dialog();
    },
    mimeType: 'image/png',
    quality: 1
});

  3. Я не тестировал вышеизложенное, но по моему опыту это должно работать.

person allenhwkim    schedule 16.02.2013