Picture uploading, conversion and other issues summary

In the project development, inevitably encounter the problem of uploading pictures, in addition to some of the framework of the method, we need to know how to complete the native JS upload and conversion of the image.

A variety of scenes to convert pictures into base64

1 Local Images:2 <inputtype= "File"ID= "image"><BR/>3 4 var reader = new FileReader ();5 var allowimgfilesize = 2100000;//upload picture maximum value (in bytes) (2m)6 var file = $ ("#image") [0].files[0];7 var imgUrlBase64;8 if (file) {9 //Read the file into the page as a data URLTen imgUrlBase64 = reader.readasdataurl (file); One reader.onload = function (e) { A //var imfilesize = reader.result.substring (Reader.result.indexOf (",") + 1). length;//Intercept The Base64 code section (optional Not selected, need to communicate with the background) -if (allowimgfilesize! = 0 && allowimgfilesize<Reader. Result.length) { - alert (' Upload failed, please upload images less than 2M '); the return; - }else{ - //Perform an upload operation - alert (reader.result); +                  } -              } +          } A  at  - Picture in Project, local relative path picture -  - function () { - var url= "Static/img/js1.jpg";//This is a picture resource in the station, using a relative path - convertImgToBase64 (URL, function (base64img) { in //Base64 after conversion - alert (base64img) to     }) + } -  the //Implement to convert a picture of a project into a base64 *  $ function convertImgToBase64 (URL, callback, OutputFormat) {Panax Notoginseng var canvas= document.createelement (' CANVAS '), -         CTX= Canvas.getcontext (' 2d '), the         img= newImage; + Img.crossorigin= ' Anonymous '; A         Img.onload= function () { the             Canvas.height= img.height; +             Canvas.width= Img.width; -             ctx.drawimage (img,0,0); $ var dataurl= Canvas.todataurl (OutputFormat|| ' Image/png '); $ Canvas= null; -         } - img.src= URL; the } - Wuyi the network Picture resource transforms to Base64 the function () { - //This is a picture link on the Web Wu var url= "Http://pl.pstatp.com/large/435d000085555bd8de10"; - getBase64 (URL) About . Then (function (base64) { $ Console.log (base64);//handling successful printing in the console - }), function (err) { - Console.log (err);//print exception information -     }); A } +  the //Incoming picture road strength, return base64 - function GetBase64 (img) { $ function Getbase64image (img,width,height) {//width, height calls pass in specific pixel values, control size, default image size not passed the var canvas= document.createelement ("canvas"); the         Canvas.width= width? width:img.width; the Canvas.height= height? height:img.height; the  - var ctx= Canvas.getcontext ("2d"); in         ctx.drawimage (img, 0, 0, canvas.width, canvas.height); the var dataurl= Canvas.todataurl (); the         return dataurl; About     } the var image= newImage (); the Image.crossorigin= "; the     image.src= img; +     var deferred= $. Deferred (); -     if (img) { the Image.onload= function () {Bayi             Deferred.resolve (getbase64image (image));//pass base64 to done upload processing the         } the return deferred.promise ();//Issue to let onload finish and return sessionstorage[' imgtest] -     } - }

Picture uploading, conversion and other issues summary