Local and online image transfer Base64 and picture preview

View results: HTTP://SANDBOX.RUNJS.CN/SHOW/TGVBO9NQ

Local picture to Base64 (so you can preview the picture):

 function   Localimgload () { var  src = this . Files[0 var  self = $ (this  );  var  read = new   FileReader ();  Read.onload  = function   (E) { var  html = " ";        Self.parent (). append (HTML);    document.getElementById ( ' Localbase64strcontainer '). Value = E.target.result; } read.readasdataurl (SRC)};  

        <Div>Local picture Preview (local image to Base64):<inputtype= "File"onchange= "Localimgload.call (this)"/>            <BR/>            <textareaID= "Localbase64strcontainer"cols=50rows=6>            </textarea>            <BR/>        </Div>        <BR/>

Online image transfer Base64

functionconvertImgToBase64 (URL, callback, OutputFormat) {varCanvas = document.createelement (' Canvas '), CTX= Canvas.getcontext (' 2d '), IMG=NewImage; Img.crossorigin= ' Anonymous '; Img.onload=function() {canvas.height=Img.height; Canvas.width=Img.width; Ctx.drawimage (IMG,0, 0); varDataurl = Canvas.todataurl (OutputFormat | | ' Image/jpg '); Callback.call ( This, Dataurl); //alert (this);Canvas =NULL;    }; IMG.SRC=URL;}functiononlinebuttongetimg (Imgurl) {convertImgToBase64 (Imgurl,function(base64img) {document.getElementById (' Onlinebase64strcontainer '). Value =base64img; $(' #onlineBase64StrContainer '). Parent (). Append ("); },' Image/png ')}

        <Div>Online Image transfer base64:<BR/>            <BR/>            <inputtype= "text"ID= "Onlineurl"size=30value= "Http://sandbox.runjs.cn/uploads/rs/61/0dvnfbe3/081408127534068.png"/>            <Buttononclick= "onlinebuttongetimg (document.getElementById (' Onlineurl '). Value)">Conversion</Button>            <BR/>            <BR/>            <textareaID= "Onlinebase64strcontainer"cols=50rows=6>            </textarea>            <BR/>        </Div>

Local and online image transfer Base64 and picture preview