如何从已加载的图像 (<img>) 创建 HTML 5 文件？答案

【问题标题】：how to create HTML 5 File from image (<img>) already loaded?如何从已加载的图像 (<img>) 创建 HTML 5 文件？
【发布时间】：2015-08-02 08:29:32
【问题描述】：

您好，我有一个页面，其中显示了像这样加载的用户个人资料图片：

$("#imgProfile").attr('src', 'http://myserver/user.png')

现在我需要使用 HTML 5 File API 提交此图像，但为此我需要先将图像转换为 File API。我在互联网上看到的所有示例都与 input type="file" 一起使用，但是我已经有了该图像，我没有从本地计算机中选择图像。

像 https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications 这样的所有示例都使用来自 input type="file" 元素的 File API

【问题讨论】：

所指的预览很可能是上传前的预览。如果它在您的服务器上，您只需像普通图像一样加载它。在 html 中或通过 java 脚本创建 img 标签。

标签： javascript jquery html angularjs filereader

【解决方案1】：

该文件已在您的服务器上。正如Yair Nevet 的回答所说，您可以使用它。

如果你真的想让它成为File 对象，也许你可以使用这个（我不知道它是否有效）。

var getFilelikeBlobFromImageElement = (function closure() {
        var canvasElement = document.createElement("canvas");

        return function(imageElement) {
                canvasElement.width = imageElement.width;
                canvasElement.height = imageElement.height;
                var canvasContext = canvasElement.getContext("2d");
                canvasContext.drawImage(imageElement, 0, 0);

                var imageData = canvasContext.getImageData(0, 0, imageElement.width, imageElement.height).data;
                var buffer = new Uint8Array(imageData.length);
                for(var index = 0; index < imageData.length; index++)
                    buffer[index] = imageData[index];

                var imageBlob = new Blob(buffer);
                imageBlob.lastModifiedDate = new Date();
                imageBlob.name = /\/([^\/]+)$/.exec(imageElement.src)[1];

                return imageBlob; // A `File`-like `Blob` object.
            };
    })();

用法：

getFilelikeBlobFromImageElement(document.getElementById("imgProfile"));

To get the Blob from a <canvas>

To make a Blob File-like

【讨论】：

【解决方案2】：

不要与 File API 混淆，如果图像已经存在于服务器中，你要做的就是声明一个 <img> 标记并引用图像 URL 并显示它：

<img src="serverAddress\yourImage.png" alt="Image Something" />

【讨论】：

但预览似乎不是他想要的。他已经在服务器上上传了文件，只是希望显示它。所以我认为他把这个例子和他想做的事情混淆了。