7 lines
5.8 KiB
HTML
7 lines
5.8 KiB
HTML
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>{$my.Think.config.web.img2base64.title}</title><meta name="applicable-device" content="pc,mobile" /><meta http-equiv="Cache-Control" content="no-transform" /><meta http-equiv="Cache-Control" content="no-siteapp" /><meta name="keywords" content="{$my.Think.config.web.img2base64.keywords}" /><meta name="description" content="{$my.Think.config.web.img2base64.description}" /><meta name="renderer" content="webkit" /><meta name="apple-mobile-web-app-capable" content="yes" /><link rel="icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon" /><link href="/static/style/bootstrap.min.css" rel="stylesheet" type="text/css" /><link href="/static/style/tool.css" rel="stylesheet" type="text/css" /><!--[if lt IE 9]><script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->{:$my.Think.config.web.header}</head><body>{include file="header" /}
|
||
<div class="container"><div class="row"><div class="col-md-12 col10main"><div class="accordion" id="accordion2"><div class="accordion-group"><!-- <div><a href="https://www.aliyun.com/minisite/goods?userCode=eaborev5" target="_blank" rel="nofollow"><img src="http://zxgj.16400.cn/static/images/ali.jpg"></a></div> -->
|
||
<ul class="nav nav-tabs hbflag"><li role="presentation" class="active"><a href="/img2base64/"> 图片转Base64</a></li><li role="presentation"><a href="/utf8/">UTF-8转GBK</a></li><li role="presentation"><a href="/unicode/">Unicode/ASCII转换</a></li><li role="presentation"><a href="/ascii/">ASCII编码/解码</a></li><li role="presentation"><a href="/urlencode/">URL编码/解码</a></li><li role="presentation"><a href="/navtiveunicode/">Native/Unicode编码转换</a></li><li role="presentation"><a href="/keyboardcode/">KeyCode键盘按键码</a></li><li role="presentation" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;" role="button" aria-haspopup="true" aria-expanded="false">更多工具<span class="caret"> </span></a><ul class="dropdown-menu"><li role="presentation"><a href="/androidkeycode/">Android按键码</a></li><li role="presentation"><a href="/keyboardtest/">键盘测试工具</a></li></ul></li></ul><div class="panel"><form id="form1" class="form-horizontal" method="post"><div class="alert alert alert-success"><p>1、图片转换成Base64编码，点击“选择图片...”按钮，上传要转换的图片,即可自动生成Base64编码（<code>如果图片尺寸超过2M,请耐心等待3-5秒钟左右</code>）</p><p>2、Base64编码转换成图片，请在下面输入框,粘贴base64编码,然后点击“Base64转图片”按钮，即可转为图片</p></div> <span class="btn btn-success fileinput-button mb5"><i class="glyphicon glyphicon-plus"></i><span>选择图片...</span><input accept="image/*" name="upimage" id="demo_input" type="file"></span><label class='checkbox-inline' id="update_file_label"></label><script type="text/javascript"> document.getElementById("demo_input").onchange = function () { document.getElementById("update_file_label").innerHTML = this.value; };</script><div class="form-group"><div class="col-sm-12"><textarea id="result" name="result" class="form-control" rows="10" placeholder="点击选择文件后，在这里是生成的图片Base64编码
|
||
或者在此输入包含data:image/jpeg;base64,标准base64字符串点击 '追加img标签' 也可还原图片"></textarea></div></div><div class="form-group"><div class="col-sm-12 text-center"><input type="button" onclick="base642img();" value="Base64转图片" class="btn btn-success"><input type="button" onclick="imgfun();" value="追加img标签" class="btn btn-default"><span id="copyallcode" class="btn btn-default" data-clipboard-target="#result">复制</span><input type="button" onclick="empty();" value="清空输入框" class="btn btn-default"><a href="/base64/" class="btn btn-default">文字Base64编码</a></div></div><div class="form-group"><div class="col-sm-12"><p id="img_area"></p></div></div></form></div></div><div class="alert alert alert-success alert-dismissible"><h4>在线图片转base64,在线base64转图片工具介绍</h4><p>1.支持 PNG、GIF、JPG、BMP、ICO 图片格式。<p>2.将图片转换为Base64编码，可以让你快速地在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是极为方便的，因为你不需要再去寻找一个保存图片的地方。</p><p>3.假定生成的代码为"data:image/jpeg;base64, ....."，那么你只需要全部复制，然后在插入图片的时候，地址填写这段代码即可。</p><p>4.CSS中使用：background-image: url("data:image/png;base64,,/9j/4AAQSkZJRgABAgEAYABgAAD/7gAOQWRvYmUAZAAAAAAB...");</p><p>5.HTML中使用：<img src="data:image/png;base64,,/9j/4AAQSkZJRgABAgEAYABgAAD/7gAOQWRvYmUAZAAAAAAB..." /></p><p>6.图片转换Base64，移动端开发、HTML5、CSS3必备的工具，CSS DataURI Base64 工具。</p><p>7.将图片转换成base64编码的，在网页设计开发中,一般用于小图片上，不仅可以减少图片的请求数量（集合到js、css代码中），还可以防止因为一些相对路径等问题导致图片404错误。</p></div> <div class="accordion-group"> </div></div></div></div></div><script src="/static/script/jquery-1.11.3.min.js" type="text/javascript"></script><script src="/static/script/bootstrap.min.js" type="text/javascript"></script><script src="/static/script/tool.js" type="text/javascript"></script><script src="/static/script/pcjs/img2base64.js"></script>{include file="nav" /}
|
||
{include file="link" /}
|
||
{include file="footer" /}
|
||
</body></html> |