exif.js 載入出來的PNG映像背景是黑色的？

這是沒有上傳前的圖片

這是上傳後的圖片

運用exif.js解析的圖片，不知道什麼原因，上傳的png格式的不知道為什麼是黑色背景

下面直接貼代碼吧

/** * 上傳多張圖片 * @method uploadImg * @params url:上傳圖片請求的伺服器端的檔案的地址, * @params container:圖片上傳之後渲染到哪個父盒子, * @params maxCount:最多可上傳的數目, * @params maxMb:上傳的大小MB * @params fileInput:上傳圖片的檔案域 * @params scale:圖片的縮放比例  大小 * @params name:參數名稱 * @params success:上傳成功之後執行的回呼函數 * @params error:上傳失敗之後執行的回呼函數 * @params warn:不符合上傳條件時執行的回呼函數 * @return 元素對象.uploadImg(Objext) */(function($){         $.fn.extend({             uploadImg:function(opt){                 var up=new UploadImg(opt,this);        }         });    function UploadImg(option,self){       var _defaults={          url:"",          container:self,          maxCount:3,          maxMb:2,          fileInput:$(self).find(".fileImg"),          scale:0.8,          name:"img",          success:function(data,idx){                          },          error:function(msg){             alertBox(msg,1,"關 閉","",cancelAlert);          },          warn:function(msg){             alertBox(msg,1,"關 閉","",cancelAlert);          }       };       this.opt=$.extend({},_defaults,option);       this.init(self);    }    UploadImg.prototype={        init:function(self){           var _this=this;           var liIndex=0;           // 給檔案域綁定事件           _this.opt.fileInput.on('change',function(){               var files=this.files?this.files:null,                   _tar=files[0],                   maxSize=_this.opt.maxMb*1024*1024,                   reg=/\.(jpg)|(jpeg)|(gif)|(png)$/i,                   err="",                   html="";               if(!(reg.test(_tar.name))){                  err="請上傳jpg/jpeg/gif/png格式的圖片";               }else{                    if(_tar.size>maxSize){                      err="圖片尺寸超出限制，請上傳低於"+_this.opt.maxMb+"M的圖片";                   }               }                              if(err){                   _this.opt.warn && _this.opt.warn(err);                   return;               }                               liIndex++;                              html='
' +'' +'' +'
';               $(html).prependTo($(_this.opt.container));               _this.getCount(liIndex);               // 上傳圖片               _this.zipImg({                     files:files,                     scale:_this.opt.scale,                     callback:function(tar){                     if(tar.constructor!='Array'){                        tar=[tar];                     }                     _this.submit(tar,liIndex,self);                     }               })           })           // 關閉           $(_this.opt.container).on('click','.upload_delete',function(){                  liIndex-=1;                  $(this).parents('li.upload-img').remove();                  _this.getCount(liIndex);           })        },        //壓縮圖片方法        zipImg: function(cfg){         /*          * cfg.files      input對象觸發onchange時候的files          * cfg.scale      壓縮比例          * cfg.callback     壓縮成功後的回調          */          var _this = this;          var options = cfg;         [].forEach.call(options.files, function(v, k){           var fr = new FileReader();             fr.onload= function(e) {               var oExif = EXIF.readFromBinaryFile(new BinaryFile(e.target.result)) || {};             var $img = document.createElement('img');                                      $img.onload = function(){                                _this.fixDirect().fix($img, oExif, options.callback,options.scale);             };               if(typeof(window.URL) != 'undefined'){              $img.src = window.URL.createObjectURL(v);             }else{              $img.src = e.target.result;                    }           };             //fr.readAsDataURL(v);           fr.readAsBinaryString(v);         });         },        //調整圖片方向        fixDirect: function(){         var r = {};         r.fix = function(img, a, callback,scale) {           var n = img.naturalHeight,             i = img.naturalWidth,             c = 1024,             o = document.createElement("canvas"),             s = o.getContext("2d");           a = a || {};           //o.width = o.height = c;           //debugger;           if(n > c || i > c){             o.width = o.height = c;           }else{             o.width = i;             o.height = n;           }           a.Orientation = a.Orientation || 1;           r.detectSubSampling(img) && (i /= 2, n /= 2);           var d, h;           i > n ? (d = c, h = Math.ceil(n / i * c)) : (h = c, d = Math.ceil(i / n * c));           // var g = c / 2,           var g = Math.max(o.width,o.height)/2,             l = document.createElement("canvas");           if(n > c || i > c){             l.width = g, l.height = g;           }else{             l.width = i;             l.height = n;             d = i;             h =n;           }           //l.width = g, l.height = g;           var m = l.getContext("2d"), u = r.detect(img, n) || 1;           s.save();           r.transformCoordinate(o, d, h, a.Orientation);           var isUC = navigator.userAgent.match(/UCBrowser[\/]?([\d.]+)/i);           if (isUC && $.os.android){             s.drawImage(img, 0, 0, d, h);           }else{             for (var f = g * d / i, w = g * h / n / u, I = 0, b = 0; n > I; ) {               for (var x = 0, C = 0; i > x; )                 m.clearRect(0, 0, g, g), m.drawImage(img, -x, -I), s.drawImage(l, 0, 0, g, g, C, b, f, w), x += g, C += f;               I += g, b += w             }           }           s.restore();           a.Orientation = 1;           img = document.createElement("img");           img.onload = function(){             a.PixelXDimension = img.width;             a.PixelYDimension = img.height;             //e(img, a);           };                      callback && callback(o.toDataURL("image/jpeg", scale).substring(22));//壓縮圖片         };         r.detect = function(img, a) {           var e = document.createElement("canvas");           e.width = 1;           e.height = a;           var r = e.getContext("2d");           r.drawImage(img, 0, 0);           for(var n = r.getImageData(0, 0, 1, a).data, i = 0, c = a, o = a; o > i; ) {             var s = n[4 * (o - 1) + 3];             0 === s ? c = o : i = o, o = c + i >> 1           }           var d = o / a;           return 0 === d ? 1 : d         };         r.detectSubSampling = function(img) {           var a = img.naturalWidth, e = img.naturalHeight;           if (a * e > 1048576) {             var r = document.createElement("canvas");             r.width = r.height = 1;             var n = r.getContext("2d");             return n.drawImage(img, -a + 1, 0), 0 === n.getImageData(0, 0, 1, 1).data[3]           }           return !1;         };         r.transformCoordinate = function(img, a, e, r) {           switch (r) {             case 5:             case 6:             case 7:             case 8:               img.width = e, img.height = a;               break;             default:               img.width = a, img.height = e           }           var n = img.getContext("2d");           switch (r) {             case 2:               n.translate(a, 0), n.scale(-1, 1);               break;             case 3:               n.translate(a, e), n.rotate(Math.PI);               break;             case 4:               n.translate(0, e), n.scale(1, -1);               break;             case 5:               n.rotate(.5 * Math.PI), n.scale(1, -1);               break;             case 6:               n.rotate(.5 * Math.PI), n.translate(0, -e);               break;             case 7:               n.rotate(.5 * Math.PI), n.translate(a, -e), n.scale(-1, 1);               break;             case 8:               n.rotate(-.5 * Math.PI), n.translate(-a, 0)           }         };         return r;        },        getCount:function(idx){            var _this=this,                size=$(_this.opt.container).find('li.upload-img').size(),                $uploadLi=$(_this.opt.fileInput).parents("li");            if(idx>=_this.opt.maxCount){               $uploadLi.hide();            }else{               $uploadLi.show();            }        },        submit:function(files,idx,t){           var _this=this,               files=files[0],               param={},               url=_this.opt.url;           param[_this.opt.name]=files;           $.ajax({                 url:url,                 type:"post",                 data:param,                 success:function(data){                  data=JSON.parse(data);                  _this.opt.success && _this.opt.success(data,idx);                  $(t).find("li").eq(0).removeClass('upload-loading').find('img').attr('src',data.url);                 },                 error:function(data){                 _this.opt.error && _this.opt.error(data.msg);                  }           })        }    }})(jQuery);

壓縮圖片中用到的EXIF就在那裡處理圖片的，不知道怎麼處理上傳後圖片的PNG格式的圖片，背景是黑的，求大神解救！！！

也可以直接下載運行，主要是遇到的透明的png合成的時候是有黑色背景！目的是去除黑色背景！！

git clone https://github.com/Shoestrong/uploadimg.git

補充一點：剛發現的，上傳png的時候尺寸也有問題，順便解決一下！！

