做聊天的时候需要图片的二进制码作为缩略图,研究了大半天找到了这个方法。
说明:这段代码主要是将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的内容