javascript - 如何使用 JavaScript 上传嵌入图像？

Question

我想构建一个包含 JavaScript 的简单 HTML 页面，以使用嵌入在 HTML 中的图像数据与磁盘上的文件执行表单 POST。

我看过这篇文章，它适用于常规表单数据，但我对图像数据感到困惑。

JavaScript post request like a form submit

Answer 1

** 更新 ** 2014 年 2 月 **

作为 jQuery 插件提供的新版本和改进版本: https://github.com/CoeJoder/jquery.image.blob

用法:

$('img').imageBlob().ajax('/upload', {
    complete: function(jqXHR, textStatus) { console.log(textStatus); } 
});

---

要求

• canvas元素(HTML 5)
• FormData
• XMLHttpRequest.send (:表格数据)
• Blob constructor
• Uint8Array
• atob() , escape()

因此浏览器要求是:

• Chrome :20+
• 火狐:13+
• Internet Explorer:10+
• 歌剧:12.5+
• Safari :6+

注意:图像必须与您的 JavaScript 具有同源，否则浏览器安全策略将阻止调用 canvas.toDataURL()(更多详细信息，请参阅此 SO 问题:Why does canvas.toDataURL() throw a security exception?)。代理服务器可用于通过响应 header 注入(inject)来规避此限制，如该帖子的答案中所述。

这是一个jsfiddle下面的代码。它应该抛出一条错误消息，因为它没有提交到真实的 URL('/some/url')。使用 firebug 或类似工具检查请求数据并验证图像是否序列化为表单数据(页面加载后单击“运行”):

示例标记

<img id="someImage" src="../img/logo.png"/>

JavaScript

(function() {
    // access the raw image data
    var img = document.getElementById('someImage');
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    var dataUrl = canvas.toDataURL('image/png');
    var blob = dataUriToBlob(dataUrl);

    // submit as a multipart form, along with any other data
    var form = new FormData();
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/some/url', true);    // plug-in desired URL
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                alert('Success: ' + xhr.responseText);
            } else {
                alert('Error submitting image: ' + xhr.status);
            }
        }
    };
    form.append('param1', 'value1');
    form.append('param2', 'value2');
    form.append('theFile', blob);
    xhr.send(form);

    function dataUriToBlob(dataURI) {
        // serialize the base64/URLEncoded data
        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0) {
            byteString = atob(dataURI.split(',')[1]);
        }
        else {
            byteString = unescape(dataURI.split(',')[1]);
        }

        // parse the mime type
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

        // construct a Blob of the image data
        var array = [];
        for(var i = 0; i < byteString.length; i++) {
            array.push(byteString.charCodeAt(i));
        }
        return new Blob(
            [new Uint8Array(array)],
            {type: mimeString}
        );
    }
})();

引用资料

所以:'Convert DataURI to File and append to FormData