js 图片压缩上传（base64位）以及上传类型分类
生活随笔
收集整理的這篇文章主要介紹了
js 图片压缩上传（base64位）以及上传类型分类
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、input file上傳類型
1.指明只需要圖片
<input type="file" accept='image/*'>2.指明需要多張圖片
<input type="file" multiple accept='image/*'>3.指明調用攝像頭獲取圖片
<input type="file" capture='camera' accept='image/*'>4.調用攝像頭并獲取多張圖片（攝像頭只能單張獲取，multiple無效）
<!-- multiple 無效 --> <input type="file" multiple capture='camera' accept='image/*'>?二、圖片壓縮上傳
（1）移動端IOS上傳的某些圖片預覽時發生了旋轉？
你會發現手機截圖，網絡圖片都不會有旋轉問題，只有手機拍攝的才有，這就跟拍攝時的角度有問題了，所以我們通過??exif.js??獲取角度（Orientation）的值，所獲值分別需要旋轉的角度如下：
| 0° | 1 |
| 順時針90° | 6 |
| 逆時針90° | 8 |
| 180° | 3 |
?
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><script src="js/jquery-1.11.3.min.js"></script><script src="js/exif.js"></script><style>#preview{width:100px;height:110px;}</style></head><body><input type="file" id="files" ><img src="blank.gif" id="preview"><script>var ipt = document.getElementById('files'),img = document.getElementById('preview'),Orientation = null; ipt.onchange = function () {var file = ipt.files[0],reader = new FileReader(),image = new Image();if(file){EXIF.getData(file, function() { Orientation = EXIF.getTag(this, 'Orientation');console.log(Orientation);});reader.onload = function (ev) {image.src = ev.target.result;image.onload = function () {var imgWidth = this.width,imgHeight = this.height;// 控制上傳圖片的寬高if(imgWidth > imgHeight && imgWidth > 600){imgWidth = 600;imgHeight = Math.ceil(600 * this.height / this.width);}else if(imgWidth < imgHeight && imgHeight > 600){imgWidth = Math.ceil(600 * this.width / this.height);imgHeight = 600;}var canvas = document.createElement("canvas"),ctx = canvas.getContext('2d');canvas.width = imgWidth;canvas.height = imgHeight;if(Orientation && Orientation != 1){switch(Orientation){case 6: // 旋轉90度 canvas.width = imgHeight; canvas.height = imgWidth; ctx.rotate(Math.PI / 2); ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);break;case 3: // 旋轉180度 ctx.rotate(Math.PI); ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);break;case 8: // 旋轉-90度 canvas.width = imgHeight; canvas.height = imgWidth; ctx.rotate(3 * Math.PI / 2); ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);break;}}else{ctx.drawImage(this, 0, 0, imgWidth, imgHeight);}var newImageData = canvas.toDataURL("image/jpeg", 0.6);$("img").attr("src", newImageData.replace("data:base64", "data:image/jpeg;base64"));}}reader.readAsDataURL(file);} } </script></body> </html>?
轉載于:https://www.cnblogs.com/wj19940520/p/10207321.html
總結
以上是生活随笔為你收集整理的js 图片压缩上传（base64位）以及上传类型分类的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TCP/IP 免费ARP
- 下一篇： 【写法规范】-- 设计请求返回接口与封