图片上传前 压缩,base64图片压缩Exif.js处理ios拍照倒置等问题

it2022-05-07  4

曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题,当时也是在看了网上的各种代码后才有思路进行编写,希望留下一些大佬的代码在以后小弟我方便学习

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div> <img src="imgzip.jpg" alt="" width="350"> <img alt="" id="transform"> </div> <script> /** * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径 * @param {Object} obj * obj 对象 有 width, height, quality(0-1) * @param {Object} callback * 回调函数有一个参数,base64的字符串数据 quality 图片缩放比例0-1 越大越清晰 */ // 调用函数处理图片                  dealImage("imgzip.jpeg", { // 注意:在pc端可以用绝对路径或相对路径,移动端最好用绝对路径 // width: 1000, quality: 0.5 }, function (base) { document.getElementById("transform").src = base; var mb = showSize(base); }) function showSize(base64url) { //获取base64图片大小,返回字节 var str = base64url.replace('data:image/png;base64,', ''); var equalIndex = str.indexOf('='); if (str.indexOf('=') > 0) { str = str.substring(0, equalIndex); } var strLength = str.length; var fileLength = parseInt(strLength - (strLength / 8) * 2); console.log("压缩后的图片size", fileLength + "B") return fileLength; } function dealImage(path, obj, callback) { var img = new Image(); img.src = path; img.onload = function () { var that = this; var ext = path.substring(path.lastIndexOf(".") + 1).toLowerCase(); // 默认按比例压缩 var w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height || (w / scale); var quality = obj.quality; // 默认图片质量为0.7,可以为image/jpeg或image/webp类型的图片设置图片质量,取值0-1,超出则以默认值0.92替代 //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 创建属性节点 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); // 图像质量 if (obj.quality && obj.quality <= 1 && obj.quality > 0) { quality = obj.quality; } // quality值越小,所绘制出的图像越模糊 console.log("tup", ext) var base64 = canvas.toDataURL('image/jpeg', quality); // 回调函数返回base64的值 callback(base64); } } </script> </body> </html>

上传前不失真,有需要的去做按比例压缩(算法自己想)

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。

因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正。

利用exif.js读取照片的拍摄信息,详见 http://code.ciaoca.com/javascript/exif-js/

这里主要用到Orientation属性。

Orientation属性说明如下: 旋转角度0° 参数1 顺时针90° 6 逆时针90° 8 180° 3

接下来的代码是大佬写的,我用于学习借鉴:

下面代码原链接:https://blog.csdn.net/linlzk/article/details/48654835

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>图片上传</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/uploadPicture/mobileBUGFix.mini.js" ></script> <script type="text/javascript" src="js/uploadPicture/uploadImage.js" ></script> <script type="text/javascript" src="js/exif.js" ></script> </head> <body> <div style="height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;"> 上传图片: <input type="file" accept="image/*" id="uploadImage" capture="camera" onchange="selectFileImage(this);" /> </div> <div style="margin-top: 10px;"> <img alt="preview" src="" id="myImage"/> </div> </body> </html> function selectFileImage(fileObj) { var file = fileObj.files['0']; //图片方向角 added by lzk var Orientation = null; if (file) { console.log("正在上传,请稍后..."); var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式 if (!rFilter.test(file.type)) { //showMyTips("请选择jpeg、png格式的图片", false); return; } // var URL = URL || webkitURL; //获取照片方向角属性,用户旋转控制 EXIF.getData(file, function() { // alert(EXIF.pretty(this)); EXIF.getAllTags(this); //alert(EXIF.getTag(this, 'Orientation')); Orientation = EXIF.getTag(this, 'Orientation'); //return; }); var oReader = new FileReader(); oReader.onload = function(e) { //var blob = URL.createObjectURL(file); //_compress(blob, file, basePath); var image = new Image(); image.src = e.target.result; image.onload = function() { var expectWidth = this.naturalWidth; var expectHeight = this.naturalHeight; if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) { expectWidth = 800; expectHeight = expectWidth * this.naturalHeight / this.naturalWidth; } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) { expectHeight = 1200; expectWidth = expectHeight * this.naturalWidth / this.naturalHeight; } alert(expectWidth+','+expectHeight); var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = expectWidth; canvas.height = expectHeight; ctx.drawImage(this, 0, 0, expectWidth, expectHeight); alert(canvas.width+','+canvas.height); var base64 = null; var mpImg = new MegaPixImage(image); mpImg.render(canvas, { maxWidth: 800, maxHeight: 1200, quality: 0.8, orientation: Orientation }); base64 = canvas.toDataURL("image/jpeg", 0.8); //uploadImage(base64); $("#myImage").attr("src", base64); }; }; oReader.readAsDataURL(file); } }

用到的第三方js文件:mobileBUGFix.mini.js

附上Exif.js说明

http://code.ciaoca.com/javascript/exif-js/


最新回复(0)