调整图像大小并在couchdb中上传或将url blob上传到couchdb

Question

我需要将附加的已调整大小的图像上传到couchdb文档中。现在我没有调整图像大小，只使用以下代码上传它们：

function attachFile(event) {
   event.preventDefault();
   var form_data = {};
   $("form.attach-file :file").each(function() {
      form_data[this.name] = this.value;
   });
   if (!form_data._attachments || form_data._attachments.length == 0) {
      alert("Please select a file to upload.");
      return;
   }

   var id = $("#ant-show").data("doc")._id;
   $(this).ajaxSubmit({
      url: "db/" + $.couch.encodeDocId(id),
      success: function(resp) {
         $('#modal-attach').modal("hide");
         helios_link(id);
      } 
   });
}

我用来重新定义图片的代码，但是上传它们不起作用，如下：

function attachFile(event) {
    function isImage (str) {
        return str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
    }
    function resizeAndUpload(file, callback, progress)
    {
        var reader = new FileReader();
        reader.onloadend = function() {
            var tempImg = new Image();
            tempImg.onload = function() {
                var MAX_WIDTH = 500;
                var MAX_HEIGHT = 500;
                var tempW = tempImg.width;
                var tempH = tempImg.height;
                if (tempW > tempH) {
                    if (tempW > MAX_WIDTH) {
                        tempH *= MAX_WIDTH / tempW;
                        tempW = MAX_WIDTH;
                    }
                } else {
                    if (tempH > MAX_HEIGHT) {
                        tempW *= MAX_HEIGHT / tempH;
                        tempH = MAX_HEIGHT;
                    }
                }
                var resizedCanvas = document.createElement('canvas');
                resizedCanvas.width = tempW;
                resizedCanvas.height = tempH;
                var ctx = resizedCanvas.getContext("2d");
                ctx.drawImage(this, 0, 0, tempW, tempH);
                var dataURL = resizedCanvas.toDataURL("image/jpeg");
                var file = dataURLtoBlob(dataURL);
                var fd = $("#upload");
                fd.append("_attachments", file);
                var id = $("#ant-show").data("doc")._id;
                console.log(fd);
                fd.ajaxSubmit({
                    url: "db/" + $.couch.encodeDocId(id),
                    success: function(resp) {
                        $('#modal-attach').modal("hide");
                        helios_link(id);
                    }         
                });
            };
            tempImg.src = reader.result;
        }
        reader.readAsDataURL(file);
    }

    function dataURLtoBlob(dataURL) {
        // Decodifica dataURL
        var binary = atob(dataURL.split(',')[1]);
        // Se transfiere a un array de 8-bit unsigned
        var array = [];
        var length = binary.length;
        for(var i = 0; i < length; i++) {
            array.push(binary.charCodeAt(i));
        }
        // Retorna el objeto Blob
        return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
    }

    function uploaded(response) {
        // Código siguiente a la subida
    }

    function progressBar(percent) {
        // Código durante la subida
    }
    event.preventDefault();
    console.clear();
    var files = document.getElementById('_attachments').files;
    console.log(files);
    resizeAndUpload(files[0], uploaded, progressBar);

}

有人知道如何改进我的代码才能使其正常工作？我希望实际上有两种不同的解决方案，一种可以帮助我改进我的代码，第二种解决方案可以获得有关如何将URL BLOB作为附件上传到couchdb文档的说明。