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

Question

您好，我有一个页面，我在其中显示用户的个人资料图像，它是这样加载的:

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

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

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

Answer 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