Question

打开图像编辑程序，复制图像（不要从浏览器复制 - 我稍后会解释原因）。
打开Firefox并转到http://imgur.com
按 Ctrl + V
在上传之前复制的图像完全惊讶。

我知道HTML5剪贴板API，它适用于Chrome。在Chrome中，当您粘贴二进制图片数据时，浏览器会触发包含paste的{{1}}事件，该事件等于event.clipboardData.types，因此我可以将我的图片放在剪贴板中

['Files']

在Firefox中，当我粘贴二进制图片数据时，浏览器也会触发粘贴事件，但var index = event.clipboardData.types.indexOf('Files'); if(index !== -1) { var blob = event.clipboardData.items[index].getAsFile(); }为空（event.clipboardData.types}，length === 0显然会返回event.clipboardData.getData('Files')

顺便说一下，从浏览器复制图像还会在""中设置包含复制的clipboardData元素的“text / html”项。因此，在这些情况下，我可以通过将远程URL发送到服务器来解决问题，然后服务器将自己下载图像（如果服务器可以访问远程位置，则无法保证）。

StackOverflow建议： How to obtain data from clipboard in Firefox （创建一个有意义的<img>，要求用户粘贴到该内容中，然后复制内容。）

然而，imgur不这样做。这是如何运作的？

Answer 1

免责声明：发布前我不知道imgur上传系统，但我希望它能帮到你。这篇文章只是通过查看代码和一些HTML / JS知识来编写：）

imgur似乎对Firefox（以及一般的Gecko浏览器）使用不同的粘贴选项。实际上，索引HTML中有一个带有upload-global-FF-paste-box ID的div，其属性为contenteditable="true"。在主js中，我们可以找到属性$FFPasteBox的初始化：

init: function (a) {
    this._ = $.extend({
        el: {
            $computerButton: $("#gallery-upload-buttons #file-wrapper"),
            $webButton: $("#gallery-upload-buttons #url"),
            $computerButtonGlobal: $("#upload-global-file"),
            $FFPasteBox: $("#upload-global-FF-paste-box")  // <--- this line
        }
    }, a)
},

然后，通过在global.js文件中挖掘一点，我找到了这些函数（见上文）。基本上，这个过程是：

等待用户进行 Ctrl-V 操作
当它被解雇时，使焦点之前看到的contenteditable div成为检索数据
等待数据已完全发送（高分辨率照片可能很长）
分析获得的base64字符串。

以下是从global.js中提取并由我自己评论的代码：

// When a paste action is trigger, set the focus on this div and wait the data to be sent
initPasteUploadMozilla: function () {
    $(document).on("paste", _.bind(function (a) {
        $(a.target).is("input") || this.isInView() && (Imgur.Upload.Index && this.showColorBox(), this._.el.$FFPasteBox.focus(), this.waitForPasteData(this._.el.$FFPasteBox[0]))
    }, this))
},

// Listen the user, and waiting that the node is created by the paste action
waitForPasteData: function (a) {
    a.childNodes && a.childNodes.length > 0 ? this.processPaste(a) : setTimeout(this.waitForPasteData.bind(this, a), 20)
},

// Check data sent
processPaste: function (a) {
    var b = a.innerHTML,
        // Check if the thing pasted is a <img tag or a png or at least base64 stuff
        c = {
            image: -1 != b.indexOf("<img") && -1 != b.indexOf("src="),
            base64: -1 != b.indexOf("base64,"),
            png: -1 != b.indexOf("iVBORw0K")
        };
    if (c.image && c.base64 && c.png) {
        var d = b.split('<img src="');
        d = d[1].split('" alt="">');
        var b = {
            dataURL: d[0],
            file: {
                size: this.bytesizeBase64String(d[0].length)
            }
        };
        this.addBase64(b)
    } else {
        var e = $(a).find("img"),
            f = null;
        if (e.length > 0 && e.attr("src").length > 0 ? f = e.attr("src") : b.length > 0 && (f = b), null !== f && f.match(this._.urlRegex)) this.queueUrl(f);
        else if (null !== f) {
            var g = $(f).filter("a");
            g.length && g.attr("href").match(this._.urlRegex) ? this.queueUrl(g.attr("href")) : this.showError(this._.messages.urlInvalidError)
        }
    }
    a.innerHTML = ""
},

在imgur中图像粘贴如何在Firefox中运行？

1 个答案: