js壓縮圖片（ajax上傳）

阿新 • • 發佈：2019-01-28

var pre;//源圖片名稱 /** * 獲得base64 * @param {Object} obj * @param {Number} [obj.width] 圖片需要壓縮的寬度，高度會跟隨調整 * @param {Number} [obj.quality=0.8] 壓縮質量，不壓縮為1 * @param {Function} [obj.before(this, blob, file)] 處理前函式,this指向的是input:file * @param {Function} obj.success(obj) 處理後函式 * */

$.fn.localResizeIMG = function(obj) { this.on('change', function() { var file = this.files[0]; pre = file.name; var URL = window.URL || window.webkitURL; var blob = URL.createObjectURL(file); // 執行前函式 if ($.isFunction(obj.before)) { obj.before(this

, blob, file); } _create(blob, file); this.value = ''; // 清空臨時資料 }); /** * 生成base64 * @param blob 通過file獲得的二進位制 */ function _create(blob) { var img = new Image(); img.src = blob; img.onload = function

() { var that = this; //生成比例 var w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = w / scale; //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); $(canvas).attr({ width : w, height : h }); ctx.drawImage(that, 0, 0, w, h); /** * 生成base64 * 相容修復移動裝置需要引入mobileBUGFix.js */ var base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8); // 修復IOS if (navigator.userAgent.match(/iphone/i)) { var mpImg = new MegaPixImage(img); mpImg.render(canvas, { maxWidth : w, maxHeight : h, quality : obj.quality || 0.8 }); base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8); } // 修復android if (navigator.userAgent.match(/Android/i)) { var encoder = new JPEGEncoder(); base64 = encoder.encode(ctx.getImageData(0, 0, w, h), obj.quality * 100 || 80); } // 生成結果 var result = { base64 : base64, clearBase64 : base64.substr(base64.indexOf(',') + 1) }; // 執行後函式 obj.success(result); }; } }; $(function() { $("input[type=file]").each(function() { var _this = $(this); _this.localResizeIMG({ width : 400, quality : 0.001, success : function(result) { //獲取字尾名 var att = pre.substr(pre.lastIndexOf(".")); //壓縮後圖片的base64字串 var base64_string = result.clearBase64; //圖片預覽 var imgObj = $("#img"); imgObj.attr("src", "data:image/jpeg;base64," + base64_string) .show(); //拼接data字串，傳遞會後臺 var fileData = $("#fileData"); fileData.val(att + "," + imgObj.attr("src")); //此處可直接使用ajax上傳，也可存於form，表單提交上傳 //此處例子使用ajax提交 $.ajax({ type : "POST", url : "<%=request.getContextPath()%>/doUploadImg", data :{ imgData : fileData.val() }, dataType : "json", success : function(msg){ alert(msg); } }); } }); }); });

js壓縮圖片（ajax上傳）

js壓縮圖片（ajax上傳）

js壓縮圖片之後在上傳

js讀取圖片以及AJAX上傳圖片注意事項

利用LocalResizeIMG外掛壓縮圖片通過ajax上傳圖片(ASP版)

圖片貼上上傳,預覽——相容ie（手動上傳）和谷歌瀏覽器（貼上或拖拽上傳）

day20JavaWeb（檔案上傳）

SpringMVC（14） - spring的多部件（檔案上傳）支援

spring的多部件（檔案上傳）支援

dokuwiki學習（九）——編輯媒體檔案（覆蓋上傳）

使用FormData對包含檔案型別的form表單進行非同步提交（檔案上傳）並配置回撥

SpringMVC_day02_8（檔案上傳）

PHP封裝成類（檔案上傳）

PHP大檔案上傳（切片上傳）

Picgo + Gitee +Typora（自動上傳）搭建markdown免費相簿

移動端通過ajax上傳圖片（文件）並在前臺展示——通過H5的FormData對象

Js 壓縮圖片 ajax 上傳

前端js壓縮上傳圖片多圖、單圖 ajax上傳

TP5中含圖片的表單ajax上傳（不含圖片回顯）

java上傳並壓縮圖片（等比例壓縮或者原尺寸壓縮）

bootstrap-wysiwyg中JS控制元件富文字中的圖片由本地上傳到伺服器（阿里雲、七牛、自己的資料庫）

js壓縮圖片（ajax上傳）

相關推薦