javascript - exif.js 加载出来的PNG图像背景是黑色的？
程序员文章站
2022-04-03 09:13:15
...
这是没有上传前的图片
这是上传后的图片
运用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的时候尺寸也有问题，顺便解决一下！！
回复内容：
这是没有上传前的图片
这是上传后的图片
运用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的时候尺寸也有问题，顺便解决一下！！
首先，我不确定 EXIF.readFromBinaryFile() 会不会把图片读成 JPG 格式——这里可能需要先说一下 PNG 和 JPG：它们的区别还是比较大，但是对于这个问题，主要在于 PNG 可以透明，而 JPG 不可能透明。而一个透明图像处理成不透明图像的时候，透明的像素会被默认颜色代替，有可能是白色，也有可能是黑色，或者其它颜色。
所以，第一个可能存在的坑是 EXIF.readFromBinaryFile()
然后你用 canvas 对图像进行了处理，HTML 的 canvas 我也不太了解，但我自认为它应该是可以处理透明像素的。但不排除这是第二个可能存在的坑。
最后，o.toDataURL("image/jpeg", ... 这绝对是一个坑，因为就算前两个坑都不存在，canvas 中的图像是透明的，但你以 jpeg 格式输出，那也变成不透明了……
具体坑在哪里我不清楚，以上思路仅供参考。
上一篇： H5微信授权登入（后台Java ）
下一篇： Unity 获取手机触摸方法