无法检索 HTML Dom 对象

Question

我为此使用 IE11，因为这是我公司的标准浏览器。

我正在研究一种解决方案，以便在将屏幕转储粘贴到 Web 应用程序时捕获粘贴事件。到目前为止一切顺利，但粘贴图像后我想更改大小。实际上之前更可取，所以我没有得到一个跳跃的应用程序。

我创建了一个 jsfiddle，您可以在其中看到整个测试应用程序：http://jsfiddle.net/e5f5gLan/3/

在运行 jsfiddle 时这样做：

截屏
将标记放在红色方块中
按 Ctrl + v

现在的目的是将粘贴的图像大小变为 100px x 100px。它没有。

问题是我没有获取 DOM 对象，所以我可以设置图像的 style/size。

重要的部分在javascript的末尾（我猜...）：

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

首先，我设想 img 元素将成为数组的一部分，并且我应该使用 image[0] 访问唯一的 img 元素。但后来我收到错误 "Not possible to get setAttribute for a reference that is undefined or null. "（从瑞典语自由翻译...）

好吧，也许它理解它只是一个元素，只是 returns 一个不是数组的对象。所以我将上面的最后一行更改为：

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

然后我得到对象不支持setAttribute。

如果我创建一个具有类似结构的 HTML 页面（div 中的 img）并尝试更改大小，那么它就可以工作。看看这个（点击按钮缩小图片）：http://jsfiddle.net/m4kzd7jp/3/

如何在粘贴图片之前或之后更改图片的大小？

Answer 1

是的，我添加了样式，它可以保持 100 像素 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);
                        }
                    }
                }
            }

这个区域显示了我在 angular 到 get/set

期间所做的事情

            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);
                    }
                }
            };

无法检索 HTML Dom 对象

Cannot retrieve the HTML Dom object

html

javascript

internet-explorer-11