DATA URI CODE IMAGE CONVERT INTO JPG IMAGE CODE

Friday, 30 October 2015

DATA URI CODE IMAGE CONVERT INTO JPG IMAGE CODE

-----------------------------------------------------------------------------------------------------------------
DATA URI GOOGLE CHROME SOURCE TAB OR CONSOLE TAB
COPY IMAGE URL AND PASTE IN COSOLE TAB
https://developers.google.com/web/updates/2015/05/copy-image-as-data-uri
------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE IN POST HTML SECTION
WITH JAVA FILE LINKS
-----------------------------------------------------------------------------------------------------------------

<html>
<head>
<title>Best Online Base64 to Image converter</title>
<style type='text/css'>
.arrow_box {
position: relative;
background: #ffffff;
border: 4px solid #E9E9E9;
}
.arrow_box:after,.arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 30px;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(82, 46, 54, 0);
border-top-color: #E9E9E9;
border-width: 36px;
margin-left: -36px;
}
.currentselected a,.currentselected a:HOVER {
color: white;
text-decoration: none;
padding-left: 5px;
}

input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button
{
-webkit-appearance: none;
}
textarea {
overflow: auto;
vertical-align: top;
resize: vertical;
}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
background: url("../img/footertexture.png");
scrollbar-base-color: #C0C0C0;
}
a {
color: #0088cc;
text-decoration: none;
}
a:hover,a:focus {
color: #005580;
text-decoration: underline;
}
.img-rounded {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.img-polaroid {
padding: 4px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.img-circle {
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
}
.row {
margin-left: -20px;
*zoom: 1;
}
[class *="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container,.span12
{
width: 940px;
}
.span11 {
width: 860px;
}
.span10 {
width: 780px;
}
.span9 {
width: 700px;
}
.span8 {
width: 620px;
}
.span7 {
width: 540px;
}
.span6 {
width: 460px;
}
.span5 {
width: 380px;
}
.span4 {
width: 300px;
}
.span3 {
width: 220px;
}
.span2 {
width: 140px;
}
.span1 {
width: 60px;
}
.offset12 {
margin-left: 980px;
}
.offset11 {
margin-left: 900px;
}
.offset10 {
margin-left: 820px;
}
.offset9 {
margin-left: 740px;
}
.offset8 {
margin-left: 660px;
}
.offset7 {
margin-left: 580px;
}
.offset6 {
margin-left: 500px;
}
.offset5 {
margin-left: 420px;
}
.offset4 {
margin-left: 340px;
}
.offset3 {
margin-left: 260px;
}
.offset2 {
margin-left: 180px;
}
.offset1 {
margin-left: 100px;
}
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid [class *="span"] {
display: block;
float: left;
width: 100%;
min-height: 30px;
margin-left: 2.127659574468085%;
*margin-left: 2.074468085106383%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid .controls-row [class *="span"]+[class *="span"] {
margin-left: 2.127659574468085%;
}
.row-fluid .span12 {
width: 100%;
*width: 99.94680851063829%;
}
.row-fluid .span11 {
width: 91.48936170212765%;
*width: 91.43617021276594%;
}
.row-fluid .span10 {
width: 82.97872340425532%;
*width: 82.92553191489361%;
}
.row-fluid .span9 {
width: 74.46808510638297%;
*width: 74.41489361702126%;
}
.row-fluid .span8 {
width: 65.95744680851064%;
*width: 65.90425531914893%;
}
.row-fluid .span7 {
width: 57.44680851063829%;
*width: 57.39361702127659%;
}
.row-fluid .span6 {
width: 48.93617021276595%;
*width: 48.88297872340425%;
}
.row-fluid .span5 {
width: 40.42553191489362%;
*width: 40.37234042553192%;
Height: 40.42553191489362%;
*Height: 40.42553191489362%;
}
.row-fluid .span4 {
width: 31.914893617021278%;
*width: 31.861702127659576%;
}
.row-fluid .span3 {
width: 23.404255319148934%;
*width: 23.351063829787233%;
}
.row-fluid .span2 {
width: 14.893617021276595%;
*width: 14.840425531914894%;
}
.row-fluid .span1 {
width: 6.382978723404255%;
*width: 6.329787234042553%;
}
.row-fluid .offset12 {
margin-left: 104.25531914893617%;
*margin-left: 104.14893617021275%;
}
.row-fluid .offset12:first-child {
margin-left: 102.12765957446808%;
*margin-left: 102.02127659574467%;
}
.row-fluid .offset11 {
margin-left: 95.74468085106382%;
*margin-left: 95.6382978723404%;
}
.row-fluid .offset11:first-child {
margin-left: 93.61702127659574%;
*margin-left: 93.51063829787232%;
}
.row-fluid .offset10 {
margin-left: 87.23404255319149%;
*margin-left: 87.12765957446807%;
}
.row-fluid .offset10:first-child {
margin-left: 85.1063829787234%;
*margin-left: 84.99999999999999%;
}
.row-fluid .offset9 {
margin-left: 78.72340425531914%;
*margin-left: 78.61702127659572%;
}
.row-fluid .offset9:first-child {
margin-left: 76.59574468085106%;
*margin-left: 76.48936170212764%;
}
.row-fluid .offset8 {
margin-left: 70.2127659574468%;
*margin-left: 70.10638297872339%;
}
.row-fluid .offset8:first-child {
margin-left: 68.08510638297872%;
*margin-left: 67.9787234042553%;
}
.row-fluid .offset7 {
margin-left: 61.70212765957446%;
*margin-left: 61.59574468085106%;
}
.row-fluid .offset7:first-child {
margin-left: 59.574468085106375%;
*margin-left: 59.46808510638297%;
}
.row-fluid .offset6 {
margin-left: 53.191489361702125%;
*margin-left: 53.085106382978715%;
}
.row-fluid .offset6:first-child {
margin-left: 51.063829787234035%;
*margin-left: 50.95744680851063%;
}
.row-fluid .offset5 {
margin-left: 44.68085106382979%;
*margin-left: 44.57446808510638%;
}
.row-fluid .offset5:first-child {
margin-left: 42.5531914893617%;
*margin-left: 42.4468085106383%;
}
.row-fluid .offset4 {
margin-left: 36.170212765957444%;
*margin-left: 36.06382978723405%;
}
.row-fluid .offset4:first-child {
margin-left: 34.04255319148936%;
*margin-left: 33.93617021276596%;
}
.row-fluid .offset3 {
margin-left: 27.659574468085104%;
*margin-left: 27.5531914893617%;
}
.row-fluid .offset3:first-child {
margin-left: 25.53191489361702%;
*margin-left: 25.425531914893618%;
}
.row-fluid .offset2 {
margin-left: 19.148936170212764%;
*margin-left: 19.04255319148936%;
}
.row-fluid .offset2:first-child {
margin-left: 17.02127659574468%;
*margin-left: 16.914893617021278%;
}
.row-fluid .offset1 {
margin-left: 10.638297872340425%;
*margin-left: 10.53191489361702%;
}
.row-fluid .offset1:first-child {
margin-left: 8.51063829787234%;
*margin-left: 8.404255319148938%;
}
.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.container-fluid {
padding-right: 5px;
padding-left: 5px;
*zoom: 1;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://codebeautify.org/js/common_load.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zclip/1.1.2/jquery.zclip.js"></script>
</head>
<body id="cbBody" class=" fd-zone" style="">
<div id="shareDiv"> </div>
</div>
<script type="text/javascript">
$("#savebtn").hide();
</script>
<div id="innerBody" class="innerBody setBgImage">
<div class="container-fluid viewerInnerBodyDiv">
<div class="row-fluid">
<div class="center">
<div class="span10 mainImageContainerDiv">
<h1 class="imageDivHead">Convert Your Base64 To Image
</h1>
<div class="span12 margin0">
<div class="span12">
<div class="preview_and_configuration">
<div class="preview">
<div class="arrow_box span12">
<h3 class="span8 imageHeadLabel">Enter Base64 String</h3>
<div class="span12">
<textarea id="base64string" class="span8 preview" rows="6" placeholder="Enter Base64 String"></textarea>
<input type="button" value="Generate Image" class="btn span3
btn-large span11" title="Generate Image" onclick="setBase64ToImage()">
</div>
<div class="arrowshow"></div>
</div>
</div>
</div>
<div class="span12 allcontents">
<div class="span3"></div>
<div class="span6 baseimgur1"><img src="" id="base64Img"><span><a href="" download="cbimage.jpg" class="hide" id="dwnldLink">Download Image</a></span>
</div>
<div class="span3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid
infoSection" style="display: none;">
<div class="row-fluid footerpart">
<script type="text/javascript">
$(".infoSection").hide();
</script>
</div>
</div>
</div>
</body>
</html>