easyui 图片加载预览

最新推荐文章于 2020-01-09 13:39:45 发布

泡泡菜叶

最新推荐文章于 2020-01-09 13:39:45 发布

阅读量4.9k

点赞数

分类专栏： easyui 文章标签： easyui 图片预览

本文链接：https://blog.youkuaiyun.com/u014656173/article/details/53700611

版权

easyui 专栏收录该内容

10 篇文章

订阅专栏

该博客介绍了如何在EasyUI中实现图片上传并预览的功能，通过引入外部JS文件和利用LocalResizeIMG.js插件，详细展示了创建图片上传控件及上传预览效果的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入外部js文件

<script type="text/javascript" src="../LocalResizeIMG.js"></script>
<script src="../jquery.form.js"></script>

图片上传控件

<tr>
                    <td></td>
                    <td><input name="imgFile" id="imgFile" type="file"
                        style="width: 100%" accept="image/png,image/jpeg,image/gif"
                        onclick="setImgPrev()"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><img id="imgView" src="" style="height: 160px;" alt="预览图" /></td>
                </tr>

实现上传预览效果

function setImgPrev() {
        $('#imgFile').localResizeIMG({
            height : 160,
            quality : 0.8,
            success : function(result) {
                $("#imgView").attr('src', result.base64);
            }
        });
    }

LocalResizeIMG.js插件

    /**
     * 获得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) 处理后函数
     * @example
     *
     */
    $.fn.localResizeIMG = function(obj) {
        this.on('change', function() {
            var file = this.files[0];
            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);
            };
        }
    };


    // 例子
    /*
    $('input:file').localResizeIMG({
        width: 100,
        quality: 0.1,
        //before: function (that, blob) {},
        success: function (result) {
            var img = new Image();
            img.src = result.base64;

            $('body').append(img);
            console.log(result);
        }
    });
*/

另附测试界面：
测试结果