Is the background of the PNG image loaded by exif. js black?

This is an image that has not been uploaded. this is the image that has been uploaded. use exif. for images parsed by js, I don't know why. For uploaded png images, I don't know why they are black backgrounds. paste the code below {code ...} the EXIF used in the compressed image is processing the image. I don't know how to deal with it...This is an image that has not been uploaded.

This is the uploaded image.

The image parsed using exif. js does not know why, and the uploaded png format does not know why it is a black background.

Paste the code below.

/*** Upload multiple images ** @ method uploadImg * @ params url: Address of the file on the server side of the image upload request. * @ params container: The parent box to which the image is rendered after being uploaded, * @ params maxCount: maximum number of uploads. * @ params maxMb: size of the uploaded file * @ params fileInput: file field of the uploaded image * @ params scale: image scale size * @ params name: parameter name * @ params success: callback function executed after the upload is successful * @ params error: callback function * @ params warn: the callback function executed when the upload fails * @ return element object. uploadImg (Objext) */(function ($) {$. fn. extend ({uploadImg: func Tion (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, "Close", "", cancelAlert) ;}, warn: function (msg) {alertBox (msg, 1, "close", "", cancelAlert );}}; this. opt = $. extend ({}, _ defaults, option); th Is. init (self);} UploadImg. prototype = {init: function (self) {var _ this = this; var liIndex = 0; // bind event _ this to the file domain. 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 = "Upload jpg/jpeg/gif/png images";} else {if (_ tar. size> maxSize) {err = "the image size exceeds the limit. please upload it below" + _ this. opt. maxMb + "M image"; }}if (err) {_ this. opt. warn & _ this. opt. warn (err); return;} liIndex ++; html ='
'+ ''+'
'; $ (Html ). prependTo ($ (_ this. opt. container); _ this. getCount (liIndex); // upload the image _this.zip Img ({files: files, scale: _ this. opt. scale, callback: function (tar) {if (tar. constructor! = 'Array') {tar = [tar];} _ this. submit (tar, liIndex, self) ;}}) // Close $ (_ this. opt. container ). on ('click ','. upload_delete ', function () {liIndex-= 1; $ (this ). parents ('li. upload-img '). remove (); _ this. getCount (liIndex) ;}}, // image compression method zipImg: function (cfg) {/** cfg. files * cfg when the file input object triggers onchange. scale compression ratio * cfg. callback after successful callback compression */var _ this = this; var options = cfg; []. forEach. call (options. file S, function (v, k) {var fr = new FileReader (); fr. onload = function (e) {var oExif = EXIF. readFromBinaryFile (new BinaryFile(e.tar get. 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.tar get. result ;}}; // fr. readAsDataURL (v); fr. readAsBinaryString (v) ;}) ;}, // adjust the image direction 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;}. orientation =. 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,. 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 ();. orientation = 1; img = document. createElement ("img"); img. onload = function () {. pi XelXDimension = img. width;. pixelYDimension = img. height; // e (img, a) ;}; callback & callback (o. toDataURL ("image/jpeg", scale ). substring (22); // compress the image}; 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, ). 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 );

The EXIF image used in the compressed image is processed there. I don't know how to process the uploaded image in PNG format. The background is black. please help me !!!

You can also download and run it directly. The main reason is that the transparent png merging has a black background! The purpose is to remove the black background !!

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

I just found that the size of the png file is also incorrect. By the way, it can be solved !!