1 篇博文 含有标签「imgUploadPro」

<div class="imgUpload">
    <input type="file" accept="image/*" capture="camera" class="imgUploadIpt">
    <img src="1.png" alt="">
</div>

.imgUpload {
    width: 88px;
    height: 88px;
    position: relative;
}
.imgUpload input[type='file'] {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    z-index: 2;
}
.imgUpload img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

function ImgUpload(ele, files, options ) {
    this.ele = ele;//点击的input元素
    this.files = files;//图片file
    this.compression = options.compression || false;//是否开启压缩默认否
    this.maxWidth = options.maxWidth || 800;//压缩最大宽度
    this.maxHeight = options.maxHeight || 800;//压缩最大高度
    this.callback = options.callback;//回调
    this.init();
}
ImgUpload.prototype = {
    init: function () {
        this.onChangeUploadFile();
    },
    onChangeUploadFile: function () {
        var _this = this;
        //判断文件是否添加进来
        if (this.files.length == 0) {
            return false;
        }
        var file = this.files[0];
        //判断上传的是不是图片
        if (file.type.indexOf('image') === -1) {
            alert("您上传的不是图片！");
            return false;
        }
        //上传图片进行最大限制
        var filesize = Math.floor((file.size) / 1024);
        if (filesize > 1024 * 20) {
            alert("上传大小不能超过20M.");
            return false;
        }
        this.ele.parent().find("img").attr("src", window.URL.createObjectURL(file));
        if( !this.compression ) {
            if (this.callback) {
                this.callback( file );
            }
        }else {
            // 压缩图片需要的一些元素和对象
            var reader = new FileReader(), img = new Image();
            //result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容
            reader.readAsDataURL(file);
            // 文件base64化，以便获知图片原始尺寸
            reader.onload = function(e) {
                img.src = e.target.result;
            };
            // 缩放图片需要的canvas
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            img.onload = function () {
                // 图片原始尺寸
                var originWidth = this.width;
                var originHeight = this.height;
                // 最大尺寸限制
                var maxWidth = _this.maxWidth, maxHeight = _this.maxHeight;
                // 目标尺寸
                var targetWidth = originWidth, targetHeight = originHeight;
                // 图片尺寸超过限制
                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返回
                canvas.toBlob(function (blob) {
                    if (_this.callback) {
                        _this.callback( blob );
                    }
                }, file.type || 'image/png');
            };
        }
    }
}

$('.imgUploadIpt').on('change', function (event) {
    new ImgUpload($(this), event.target.files, {
        compression: true, //开启压缩默认不压缩
        maxWidth: 600, //开启压缩图片最大宽度
        maxHeight: 600, //开启压缩图片最大高度
        callback:function (file) {//回调函数
            console.log(file);
        }
    })
})