我们要清楚,图片的展示方式有三种:分别为file(文件流)、bolb(本地流)、base64(二进制流)
file 接口提供有关文件的信息,并允许网页中的 javascript 访问其内容。
通常情况下, file 对象是来自用户在一个 元素上选择文件后返回的 filelist 对象,也可以是来自由拖放操作生成的 datatransfer 对象,或者来自 htmlcanvaselement 上的 mozgetasfile() api。在gecko中,特权代码可以创建代表任何本地文件的file对象,而无需用户交互
file 对象是特殊类型的 blob,且可以用在任意的 blob 类型的 context 中。比如说, filereader, url.createobjecturl(), createimagebitmap(), 及 xmlhttprequest.send() 都能处理 blob 和 file。
blob 对象表示一个不可变、原始数据的类文件对象。指向的是本地的临时地址,blob 表示的不一定是javascript原生格式的数据。file 接口基于blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
base64 是一组相似的二进制到文本(binary-to-text)的编码规则,使得二进制数据在解释成 radix-64 的表现形式后能够用 ascii 字符串的格式表示出来。base64 这个词出自一种 mime 数据传输编码。如果是图片的base64,可以是可以用来压缩
他们之间是可以相互转化的,上传图片一般会拿到blob和file
压缩我们选用canvas来进行压缩,todataurl方式会把图片自动转成base64
export function translate(imgdata, callback) { var img = new image(); img.src = imgdata.tempfilepaths[0]; img.onload = function() { var that = this; var h = that.height; // 保证压缩后的高度一样 var w = that.width; // 保证压缩后的宽度一样 var canvas = document.createelement('canvas'); //创建canvas var ctx = canvas.getcontext('2d'); //2d格式 // 创建宽高属性,并给canvas新的属性节点 var anw = document.createattribute("width"); anw.nodevalue = w; var anh = document.createattribute("height"); anh.nodevalue = h; canvas.setattributenode(anw); canvas.setattributenode(anh); ctx.drawimage(that, 0, 0, w, h); // 绘画到canvas里面 var quality = 0.1; //可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略 var base64 = canvas.todataurl('image/jpeg', quality);//转换成base64 canvas = null; var res = dataurltofile(base64,imgdata.tempfiles[0].name); callback(res); } }
function base64tofile(dataurl, filename) { //将base64转换为文件 var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new uint8array(n); while (n--) { u8arr[n] = bstr.charcodeat(n); } return new file([u8arr], filename, {type: mime}); }
function base64toblob(dataurl) { //base64转blob var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new uint8array(n); while (n--) { u8arr[n] = bstr.charcodeat(n); } return new blob([u8arr], { type: mime }); }
function blobtobase64(blob, callback) { //blob转base64 let reader = new filereader(); reader.onload = function (e) { callback(e.target.result); } reader.readasdataurl(blob); }
除了以上的方法也可以使用canvas转化成base64
方法一:
function blobtofile(blob, filename, type) { //blob转file let files = new window.file([blob], filename, {type: type}) return files }
方法二:
function blobtofile(blob, filename){ // blob转file blob.lastmodifieddate = new date(); blob.name = filename; return blob; };
function filetobase64(file){ //file转bse64 let reader = new filereader(); reader.readasdataurl(file); reader.onload = function (e) { return e.target.result } }
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。