位置:首页 » 文章/教程分享 » easyui 图片加载预览

引入外部js文件

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

图片上传控件

<input name="imgFile" id="imgFile" type="file" style="width: 100%" accept="image/png,image/jpeg,image/gif" onclick="setImgPrev()">

图片预览控件

<img id="imgView" src="" style="height: 160px;" alt="预览图" />

实现上传预览效果

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)
   };
 }
};
另附测试界面: