目录
这是没有上传前的图片
这是上传后的图片
回复内容:
首页 后端开发 php教程 javascript - exif.js 加载出来的PNG图像背景是黑色的?

javascript - exif.js 加载出来的PNG图像背景是黑色的?

Oct 24, 2016 am 12:12 AM
javascript php

这是没有上传前的图片

javascript - exif.js 加载出来的PNG图像背景是黑色的?

这是上传后的图片

javascript - exif.js 加载出来的PNG图像背景是黑色的?

运用exif.js解析的图片,不知道什么原因,上传的png格式的不知道为什么是黑色背景

下面直接贴代码吧

<code>/**
 * 上传多张图片
 * @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='<li class="upload-img upload-loading">'
                        +'<img  src="" alt="javascript - exif.js 加载出来的PNG图像背景是黑色的?" >'
                        +'<a href="javascript:void(0)" class="upload_delete" title="删除"></a>'
                   +'</li>';

               $(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);</code>
登录后复制
登录后复制

压缩图片中用到的EXIF就在那里处理图片的,不知道怎么处理上传后图片的PNG格式的图片,背景是黑的,求大神解救!!!

也可以直接下载运行,主要是遇到的透明的png合成的时候是有黑色背景!目的是去除黑色背景!!

<code>git clone https://github.com/Shoestrong/uploadimg.git</code>
登录后复制
登录后复制

补充一点:刚发现的,上传png的时候尺寸也有问题,顺便解决一下!!

回复内容:

这是没有上传前的图片

javascript - exif.js 加载出来的PNG图像背景是黑色的?

这是上传后的图片

javascript - exif.js 加载出来的PNG图像背景是黑色的?

运用exif.js解析的图片,不知道什么原因,上传的png格式的不知道为什么是黑色背景

下面直接贴代码吧

<code>/**
 * 上传多张图片
 * @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='<li class="upload-img upload-loading">'
                        +'<img  src="" alt="javascript - exif.js 加载出来的PNG图像背景是黑色的?" >'
                        +'<a href="javascript:void(0)" class="upload_delete" title="删除"></a>'
                   +'</li>';

               $(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);</code>
登录后复制
登录后复制

压缩图片中用到的EXIF就在那里处理图片的,不知道怎么处理上传后图片的PNG格式的图片,背景是黑的,求大神解救!!!

也可以直接下载运行,主要是遇到的透明的png合成的时候是有黑色背景!目的是去除黑色背景!!

<code>git clone https://github.com/Shoestrong/uploadimg.git</code>
登录后复制
登录后复制

补充一点:刚发现的,上传png的时候尺寸也有问题,顺便解决一下!!

首先,我不确定 EXIF.readFromBinaryFile() 会不会把图片读成 JPG 格式——这里可能需要先说一下 PNG 和 JPG:它们的区别还是比较大,但是对于这个问题,主要在于 PNG 可以透明,而 JPG 不可能透明。而一个透明图像处理成不透明图像的时候,透明的像素会被默认颜色代替,有可能是白色,也有可能是黑色,或者其它颜色。

所以,第一个可能存在的坑是 EXIF.readFromBinaryFile()

然后你用 canvas 对图像进行了处理,HTML 的 canvas 我也不太了解,但我自认为它应该是可以处理透明像素的。但不排除这是第二个可能存在的坑。

最后,o.toDataURL("image/jpeg", ... 这绝对是一个坑,因为就算前两个坑都不存在,canvas 中的图像是透明的,但你以 jpeg 格式输出,那也变成不透明了……

具体坑在哪里我不清楚,以上思路仅供参考。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1666
14
CakePHP 教程
1425
52
Laravel 教程
1324
25
PHP教程
1272
29
C# 教程
1251
24
PHP和Python:比较两种流行的编程语言 PHP和Python:比较两种流行的编程语言 Apr 14, 2025 am 12:13 AM

PHP和Python各有优势,选择依据项目需求。1.PHP适合web开发,尤其快速开发和维护网站。2.Python适用于数据科学、机器学习和人工智能,语法简洁,适合初学者。

PHP行动:现实世界中的示例和应用程序 PHP行动:现实世界中的示例和应用程序 Apr 14, 2025 am 12:19 AM

PHP在电子商务、内容管理系统和API开发中广泛应用。1)电子商务:用于购物车功能和支付处理。2)内容管理系统:用于动态内容生成和用户管理。3)API开发:用于RESTfulAPI开发和API安全性。通过性能优化和最佳实践,PHP应用的效率和可维护性得以提升。

PHP:网络开发的关键语言 PHP:网络开发的关键语言 Apr 13, 2025 am 12:08 AM

PHP是一种广泛应用于服务器端的脚本语言,特别适合web开发。1.PHP可以嵌入HTML,处理HTTP请求和响应,支持多种数据库。2.PHP用于生成动态网页内容,处理表单数据,访问数据库等,具有强大的社区支持和开源资源。3.PHP是解释型语言,执行过程包括词法分析、语法分析、编译和执行。4.PHP可以与MySQL结合用于用户注册系统等高级应用。5.调试PHP时,可使用error_reporting()和var_dump()等函数。6.优化PHP代码可通过缓存机制、优化数据库查询和使用内置函数。7

PHP与Python:了解差异 PHP与Python:了解差异 Apr 11, 2025 am 12:15 AM

PHP和Python各有优势,选择应基于项目需求。1.PHP适合web开发,语法简单,执行效率高。2.Python适用于数据科学和机器学习,语法简洁,库丰富。

PHP的持久相关性:它还活着吗? PHP的持久相关性:它还活着吗? Apr 14, 2025 am 12:12 AM

PHP仍然具有活力,其在现代编程领域中依然占据重要地位。1)PHP的简单易学和强大社区支持使其在Web开发中广泛应用;2)其灵活性和稳定性使其在处理Web表单、数据库操作和文件处理等方面表现出色;3)PHP不断进化和优化,适用于初学者和经验丰富的开发者。

PHP与其他语言:比较 PHP与其他语言:比较 Apr 13, 2025 am 12:19 AM

PHP适合web开发,特别是在快速开发和处理动态内容方面表现出色,但不擅长数据科学和企业级应用。与Python相比,PHP在web开发中更具优势,但在数据科学领域不如Python;与Java相比,PHP在企业级应用中表现较差,但在web开发中更灵活;与JavaScript相比,PHP在后端开发中更简洁,但在前端开发中不如JavaScript。

PHP和Python:代码示例和比较 PHP和Python:代码示例和比较 Apr 15, 2025 am 12:07 AM

PHP和Python各有优劣,选择取决于项目需求和个人偏好。1.PHP适合快速开发和维护大型Web应用。2.Python在数据科学和机器学习领域占据主导地位。

PHP和Python:解释了不同的范例 PHP和Python:解释了不同的范例 Apr 18, 2025 am 12:26 AM

PHP主要是过程式编程,但也支持面向对象编程(OOP);Python支持多种范式,包括OOP、函数式和过程式编程。PHP适合web开发,Python适用于多种应用,如数据分析和机器学习。

See all articles