javascript - 等待 canvas.toBlob() 后再继续

Question

我想用 jquery ajax 上传裁剪后的图像。因此，我从 canvas 元素创建一个 blob，将其附加到表单数据中。到目前为止，这工作得很好，但我猜我有一些同步/异步问题。我在网上搜索了 javascript 回调，但我不确定这是否是正确的。问题是

return formData;

将在 blob 添加到表单数据之前执行。我认为有一个简单的解决方案可以解决我的问题，但我无法完成它，也许你可以帮助我。

$.ajax({
    url: this.$upload.data('url'),
    method: 'POST',
    contentType: false,
    processData: false,
    cache: false,
    data: (function(_this) {
        var formData = new FormData();
        _this.getCroppedImage().toBlob(
            function(blob) {
                formData.append('file', blob, _this.file.name);
            },
            _this.file.type
       );
       $.each(_this.$element.data(), function(key, value) {
           formData.append(key, value);
       });
       return formData;
    })(this)
});

也许知道这一点很重要:我也使用 https://github.com/blueimp/JavaScript-Canvas-to-Blob让所有浏览器都可以使用 toBlob 方法。

Answer 1

为了实现这一点，您需要研究 Promise 对象，a good library for this is q.js

基本上，您创建一个函数来构建表单数据，然后等待表单数据完成，当 Promise 解析时，它将通过“then”回调将表单数据传递到您的 ajax 函数中。然后你的ajax调用将被运行

function ajaxFn(){
    //result is your formData in this case
    getFormData().then(function(result){
        //this won't run until the promise resolves, aka formData is complete
        $.ajax({
            url: this.$upload.data('url'),
            method: 'POST',
            contentType: false,
            processData: false,
            cache: false,
            data: result
        });
    });

}

function getFormData(){
    var deferred = Q.defer();

    var formData = new FormData();

    $.each(_this.$element.data(), function(key, value) {
       formData.append(key, value);
    });

    _this.getCroppedImage().toBlob(
        function(blob) {
            formData.append('file', blob, _this.file.name);

            //this is what will get passed into your then function above
            deferred.resolve(formData);
        },
        _this.file.type
   );

    return deferred.promise;
}