Kineticjs - Помогите загрузить изображения на сцену из входного файла

Я пытаюсь разрешить пользователям загружать свои собственные изображения на сцену кинетического JS через ввод в html. Я предпочитаю хранить весь свой код в отдельном файле js, вот что у меня есть:

$(document).ready(function() {

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 900,
        height: 500
    });
    var layer = new Kinetic.Layer();
});

function addImage(){

  var imageObj = new Image();
  imageObj.onload = function() {
    var myImage = new Kinetic.Image({
      x: 140,
      y: stage.getHeight() / 2 - 59,
      image: imageObj,
      width: 106,
      height: 118
    });
    layer.add(myImage);
    stage.add(layer);
  }  

  var f = document.getElementById('uploadimage').files[0];
  var name = f.name;
  var url = window.URL;
  var src = url.createObjectURL(f);

  imageObj.src = src;

}

Как открыть сцену для метода addImage()? На данный момент это выходит за рамки его возможностей, и я не смог понять, как решить проблему, поскольку холст не отображается в html, пока к нему что-то не добавлено. Мне нужно, чтобы эти изображения были добавлены в качестве слоев для будущих манипуляций, поэтому я хочу использовать кинетический JS. Любые предложения будут высоко ценится!


image kineticjs
person user1956149    schedule 07.01.2013    source источник
comment
Можете ли вы создать jsfiddle, чтобы мы увидели, что это за функция и что вы пытаетесь сделать?   -  person SoluableNonagon    schedule 08.01.2013
comment
Спасибо за ответ, надеюсь, это поможет: jsfiddle.net/8XKBM/10   -  person user1956149    schedule 08.01.2013
comment
stackoverflow.com/questions/23187614/ Надеюсь, вы получите какой-нибудь ответ   -  person Siva    schedule 16.05.2014

Ответы (2)


arrow_upward
2
arrow_downward

http://jsfiddle.net/8XKBM/12/

Мне удалось заставить вашу функцию addImage работать, прикрепив к ней событие. Если вы используете консоль Firebug в Firefox или просто нажимаете Ctrl+Shift+J, вы можете получить ошибки javascript. Оказывается, ваша функция читалась как неопределенная, поэтому теперь оповещение работает, но ваше изображение не добавляется, потому что они еще нигде не хранятся, например, на сервере (сначала нужно куда-то загрузить)

Я использовал jQuery, чтобы прикрепить событие, так как вы должны использовать его вместо onclick='function()'

$('#addImg').on('click', function() {
    addImage();
  });

и изменился

<div>
    <input type="file" name="img" size="5" id="uploadimage" />
    <button id='addImg' value="Upload" >Upload</button>
</div>
person SoluableNonagon    schedule 07.01.2013
comment
Спасибо! Я реализовал ваше предложение, и это намного лучше. Я создал еще одну версию этого с помощью Fabric.js, и я смог добавить изображения на холст из URL-адреса BLOB-объекта html5. На данный момент я делаю только клиентскую часть инструмента, а через несколько недель интегрирую серверный код. Знаете ли вы, можно ли использовать URL-адрес BLOB-объекта? Если вы настроите оповещение, чтобы показать вам значение, хранящееся в src, вы увидите URL-адрес большого двоичного объекта. - person user1956149; 08.01.2013
comment
Проблема решена, этот файл нарушал основные функции даже после того, как были исправлены обработчики событий: ›‹/script" rel="nofollow noreferrer">html5canvastutorials.com/libraries/› Спасибо за вашу помощь! - person user1956149; 08.01.2013

arrow_upward
0
arrow_downward

Что вы действительно хотели бы сделать, так это заставить пользователя загружать фотографии (на сервер) на лету с помощью AJAX (доступно с jQuery, не мешает KineticJS). Затем, в случае успеха, вы можете нарисовать фотографию на холсте, используя свою функцию. Обязательно используйте:

layer.draw()

or 

stage.draw()

в конце функции addImage(), чтобы фотография отображалась на вашем холсте, так как браузер не рисует изображение до тех пор, пока не загрузится страница и в конце не будет определен img.src. Таким образом, это в основном просто потребует, чтобы все было в правильном порядке, а не было сложно.

Итак, шаг 1: загрузить с помощью AJAX (на сервер), шаг 2: добавить на сцену, шаг 3: перерисовать сцену

person SoluableNonagon    schedule 07.01.2013
comment
На самом деле вам бы хотелось, чтобы пользователь загружал фотографии (на сервер) -> Но что, если он этого не делает? - person Constantin Berhard; 21.01.2014
comment
Ну ему и не надо, есть много вариантов локального хранилища. - person SoluableNonagon; 21.01.2014