使用WebUploader本地生成缩略图

Posted 2021-03-18 谷子弟

全民都在python大法，也不能免俗，Flask搭个架子，图片上传+识别。

想看本地的缩略图，直接采用file的路径，由于chrome的安全限制，没办法只好用html5的FileReader，还需要配合input标签，但是，webuploader里没有input标签啊

折腾了一个小时，无果，这时候只好翻翻官方的API了。

果然在官方的demo里发现了类似的功能，http://fex.baidu.com/webuploader/demo.html

翻一翻源码，http://fex.baidu.com/webuploader/js/demo.js 找到了这个函数makeThumb

一看官方API，立马安排得明明白白。

下面贴代码，在

uploader.on(‘fileQueued‘, function(file) {}

函数里加上:

var $img = $(‘<div></div>‘);
uploader.makeThumb(file, function (error, src) {
    if (error) {
        return;
    }
    var img = $(‘<img src="‘ + src + ‘">‘);
    $img.append(img);
}, 100, 100);

这里的100是缩略图尺寸，然后把$img元素插入到你想要的地方去即可。比如我想插入到

<td class="info"><span></span></td>这个td里去，

$list.find(‘td.info span‘).append($img);