JS图片压缩
(function (mui, window, document, undefined) { mui.init(); var get = function (id) { return document.getElementById(id); }; var qsa = function (sel) { return [].slice.call(document.querySelectorAll(sel)); }; var ui = { imageList: get('image-list'), submit: get('submit') }; ui.clearForm = function () { ui.imageList.innerHTML = ''; ui.newPlaceholder(); }; ui.getFileInputArray = function () { return [].slice.call(ui.imageList.querySelectorAll('input[type="file"]')); }; ui.getFileInputIdArray = function () { var fileInputArray = ui.getFileInputArray(); var idArray = []; fileInputArray.forEach(function (fileInput) { if (fileInput.value != '') { idArray.push(fileInput.getAttribute('id')); } }); return idArray; }; var imageIndexIdNum = 0; ui.newPlaceholder = function () { var fileInputArray = ui.getFileInputArray(); if (fileInputArray && fileInputArray.length > 0 && fileInputArray[fileInputArray.length - 1].parentNode.classList.contains('space')) { return; } imageIndexIdNum++; var placeholder = document.createElement('div'); placeholder.setAttribute('class', 'image-item space'); var closeButton = document.createElement('div'); closeButton.setAttribute('class', 'image-close'); closeButton.innerHTML = 'X'; closeButton.addEventListener('click', function (event) { event.stopPropagation(); event.cancelBubble = true; setTimeout(function () { ui.imageList.removeChild(placeholder); }, 0); return false; }, false); var fileInput = document.createElement('input'); fileInput.setAttribute('type', 'file'); fileInput.setAttribute('name', 'xxxx'); fileInput.setAttribute('accept', 'image/*'); fileInput.setAttribute('id', 'image-' + imageIndexIdNum); var imgdataInput = document.createElement('input'); imgdataInput.setAttribute('type', 'hidden'); imgdataInput.setAttribute('name', 'imgdata'); imgdataInput.setAttribute('id', 'imgdata-' + imageIndexIdNum); placeholder.appendChild(closeButton); placeholder.appendChild(fileInput); placeholder.appendChild(imgdataInput); ui.imageList.appendChild(placeholder); var reader = new FileReader(); var img = new Image(); var file = null; var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var maxWidth = 1200; var maxHeight = 900; fileInput.addEventListener('change', function (event) { file = fileInput.files[0]; if (file) { /* 压缩开始 */ reader.readAsDataURL(file); reader.onload = function (e) { //处理 android 4.1 兼容问题 var base64 = reader.result.split(',')[1]; var dataUrl = 'data:image/png;base64,' + base64; placeholder.style.backgroundImage = 'url(' + dataUrl + ')'; img.src = dataUrl;// e.target.result; } // base64地址图片加载完毕后 img.onload = function () { // 图片原始尺寸 var originWidth = this.width; var originHeight = this.height; // 最大尺寸限制 // 目标尺寸 var targetWidth = originWidth; var targetHeight = originHeight; // 图片尺寸超过400x400的限制 if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > maxWidth / maxHeight) { // 更宽,按照宽度限定尺寸 targetWidth = maxWidth; targetHeight = Math.round(maxWidth * (originHeight / originWidth)); } else { targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / originHeight)); } } // canvas对图片进行缩放 canvas.width = targetWidth; canvas.height = targetHeight; // 清除画布 context.clearRect(0, 0, targetWidth, targetHeight); // 图片压缩 context.drawImage(img, 0, 0, targetWidth, targetHeight); // canvas转为blob并上传 var base64 = canvas.toDataURL('image/jpeg', 0.8); // document.getElementById("imgdata-" + (imageIndexIdNum-1)).value = base64; // return base64; $.ajax({ url: "ajax/save.aspx", data: { base64: base64 }, type: "post", cache: false, async: false, success: function (r) { document.getElementById("imgdata-" + (imageIndexIdNum - 1)).value = r; } }); }; /* 压缩结束 */ placeholder.classList.remove('space'); ui.newPlaceholder(); } }, false); }; ui.newPlaceholder(); })(mui, window, document, undefined);