一个本地图片预览的jQuery插件

通过使用新的API或ie滤镜将图片转为Base64，再将Base64图片数据设置到img的src属性，就能将本地图片显示出来了。

本插件写的简单，有些地方不够严谨，如果需要使用，请根据实际情况来优化代码。

/*!
 * previewlocimg.js v1.0.0 
 *
 * Copyright 2017 Van
 * 
 */
(function() {
//  定义构造函数
    var preview = function(ele, opt) {
        this.$element = ele;
        this.defaults = {
            'width' : '150px',
            'height' : '200px',
//          'lineheight': '200px',
            'textalign' : 'center',
            'border' : '1px solid silver',
            'color' : 'darkgray',
            'background' : 'none',
            'text' : '选择图片...'
        },
        this.options = $.extend({}, this.defaults, opt);
    }
    
//  定义方法
    preview.prototype = {
        makeDom : function() {
            var $this = this.$element;
            $this.css({'display': 'none', 'width': '0px', 'height': '0px'});
            $this.wrap('<div class="previewlocimg"></div>');
            
            if (!this.options.border) {
                this.options.border = 'none';
            }
            
//          $this.attr('accept', 'image/jpeg,image/jpg,image/png,image/gif')
            $this.attr('accept', '.jpg,.jpeg,.png,.gif')
            
            $this.parent().css({
                'box-sizing' : 'border-box',
                'position' : 'relative',
                'z-index' : '0',
                'width' : this.options.width,
                'height' : this.options.height,
                'line-height': this.options.height,
                'text-align' : this.options.textalign,
                'border' : this.options.border,
                'color' : this.options.color,
                'background' : this.options.background,
            });
            
            var defaultimg = 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==';
            $this.parent().prepend("<img src='" + defaultimg + "' style='max-width: 100%; max-height: 100%; vertical-align: middle; margin-top: -4px;'/>");
            $this.parent().append("<span style='position: absolute;left: 0px;right: 0px;z-index: -1;'>" + this.options.text + "</span>");
            
            $this.parent().off('click').on('click', function() {
                $(this).children()[1].click()
            });
            
            $this.off('change').on('change', function() {
                preview.prototype.loadImg($this, $this.prev())
            });
//          $this.change(this.loadImg($this, $this.prev()));
            
            return $this;
        },
        loadImg : function(obj, preview) {  //加载图像
            var $file = obj;
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = preview;
            var $imgBox = $file.parent();
            
            if(fileObj && fileObj.files && fileObj.files[0]) {
//              alert('--0')
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                
                $img.attr('src', dataURL);
            }else {
//              alert('--1')
                $file.show();
                $file.select();
                dataURL = document.selection.createRange().text;
//              alert(dataURL)
                $file.hide();
                var size = this.getImgSize(dataURL);
//              alert(size.width + " + " + size.height);
                
//              var maxSize = $imgBox.width() >= $imgBox.height() ? $imgBox.width() : $imgBox.height();
        
                var compSize = this.ratioCompressSize(size.width, size.height, $imgBox.width(), $imgBox.height());
                
//              alert(compSize.width + " + " + compSize.height);
                
        //      dataURL = $file.val();
                var imgObj = $img.get(0);
                imgObj.style.width = compSize.width;
                imgObj.style.height = compSize.height;
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
            }
        },
        getImgSize : function(src) {
            var tempEl;
            var size = {
                width : 0,
                height : 0
            };
            if (!tempEl) {
                tempEl = document.createElement('div');
                tempEl.style.position = 'absolute';
                tempEl.style.width = '1px';
                tempEl.style.height = '1px';
                tempEl.style.left = '-9999px';
                tempEl.style.top = '-9999px';
                tempEl.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)";
                document.body.insertBefore(tempEl, document.body.firstChild);
            }
            
            tempEl.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
            
            size.width = tempEl.offsetWidth;
            size.height = tempEl.offsetHeight;
            
            return size;
        },
        ratioCompressSize : function(width, height, maxWidth, maxHeight) {
            
            width = parseFloat(width);
            height = parseFloat(height);
//          maxLength = parseFloat(maxLength);
            maxWidth = parseFloat(maxWidth);
            maxHeight = parseFloat(maxHeight);
            
            var ratio;
            var size = {
                width : 0,
                height : 0
            };
            
            /**
             * 根据缩放尺寸来调整图像大小，
             */
            
            var maxlength = maxWidth >= maxHeight ? 'mw' : 'mh';
            
            var widthRatio = maxWidth / width;      //宽度缩放比例
            var heightRatio = maxHeight / height;   //高度缩放比例
                
//              alert(width + " + " + height + " + " + maxWidth + " + " + maxHeight)
                
            if (width <= maxWidth && height > maxHeight) {
                
                size.width = width * heightRatio;
                size.height = height * heightRatio
            } else if (width > maxWidth && height <= maxHeight){
                
                size.width = size * widthRatio;
                size.height = size * widthRatio;
            }else if(width > maxWidth && height > maxHeight) {
                
                if (height * widthRatio > maxHeight) {
                    //如果以宽度缩放尺寸，高度任然超出最大高度，那就以高度来缩放尺寸
                    size.width = width * heightRatio;
                    size.height = height * heightRatio;
                    
                } else if (width * heightRatio > maxWidth) {
                    //如果以高度缩放尺寸，宽度任然超出最大高度，那就以宽度来缩放尺寸
                    size.width = width * widthRatio;
                    size.height = height * widthRatio;
                    
                }
            }else {
                size.width = width;
                size.height = height;
            }
            
            return size;
            
        }
        
    }
    
    $.fn.previewlocimg = function(options) {
        var previews = new preview(this, options);
        return previews.makeDom();
    }
})();