JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度
2018-04-27 15:58
781 查看
base64转blob对象
/** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = function(base64){ var base64Arr = base64.split(','); var imgtype = ''; var base64String = ''; if(base64Arr.length > 1){ //如果是图片base64,去掉头信息 base64String = base64Arr[1]; imgtype = base64Arr[0].substring(base64Arr[0].indexOf(':')+1,base64Arr[0].indexOf(';')); } // 将base64解码 var bytes = atob(base64String); //var bytes = base64; var bytesCode = new ArrayBuffer(bytes.length); // 转换为类型化数组 var byteArray = new Uint8Array(bytesCode); // 将base64转换为ascii码 for (var i = 0; i < bytes.length; i++) { byteArray[i] = bytes.charCodeAt(i); } // 生成Blob对象(文件对象) return new Blob( [bytesCode] , {type : imgtype}); };
压缩图片
/** 压缩图片 * @param {Object} file 上传对象files[0] * @param {Object} options 压缩设置对象 * @param {Function} callback 回调函数 * @result {Object} 返回blob文件对象 * */ var compressImg = function(file,options,callback){ var self = this; var imgname = file.name; var imgtype = (imgname.substring(imgname.lastIndexOf('.') + 1)).toLowerCase(); if(imgtype == 'jpg' || imgtype == 'jpeg'){ imgtype = 'image/jpeg'; }else{ imgtype = 'image/png'; } // 用FileReader读取文件 var reader = new FileReader(); // 将图片读取为base64 reader.readAsDataURL(file); reader.onload = function(evt){ var base64 = evt.target.result; // 创建图片对象 var img = new Image(); // 用图片对象加载读入的base64 img.src = base64; img.onload = function () { var that = this, canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); canvas.setAttribute('width', that.width); canvas.setAttribute('height', that.height); // 将图片画入canvas ctx.drawImage(that, 0, 0, that.width, that.height); // 压缩到指定体积以下(M) if(options.size){ var scale = 0.9; (function f(scale){ if(base64.length / 1024 / 1024 > options.size && scale > 0){ base64 = canvas.toDataURL(imgtype, scale); scale = scale - 0.1; f(scale); }else{ callback(base64); } })(scale); } else if(options.scale){ // 按比率压缩 base64 = canvas.toDataURL(imgtype, options.scale); callback(base64); } } } };
图片预览
/** * 图片预览 * @param {Object} $fileInput 文件上传file * @param {Object} $previewImg 预览图片的image元素 */ function previewImg($fileInput, $previewImg) { $fileInput.onchange = function ($event) { var $target = $event.target; if ($target.files && $target.files[0]) { var reader = new FileReader(); reader.onload = function(evt){ $previewImg.src = evt.target.result; } reader.readAsDataURL($target.files[0]); } } }
详细图片预览可参考地址:《搞清Image加载事件(onload)、加载状态(complete)后,实现图片的本地预览,并自适应于父元素内(完成)》
图片旋转到正确的角度(验证可行)
/** * 将图片旋转到正确的角度 * (解决移动端上传的图片角度不正确的问题) * (旋转后返回的是base64,可以参照本目录下的convertBase64ToBlob.js,将base64还原为file input读取得到的文件对象) * @param {Dom Object} $fileInput 文件上传输入框 * @param {Function} callback 旋转完成后的回调函数 */ function resetImgOrientation($fileInput, callback) { // 绑定change事件 $fileInput.onchange = function ($event) { var $target = $event.target; if ($target.files && $target.files[0]) { // 获取图片旋转角度 getOrientation($target.files[0], function (orientation) { var reader = new FileReader(); reader.readAsDataURL($target.files[0]); reader.onload = function(evt){ var base64 = evt.target.result; // 将图片旋转到正确的角度 resetOrientation(base64, orientation, function (resultBase64) { callback(resultBase64); }); } }); } } } // 获取图片旋转的角度 function getOrientation(file, callback) { var reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = function(e) { var view = new DataView(e.target.result); if (view.getUint16(0, false) != 0xFFD8) return callback(-2); var length = view.byteLength, offset = 2; while (offset < length) { var marker = view.getUint16(offset, false); offset += 2; if (marker == 0xFFE1) { if (view.getUint32(offset += 2, false) != 0x45786966) return callback(-1); var little = view.getUint16(offset += 6, false) == 0x4949; offset += view.getUint32(offset + 4, little); var tags = view.getUint16(offset, little); offset += 2; for (var i = 0; i < tags; i++) if (view.getUint16(offset + (i * 12), little) == 0x0112) return callback(view.getUint16(offset + (i * 12) + 8, little)); } else if ((marker & 0xFF00) != 0xFF00) break; else offset += view.getUint16(offset, false); } return callback(-1); }; } // 将图片旋转到正确的角度 function resetOrientation(srcBase64, srcOrientation, callback) { var img = new Image(); img.onload = function() { var width = img.width, height = img.height, canvas = document.createElement('canvas'), ctx = canvas.getContext("2d"); // set proper canvas dimensions before transform & export if ([5,6,7,8].indexOf(srcOrientation) > -1) { canvas.width = height; canvas.height = width; } else { canvas.width = width; canvas.height = height; } // transform context before drawing image switch (srcOrientation) { case 2: ctx.transform(-1, 0, 0, 1, width, 0); break; case 3: ctx.transform(-1, 0, 0, -1, width, height ); break; case 4: ctx.transform(1, 0, 0, -1, 0, height ); break; case 5: ctx.transform(0, 1, 1, 0, 0, 0); break; case 6: ctx.transform(0, 1, -1, 0, height , 0); break; case 7: ctx.transform(0, -1, -1, 0, height , width); break; case 8: ctx.transform(0, -1, 1, 0, 0, width); break; default: ctx.transform(1, 0, 0, 1, 0, 0); } // draw image ctx.drawImage(img, 0, 0); // export base64 callback(canvas.toDataURL('image/jpeg')); }; img.src = srcBase64; };
参考地址:
file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度
H5图片压缩与上传
Accessing JPEG EXIF rotation data in JavaScript on the client side
相关文章推荐
- file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度
- H5技术完美实现调用手机摄像头、相册。图片上传base64,图片压缩、预览、删除以及图片旋转90度的处理--demo。
- js实现把图片的绝对路径转为base64字符串、blob对象再上传
- vue.js图片转Base64上传图片并预览的实现方法
- 微信公众号开发《四》使用微信JS-SDK实现手机图片上传,支持压缩、预览。并下载图片到自身服务器
- JS和Canvas实现图片的预览压缩和上传功能
- JS前端上传图片、压缩、并且处理旋转问题,生成base64数据
- js加canvas实现图片的预览压缩和上传
- vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
- 原生js FileReader对象实现图片上传本地预览效果
- js上传照片,预览,压缩后base64编码发送后台,及将后台返回的base64图片显示到HTML
- JS前端上传图片、压缩、并且处理旋转问题,生成base64数据
- 原生js将图片转成base64,实现预览效果
- 用html5 canvas js 实现图片大小的压缩显示,图片上传后可在线预览。
- vue.js 实现图片本地预览 裁剪 压缩 上传功能
- Windows Mobile上实现图片任意角度旋转
- 模仿微信朋友圈 仿微信js-sdk wx.previewImage javascript实现,支持图片预览,滑动切换,双指缩放,图片缓存 h5 html5 js
- JavaScript 中的FileReader对象(实现上传图片预览)
- C#实现任意角度旋转图片(方法1)
- JS实现上传图片实时预览