FineUploader:即时客户端的缩略图

时间:2013-08-25 12:32:00

标签: javascript image fine-uploader

我正在开发一个FineUploader实现。特殊要求是在客户端创建缩略图,然后上传原始图片上传

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

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)我错过了其他选项/方法,但是我应该使用吗?

任何帮助,一如既往,非常感谢。

2 个答案:

答案 0 :(得分:3)

因此,上传原始图像已经很简单了。 Fine Uploader会为您解决这个问题。如果我理解正确,您还想上传图像的缩放版本(您已生成)。我建议你将你绘制的图像带到画布上并将其转换为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。如果这适合您,请务必提供我已链接的答案。

服务器端注释

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

缩略图生成的未来原生支持&amp;缩放

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

答案 1 :(得分:3)

从FineUploader的4.4版开始,正如Ray Nicholus指出最终会发生的那样,这个功能已经融入他们的框架中。

以下是在创建FineUploader实例时设置上传大小的示例:

var uploader = new qq.FineUploader({
...
scaling: {
    sizes: [
        {name: "small", maxSize: 100},
        {name: "medium", maxSize: 300}
    ]
}
});

See their page on uploading scaled images