js获取图片二进制码，显示缩略图 幻幻Fate 2017年05月31日 0 6,049次浏览 二进制码,图片,js,缩略图

做聊天的时候需要图片的二进制码作为缩略图，研究了大半天找到了这个方法。

说明：这段代码主要是将input[file]中的图片转换成二进制码，之后可以直接放入img标签中显示，也可以用于数据传输。

字段说明：

obj：文件，document.getElementById("xxx").files[0]

area：区域大小

callback：回调函数,其中_canvas参数就是图片的二进制码

var ImageHelper = {
    getThumbnail: function (obj, area, callback) {
        var canvas = document.createElement("canvas"), context = canvas.getContext('2d');
        var img = new Image();
        img.onload = function () {
            var target_w;
            var target_h;
            var imgarea = img.width * img.height;
            if (imgarea > area) {
                var scale = Math.sqrt(imgarea / area);
                scale = Math.ceil(scale * 100) / 100;
                target_w = img.width / scale;
                target_h = img.height / scale;
            }
            else {
                target_w = img.width;
                target_h = img.height;
            }
            canvas.width = target_w;
            canvas.height = target_h;
            context.drawImage(img, 0, 0, target_w, target_h);
            try {
                var _canvas = canvas.toDataURL("image/jpeg", 0.5);
                _canvas = _canvas.substr(23);
                callback(obj, _canvas);
            }
            catch (e) {
                console.log(e);
                callback(obj, null);
            }
        };
        img.src = ImageHelper.getFullPath(obj);
    },
    getFullPath: function (file) {
        window.URL = window.URL || window.webkitURL;
        if (window.URL && window.URL.createObjectURL) {
            return window.URL.createObjectURL(file);
        }
        else {
            return null;
        }
    }
};

用例：

ImageHelper.getThumbnail(othis.find('input')[0].files[0], 60000, function (obj, data) {
    focusInsert(thatChat.textarea[0], "img["+data+"]");
    sendMessage();
});

页面上显示

在src中加入data:image/png;base64,再加上_canvas的内容