这是没有上传前的图片
这是上传后的图片
运用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.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
如何使PHP应用程序更快May 12, 2025 am 12:12 AMtomakephpapplicationsfaster，关注台词：1）useopcodeCachingLikeLikeLikeLikeLikePachetoStorePreciledScompiledScriptbyTecode.2）MinimimiedAtabaseSqueriSegrieSqueriSegeriSybysequeryCachingandeffeftExting.3）Leveragephp7 leveragephp7 leveragephp7 leveragephpphp7功能forbettercodeefficy.4）
PHP性能优化清单：立即提高速度May 12, 2025 am 12:07 AM到ImprovephPapplicationspeed，关注台词：1）启用opcodeCachingwithapCutoredUcescriptexecutiontime.2）实现databasequerycachingusingpdotominiminimizedatabasehits.3）usehttp/2tomultiplexrequlexrequestsandredececonnection.4 limitsclection.4.4
PHP依赖注入：提高代码可检验性May 12, 2025 am 12:03 AM依赖注入（DI）通过显式传递依赖关系，显着提升了PHP代码的可测试性。 1）DI解耦类与具体实现，使测试和维护更灵活。 2）三种类型中，构造函数注入明确表达依赖，保持状态一致。 3）使用DI容器管理复杂依赖，提升代码质量和开发效率。
PHP性能优化：数据库查询优化May 12, 2025 am 12:02 AMdatabasequeryOptimizationinphpinvolVolVOLVESEVERSEVERSTRATEMIESOENHANCEPERANCE.1）SELECTONLYNLYNESSERSAYCOLUMNSTORMONTOUMTOUNSOUDSATATATATATATATATATATRANSFER.3）
简单指南：带有PHP脚本的电子邮件发送May 12, 2025 am 12:02 AMphpisusedforsenderemailsduetoitsbuilt-inmail（）函数andsupportiveLibrariesLikePhpMailerandSwiftMailer.1）usethemail（）functionforbasicemails，butithasimails.2）butithasimimitations.2）
PHP性能：识别和修复瓶颈May 11, 2025 am 12:13 AMPHP性能瓶颈可以通过以下步骤解决：1)使用Xdebug或Blackfire进行性能分析，找出问题所在；2)优化数据库查询并使用缓存，如APCu；3)使用array_filter等高效函数优化数组操作；4)配置OPcache进行字节码缓存；5)优化前端，如减少HTTP请求和优化图片；6)持续监控和优化性能。通过这些方法，可以显着提升PHP应用的性能。
PHP的依赖注入：快速摘要May 11, 2025 am 12:09 AM依赖性注射（DI）InphpisadesignPatternthatManages和ReducesClassDeptions，增强量产生性，可验证性和Maintainability.itallowspasspassingDepentenciesLikEdenceSeconnectionSeconnectionStoclasseconnectionStoclasseSasasasasareTers，interitationApertatingAeseritatingEaseTestingEasingEaseTeStingEasingAndScalability。
提高PHP性能：缓存策略和技术May 11, 2025 am 12:08 AMcachingimprovesphpermenceByStorcyResultSofComputationsorqucrouctationsorquctationsorquickretrieval，reducingServerLoadAndenHancingResponsetimes.feftectivestrategiesinclude：1）opcodecaching，whereStoresCompiledSinmememorytssinmemorytoskipcompliation; 2）datacaching datacachingsingMemccachingmcachingmcachings
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
<🎜>：种植花园 - 完整的突变指南
3 周前ByDDD
<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前By尊渡假赌尊渡假赌尊渡假赌
如何修复KB5055612无法在Windows 10中安装？
3 周前ByDDD
北端：融合系统，解释
3 周前By尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆树的耳语 - 如何解锁抓钩
3 周前By尊渡假赌尊渡假赌尊渡假赌
热工具
SublimeText3 Linux新版
SublimeText3 Linux最新版
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。
WebStorm Mac版
好用的JavaScript开发工具
PhpStorm Mac 版本
最新（2018.2.1 ）专业的PHP集成开发工具
