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>
Related movie you might like to see :
WHITE SPACE REMOVER CODE
White Space Remover
COMMENTS REMOVER CODE
COMMENTS REMOVER
FILE SAVE AS WITH JAVA SCRIPT METHO...
FILE SAVE AS WITH JAVA SCRIPT METH...
HTML CSS JAVA COMPRESSOR CODE
HTML CSS JAVA COMPRESSOR
ONLINE CSS UNMINIFIER CODE
ONLINE CSS UNMINIFIER
CSSO (CSS Optimizer)
SCRIPT TUTORIALS CSSO CSS COMPOSER ...
Related Post for DATA URI CODE IMAGE CONVERT INTO JPG IMAGE CODE
CIRCLE CALCULATOR
DIVIDING FRACTIONS CALCULATOR CODE
MEAN MEDIAN MODE RANGE CALCULATOR CODE
ADDING SUBTRACTING MIXED NUMBERS CALCULATOR CODE
ADDING SUBTRACTING MIXED NUMBERS CALCULATOR
SCIENTIFIC NOTATION CALCULATOR
FACTORING CALCULATOR CODE
SEQUENCE SOLVER CALCULATOR
PRIME FACTORING CALCULATOR CODE
RIGHT ANGLE TRIANGLES CALCULATOR CODE
LINEAR EQUATION SOLVER
ADDING SUBTRACTING FRACTION CALCULATOR
PRIME NUMBER CHECKER
RIGHT ANGLE TRIANGLES CALCULATOR
FIND AND REPLACE TEXT
SLOPE CALCULATOR WITH GRAPH CODE
DIVIDING FRACTIONS CALCULATOR
MULTIPLYING FRACTIONS CALCULATOR CODE
FACTORING CALCULATOR
COMPARE FRACTIONS CALCULATOR
CIRCLE CALCULATOR CODE
LCM CALCULATOR
SEQUENCE SOLVER CALCULATOR CODE
LONG DIVISION CALCULATOR CODE
PRIME NUMBER GENERATOR CODE
ADDING SUBTRACTING 3 FRACTION CALCULATOR CODE
SCIENTIFIC NOTATION CALCULATOR CODE
ADDING SUBTRACTING 3 FRACTION CALCULATOR
MATH FRACTION REDUCER CALCULATOR CODE
PRIME NUMBER GENERATOR
LINEAR CALCULATOR CODE
LONG DIVISION CALCULATOR
FIND AND REPLACE TEXT CODE
GREATEST COMMON FACTOR CALCULATOR
SLOPE CALCULATOR WITH GRAPH
MULTIPLYING FRACTIONS CALCULATOR
LCM CALCULATOR CODE
PRIME FACTORING CALCULATOR
EXPONENT CALCULATOR CODE
MEAN MEDIAN MODE RANGE CALCULATOR
COMPARE FRACTIONS CALCULATOR CODE
ADDING SUBTRACTING FRACTION CALCULATOR CODE
PRIME NUMBER CHECKER CODE
MATH FRACTION REDUCER CALCULATOR
EXPONENT CALCULATOR
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.