Native JS image compression upload

Small stone Original, reproduced please indicate the source, thank you ~!

var jsoncode= (function () {/*imgzip: Picture compression, *json:*file: Must. The selector for the input button of the file type (#id,. Class,input[type=file] ... ) *filestyle: Optional. Whether to set the style of the button. The default is False*widt: Optional. Compressed picture width *quality: Optional. Compressed image quality *type: Optional. Picture format (only png-uncompressed, jpeg/jpg, compressible) *error: Optional. Error message *success: Optional. Success information, package picture flow, etc. The return value is an object *imgzip ({file: ' #fileid ', filestyle:true,width: ' 100 ' |100| ' 50% ', quality: ' 0.3 ' |0.3,error:function (Error) {Console.log (error);},success:function (data) {Console.log (data);}}); return value: Object{name: "32", the name of the original picture, does not contain the suffix namesuffix: ". jpg", the original picture suffix name type: "Image/jpeg", original picture type size:183844, original picture size width: 590 Original picture width height:470, original picture height URL: "Data:image/jpeg;base64,...", Original picture Path flow: "", original picture stream img:imgdom, original picture (saved in img) Quality: 0.1, picture compression quality Newtype: "Image/jpeg", compressed image format after newwidth:590, compressed image height newheight:470, compressed image height Newurl: "Data:image/jpeg;base64, ... ", compressed picture path Newflow:" ", compressed picture stream after canvas:canvasdom, compressed picture (saved in canvas) localtimestamp:1413531845, local timestamp}*/this.imgzip= function (obj) {//Gets the file button if (obj.file) {imgzip.file=obj.file;} Else{return Console.log (' selector is null ');} GetFile Button Object var input=document.queryselector (imgzip.file);//Add the Accept property value to the file button: image/* (indicates that only files of the picture type can be selected) Input.setattribute (' Accept ', ' image/* '); var file=null;//whether to reset the input style imgzip.filestyle=obj.filestyle| | False;if (!imgzip.filestyle) {file=input;} else{//clone Inputfile=input.clonenode (TRUE);//Create Parent Box model VAR label=document.createelement (' label ');//Get the value of the property placeholder , as a button name Var text=file.getattribute (' placeholder ') | | ' Select picture ';//Create Text node Textnode=document.createtextnode (text);//Add the cloned input to the box Label.appendchild (file); Label.appendchild (Textnode);//Replace the original input with a inputinput.parentNode.replaceChild (label,input) with a box div;// Set Box Classlabel.setattribute (' Class ', ' fileInput ');//define Box style var style=document.createelement (' style '); Style.setattribute (' type ', ' text/css ');d ocument.queryselector (' head '). appendchild (style); Style.innerhtml= '. Fileinput{color: #fff; text-align:center;line-height:32px;font-size:14px;border-radius:2px;cursor:pointer; Display:inline-block;width:100px;height:32px;background-color:rgb (56,121,217);} '; style.innerhtml+= '. FiLeinput input[type=file]{width:100%;d Isplay:none;} ';} Receive error message imgzip.error=obj.error| | function () {};//return picture information imgzip.success=obj.success| | function () {};//Gets the user picture format if (/png/.test (Obj.type)) {imgzip.type= ' image/png ';} Else{imgzip.type= ' Image/jpeg ';} Gets the picture width that the user wants to set imgzip.width=obj.width| | null;//Get picture Compression ratio if (parsefloat (obj.quality)) {imgzip.quality=parsefloat (obj.quality);} else{imgzip.quality=0.9;} Console.log (imgzip.quality);//Determine if the selector is correct if (file==null) {imgzip.error (fileselector+ ' is null '); return false;} else if (file.type!= ' file ') {Imgzip.error (fileselector+ ' is not file '); return false;} Else{file.addeventlistener (' Change ', This.read,false);}} Read file stream This.read=function (event) {//read to the file Var file=this.files[0];//when canceling the selected picture when handling error if (file===undefined) return False ;//Returns the file object var fileobj={};//gets the picture type fileobj.type=file.type;//gets the picture name fileobj.name=file.name.substring (0,    File.name.lastIndexOf ('. '));    Suffix name fileobj.namesuffix=file.name.substring (file.name.lastIndexOf ('. '), file.name.length); Get picture size fileobj.siZe=file.size;    Picture new format fileobj.newtype=imgzip.type;//get picture compression quality fileobj.quality=imgzip.quality;    Create picture Stream object var reader = new FileReader ();    Reader.readasdataurl (file);    Reader.onerror=function () {Console.log (Reader.error)}//Picture loading complete when getting information reader.onload=function (e) {//timestamp    var strtimestamp= ' +e.timestamp;    Strtimestamp=strtimestamp.substring (0,strtimestamp.length-3);    Fileobj.localtimestamp=parseint (Strtimestamp);        Get base64 file stream fileobj.url=reader.result;        Get the pure picture binary stream Fileobj.flow=reader.result.replace (' data: ' +fileobj.type+ '; base64, ', '); Create an IMG object var img=new image ();//get IMG content img.src=fileobj.url;fileobj.img=img;//get image size Fileobj.width=img.width; fileobj.height=img.height;//picture width high ratio wide/high var scale=img.width/img.height;//image new Size if (imgzip.width==null) { Fileobj.newwidth=img.width;fileobj.newheight=img.height;} else if (/%$/.test (imgzip.width)) {var percent=parseint (imgzip.width.replace (/%$/, ')); Fileobj.newwidth= (img.width *percent)/100;fileobj.newheight= (img.width*percent)/(scale*100);} Else{fileobj.newwidth=imgzip.width;fileobj.newheight=imgzip.width/scale;}    Create a canvas var canvas=document.createelement (' canvas ');//Determine the width and height of the canvas canvas.width=fileobj.newwidth;    Canvas.height=fileobj.newheight;    Create a two-dimensional space Var cxt=canvas.getcontext (' 2d ');//Draw the image onto the canvas cxt.drawimage (IMG, 0, 0, fileobj.newwidth, fileobj.newheight);    Fileobj.canvas=canvas;    Gets the path of the new image Fileobj.newurl=canvas.todataurl (Fileobj.newtype, fileobj.quality);    Get new picture streaming media fileobj.newflow=fileobj.newurl.replace (' data: ' +fileobj.newtype+ '; base64, ', '); Return Fileobj object return imgzip.success (Fileobj);}}
return this;
}) (jsoncode); window.jsoncode=jsoncode;

Native JS image compression upload