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);