javascript - 精细 uploader : Thumbnails on the fly clientside

Question

我正在研究 FineUploader 的实现。特殊要求是在客户端动态创建缩略图，然后使用原始图像上传上传这些缩略图。

我有一个适用于 FF 的实现，但似乎不适用于 iO。看起来像这样:

var uploader = new qq.FineUploaderBasic({
  button: document.getElementById(buttonID),
  request: {
    endpoint: '/up/load/a/' + $('section#ajax-viewport').data('albumid')
  },
  callbacks: {
    onSubmit: function(id, fileName) {

            // getFile obtains the file being uploaded
        file = this.getFile(id); 
            // create a thumbnail & upload it:
        ThumbDown(file, id, 200, fileName);
    },
  }
}) 

这段代码调用了一个函数:

function ThumbDown(file, id, dimension, fileName) {

var reader = new FileReader();  
reader.onload = function(e) {
    var img = document.createElement("img");
    img.onload = function (ev) {
        var thumbnailDimensions; // object holding width & height of thumbnail
        var c=document.getElementById("canvas-for-thumbnails"); // must be a <canvas> element
        var ctx=c.getContext("2d");
            // set thumbnail dimensions of canvas:
        thumbnailDimensions = calcThumbnailDimension (img.width, img.height, dimension )
        c.width = thumbnailDimensions.width;
        c.height = thumbnailDimensions.height;

        var ctx = c.getContext("2d");
        ctx.drawImage(img, 0, 0, c.width, c.height);
        uploadThumbnail(c.toDataURL('image/jpeg'), //a base64 encoded representation of the image
                        id,               
                        fileName);       // we need filename to combine with mother-image on the server
    };
    img.src = e.target.result;
}
reader.readAsDataURL(file);
} // end function

最后，缩略图通过愚蠢的 ajax 调用上传:

function uploadThumbnail (base64encodedString, id, fileName) {

  $.post('/up/thumb',
  {
    img : base64encodedString,
    id: id,
    fileName: fileName
  },
  function(data) {});
}

我的问题:

1) 目前我有两个上传:一个用于母图，另一个用于缩略图。我想将其合并到一个 FineUploader 调用中。但是，由于缩略图创建的异步性质，我看不到执行此操作的方法。

我错过了什么吗？是否可以将其减少为一次 FineUploader 调用？

2) 此代码将缩略图上传为 base64 编码字符串。我想将缩略图上传为图像(或 blob ？)。也许通过关注 this recipe杰里米类克斯。这可以与 FineUploader 一起使用吗？

3) FineUploader 是否有其他我错过但应该使用的选项/方法？

如有任何帮助，一如既往，我们将不胜感激。

Answer 1

所以，上传原图已经是小菜一碟了。 Fine Uploader 会为您解决这个问题。如果我理解正确，您还想上传图像的缩放版本(您已经生成)。我建议你把画在 Canvas 上的图像转换成 Blob .然后，你可以提交这个 Blob直接到 Fine Uploader，它将为您上传。

例如，更改uploadThumbnail的值对此:

function uploadThumbnail(thumbnailDataUri, id, filename) {
    var imageBlob = getImageBlob(thumbnailDataUri, "image/jpeg"),
        blobData = {
            name: filename,
            blob: imageBlob
        };

    // This will instruct Fine Uploader to upload the scaled image
    uploader.addBlobs(blobData);
}  

function getImageBlob(dataUri, type) {
    var binary = atob(dataUri.split(',')[1]), 
        array = [];

    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }

    return new Blob([new Uint8Array(array)], {type: type});
}

注:getImageBlob函数改编自 this Stack Overflow answer .如果这对您有用，请务必为我链接到的答案投票。

服务器端注释

A Blob几乎是一个 File没有 name属性(property)。您的服务器端代码将处理 Blob 的上传与 File 几乎相同或包含 <input type="file"> 的表单提交表单字段。与您的服务器唯一明显的区别是包含文件的多部分边界的 Content-Disposition header 中的文件名参数值。换句话说，由于大多数浏览器生成包含 Blob 的多部分编码请求的方式，您的服务器可能认为该图像被命名为“blob”或其他通用名称。对象。 Fine Uploader 应该能够通过明确指定浏览器的文件名以包含在 blob 的 Content-Disposition header 中来解决这个问题，但这种能力没有得到广泛的浏览器支持。 Fine Uploader 在某种程度上通过在包含 Blob 的实际名称的请求中包含“qqfilename”参数来绕过此限制。 .

future 对缩略图生成和缩放的原生支持

计划为 Fine Uploader 添加对缩略图预览的原生支持。这包含在功能请求中 #868和 #896 .还有其他相关的功能请求打开，例如 image rotation和 validation related to images .这些功能和其他与图像相关的功能可能会在不久的将来添加到 Fine Uploader 中。如果您愿意，请务必对现有功能请求发表评论或添加其他请求。