Не удается получить объект HTML Dom

Question

Я использую IE11 для этого, так как это стандартный браузер моей компании.

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

У меня есть создать jsfiddle, где вы можете увидеть весь тестовое приложение: http://jsfiddle.net/e5f5gLan/3/

ли, как это при запуске jsfiddle:

1. Сделайте снимок экрана
2. Поместите маркер в красный квадрат
3. Нажмите Ctrl + v

Теперь намерение что вставленное изображение должно стать размером 100px x 100px. Это не так.

Проблема в том, что я не получаю объект DOM, поэтому я могу установить стиль/размер изображения.

Значительная часть находится в конце JavaScript (я думаю ...):

var image_container = document.getElementById('pastearea'); 
var image = image_container.getElementsByTagName("img"); 
image[0].setAttribute("style", "width: 100px; height: 100px"); 

Прежде всего, я представлял себе, что элемент IMG станет частью массива, и что я должен получить доступ к единственный img-элемент, использующий изображение [0]. Но затем я получаю сообщение об ошибке «Невозможно получить setAttribute для ссылки, которая не определена или равна нулю». (0) это не массив. Поэтому я изменил последний ряд выше:

image.setAttribute("style", "width: 100px; height: 100px"); 

Тогда я получаю, что setAttribute не поддерживается объектом.

Если я создаю HTML-страницу с аналогичной структурой (img внутри div) и просто пытается изменить размер, то она работает. Проверьте это (нажмите кнопку, чтобы уменьшить изображение): http://jsfiddle.net/m4kzd7jp/3/

Как изменить размер изображения до или после того, как я вставил его?

Answer 1

Да, я добавил стиль, и он работал, чтобы поддерживать его 100px height/width.

#pastearea img { width: 100px; height: 100px; } 

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

  function (e) { 
       var clip = e.clipboardData || window.clipboardData; 
       if (clip) { 
        var preInsert = getData(); // this pulled the input box text or div html 

        for (var i = 0; i < clip.items.length; i++) { 
         var item = clip.items[i]; 

         if (item.kind == "file" && 
          item.type.indexOf('image/') !== -1) { 
          var fr = new FileReader(); 
          fr.onloadend = function() { 
           if (preInsert == getData()) // if nothing changed, we'll handle it otherwise it was already handled 
            setData(fr.result); 
          }; 
          var data = item.getAsFile(); 
          fr.readAsDataURL(data); 
         } 
        } 
       } 
      } 

Эта область показывает, что я делал в угловую, чтобы получить/установить

  var getSelection = function() { 
       if (window.getSelection && window.getSelection().rangeCount > 0) //FF,Chrome,Opera,Safari,IE9+ 
       { 
        return window.getSelection().getRangeAt(0).cloneRange(); 
       } 
       else if (document.selection)//IE 8 and lower 
       { 
        return document.selection.createRange(); 
       } 
       return null; 
      } 

      var isInputTextarea = false; // I was being more generic in my angular directive 

      var getData = function() { 
       if (isInputTextarea) 
        return $element.val(); 

       return $element.html(); 
      }; 

      var setData = function (src) { 
       if (isInputTextarea) { 
        $element.val(function (index, value) { 
         return value + " " + "<img src='" + src + "'>"; 
        }); 
       } 
       else { 
        var selection = getSelection(); // I presume we have focus at this point, since it is a paste event 
        if (selection) { 
         var img = document.createElement("img"); 
         img.src = src; 
         selection.insertNode(img); 
        } 
       } 
      };