js 上传图片压缩旋转
Posted kikyoqiang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 上传图片压缩旋转相关的知识，希望对你有一定的参考价值。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js上传图片</title> <script src="Script/plugins/0com/exif.js"></script> </head> <body> <input id="file" type="file"> <script type="text/javascript"> var fileTypes = [‘image/jpeg‘, ‘image/gif‘, ‘image/png‘]; window.onload = function myfunction() var input = document.getElementById(‘file‘); input.onchange = function () var files = this.files; for (var i = 0, len = files.length; i < len; i++) var file = files[i]; if (!fileTypes.includes(file.type)) alert("只可上传图片") return false; if (file.size / 1024 > 1025) photoCompress(file, quality: 0.3 , upload_html5); else upload_html5(file); ; function upload_html5(file) var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", function (e) , false); xhr.addEventListener("load", function (e) var obj = JSON.parse(e.target.responseText); if (obj.code == 200) alert("上传成功"); else alert(obj.message); , false); xhr.addEventListener("error", function (e) console.log(e); alert("上传失败"); , false); xhr.addEventListener("abort", function (e) alert("上传取消"); , false); var fd = new FormData; fd.append("file", file); fd.append("hallName", ‘分会场1‘); fd.append("dateTime", ‘2019-06-21‘); xhr.open("post", "/Common/UploadFile"); xhr.send(fd); /* 三个参数 file：一个是文件(类型是图片格式)， w：一个是文件压缩的后宽度，宽度越小，字节越小 objDiv：一个是容器或者回调函数 photoCompress() */ function photoCompress(file, obj, objDiv) var Orientation = null;//ios选择上传图片是图片角度问题 EXIF.getData(file, function () EXIF.getAllTags(this); Orientation = EXIF.getTag(this, ‘Orientation‘); ); var ready = new FileReader(); /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE, * 如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/ ready.readAsDataURL(file); ready.onload = function () canvasDataURL(this.result, obj, Orientation, objDiv) function canvasDataURL(path, obj, Orientation, callback) var img = new Image(); img.src = path; img.onload = function () var that = this; // 默认按比例压缩 var w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height || (w / scale); var quality = 0.7; // 默认图片质量为0.7 //生成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); if (Orientation != "" && Orientation != 1 && Orientation != undefined) switch (Orientation) case 6://需要顺时针90度旋转 canvas.width = h; canvas.height = w; ctx.rotate(90 * Math.PI / 180); ctx.drawImage(this, 0, -h); break; case 8://需要逆时针90度旋转 canvas.width = h; canvas.height = w; ctx.rotate(-90 * Math.PI / 180); ctx.drawImage(this, -w, 0); break; case 3://需要180度旋转 ctx.rotate(180 * Math.PI / 180); ctx.drawImage(this, -w, -h); break; else ctx.drawImage(that, 0, 0, w, h); // 图像质量 if (obj.quality && obj.quality <= 1 && obj.quality > 0) quality = obj.quality; // quality值越小，所绘制出的图像越模糊 var base64 = canvas.toDataURL(‘image/jpeg‘, quality); // 回调函数返回base64的值 callback(base64); /** * 将以base64的图片url数据转换为Blob * @param urlData * 用url方式表示的base64图片数据 */ function convertBase64UrlToBlob(urlData) var arr = urlData.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 ); </script> </body> </html>
以上是关于js 上传图片压缩旋转的主要内容，如果未能解决你的问题，请参考以下文章
js图片前端压缩多图上传（旋转其实已经好了只是手机端有问题要先压缩再旋转）