200 lines
12 KiB
HTML
200 lines
12 KiB
HTML
---
|
||
title: Base64 解码 编码 图片 在线工具
|
||
layout: default_tool
|
||
keywords: [base64图片, base64编码, base64解码, base64转图片, 在线工具]
|
||
description: 在线 Base64 编码、解码。支持文字、图片。智能适应“data:image/…”前缀，有无前缀都能解码出图片。实时显示结果，无需手动确认。自动保存偏好设置。开源的纯本地应用，保证数据安全。
|
||
---
|
||
|
||
<div id="content">
|
||
|
||
<style type="text/css">
|
||
#drop_box {
|
||
border: 1px dashed #ccc;
|
||
}
|
||
#info_box {
|
||
height:20px;
|
||
padding: 10px;
|
||
font-size: 14px;
|
||
}
|
||
@media (min-width: 960px) {
|
||
.fl-box {
|
||
width: 50%;
|
||
padding-left: 5px;
|
||
}
|
||
}
|
||
@media (max-width: 960px) {
|
||
.fl-box {
|
||
width: 100%;
|
||
height: 256px;
|
||
padding-left:0;
|
||
padding-right:5px;
|
||
}
|
||
}
|
||
</style>
|
||
<script>
|
||
if (typeof localStorage.base64_activeTab == "undefined") {
|
||
localStorage.base64_activeTab = 1
|
||
}
|
||
</script>
|
||
|
||
<div class="uk-width-10-10 uk-height-1-1" style="padding-bottom: 50px;">
|
||
<!-- 选项卡 -->
|
||
<div class="uk-width-10-10" style="margin-bottom: 10px;">
|
||
<ul class="uk-tab uk-tab-top" data-uk-tab="{connect:'#main', active:localStorage.base64_activeTab, animation:'fade'}">
|
||
<li><a id="activeTab0" onClick="localStorage.base64_activeTab = 0;" rel="nofollow">文字 <i class="uk-icon-exchange"></i> Base64</a></li>
|
||
<li><a id="activeTab1" onClick="localStorage.base64_activeTab = 1;" rel="nofollow">Base64 <i class="uk-icon-exchange"></i> 图片</a></li>
|
||
<li><a id="alipay-red-bao-button" onmouseover="viewAlipayRedBao()" rel="nofollow"></a></li>
|
||
<div style="float:right; margin-top: 9px;">
|
||
<a href="/pages/base64.html">理解 Base64 编码</a>
|
||
</div>
|
||
</ul>
|
||
</div>
|
||
<script>
|
||
if (localStorage.alipayRedBaoNeedShow != '0') {
|
||
$('#alipay-red-bao-button').text('支付宝 扫码领红包')
|
||
$('#alipay-red-bao-button').show()
|
||
if (new Date().setHours(0,0,0,0) < localStorage.alipayRedBaoViewTime
|
||
&& localStorage.alipayRedBaoViewTime < new Date().setHours(23,59,59,0)) {
|
||
$('#alipay-red-bao-button').removeClass('red-point-button')
|
||
} else {
|
||
$('#alipay-red-bao-button').addClass('red-point-button')
|
||
}
|
||
}
|
||
function viewAlipayRedBao () {
|
||
localStorage.alipayRedBaoViewTime = new Date().getTime()
|
||
$('#alipay-red-bao-button').removeClass('red-point-button')
|
||
}
|
||
</script>
|
||
|
||
<!-- 表单、结果 -->
|
||
<div class="uk-width-10-10 uk-height-1-1">
|
||
<ul id="main" class="uk-switcher uk-height-1-1">
|
||
<!-- 文字 -->
|
||
<li class="uk-height-1-1">
|
||
<div id="text" class="uk-grid uk-height-1-1">
|
||
<div class="uk-width-1-2 fl-box uk-height-1-1" style="padding-left:0;padding-right:5px;">
|
||
<textarea class="uk-width-1-1 uk-height-1-1" style="resize:vertical;" placeholder="编码前" spellcheck="false" v-model="origin" v-on:input="onChangeOrigin"></textarea>
|
||
</div>
|
||
<div class="uk-width-1-2 fl-box uk-height-1-1">
|
||
<textarea class="uk-width-1-1 uk-height-1-1" style="resize:vertical;" placeholder="编码后" autofocus spellcheck="false" v-model="base64" v-on:input="onChangeBase64"></textarea>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- 图片 -->
|
||
<li class="uk-height-1-1">
|
||
<div id="img" class="uk-grid uk-grid-small uk-height-1-1">
|
||
<div class="uk-width-1-2 fl-box uk-height-1-1" style="padding-left:0;padding-right:5px;">
|
||
<textarea class="uk-width-1-1 uk-height-1-1" style="resize:none;" placeholder="请输入 base64 字符串，可以不带‘data:image/xxx;base64,’前缀。或者图片url地址。"
|
||
autofocus spellcheck="false" v-model="base64" v-on:input="onInputBase64"></textarea>
|
||
</div>
|
||
<div class="uk-width-1-2 fl-box uk-height-1-1">
|
||
<div id="drop_box" class="uk-height-1-1" style="overflow: auto;" v-on:dragenter="ignoreDrag" v-on:dragover="ignoreDrag" v-on:drop="drop" v-on:click="clickDropBox">
|
||
<p style="width:100%;height:100%;text-align:center;line-height:320px;margin:0"
|
||
v-show="base64 === ''">拖拽图片到此处 / 点击上传图片</p>
|
||
<img alt="结果图片0" style="max-height:512px;" v-bind:src="base64" v-if="base64.startsWith('data:image') || base64.startsWith('http')"></img>
|
||
<img alt="结果图片1" style="max-height:512px;" v-bind:src="'data:image;base64,' + base64" v-if="base64 != '' && !base64.startsWith('data:image') && !base64.startsWith('http') "></img>
|
||
<div id="info_box" v-show="imgType !== ''">
|
||
<span>{% raw %}类型: {{ imgType }} 大小: {{ imgSize }}{% endraw %}</span>
|
||
</div>
|
||
</div>
|
||
<input type="file" style="display:none;" id="file_input" accept="image/*"
|
||
v-on:change="onFileInputChange">
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="uk-height-1-1 uk-width-1-1 uk-text-center">
|
||
<img style="width:240px;" src="//cdn.apihub.net/img/alipay-red-bao.jpeg" alt="alipay 红包码">
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function(global){"use strict";var _Base64=global.Base64;var version="2.3.2";var buffer;if(typeof module!=="undefined"&&module.exports){try{buffer=require("buffer").Buffer}catch(err){}}var b64chars="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";var b64tab=function(bin){var t={};for(var i=0,l=bin.length;i<l;i++)t[bin.charAt(i)]=i;return t}(b64chars);var fromCharCode=String.fromCharCode;var cb_utob=function(c){if(c.length<2){var cc=c.charCodeAt(0);return cc<128?c:cc<2048?fromCharCode(192|cc>>>6)+fromCharCode(128|cc&63):fromCharCode(224|cc>>>12&15)+fromCharCode(128|cc>>>6&63)+fromCharCode(128|cc&63)}else{var cc=65536+(c.charCodeAt(0)-55296)*1024+(c.charCodeAt(1)-56320);return fromCharCode(240|cc>>>18&7)+fromCharCode(128|cc>>>12&63)+fromCharCode(128|cc>>>6&63)+fromCharCode(128|cc&63)}};var re_utob=/[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g;var utob=function(u){return u.replace(re_utob,cb_utob)};var cb_encode=function(ccc){var padlen=[0,2,1][ccc.length%3],ord=ccc.charCodeAt(0)<<16|(ccc.length>1?ccc.charCodeAt(1):0)<<8|(ccc.length>2?ccc.charCodeAt(2):0),chars=[b64chars.charAt(ord>>>18),b64chars.charAt(ord>>>12&63),padlen>=2?"=":b64chars.charAt(ord>>>6&63),padlen>=1?"=":b64chars.charAt(ord&63)];return chars.join("")};var btoa=global.btoa?function(b){return global.btoa(b)}:function(b){return b.replace(/[\s\S]{1,3}/g,cb_encode)};var _encode=buffer?buffer.from&&buffer.from!==Uint8Array.from?function(u){return(u.constructor===buffer.constructor?u:buffer.from(u)).toString("base64")}:function(u){return(u.constructor===buffer.constructor?u:new buffer(u)).toString("base64")}:function(u){return btoa(utob(u))};var encode=function(u,urisafe){return!urisafe?_encode(String(u)):_encode(String(u)).replace(/[+\/]/g,function(m0){return m0=="+"?"-":"_"}).replace(/=/g,"")};var encodeURI=function(u){return encode(u,true)};var re_btou=new RegExp(["[À-ß][-¿]","[à-ï][-¿]{2}","[ð-÷][-¿]{3}"].join("|"),"g");var cb_btou=function(cccc){switch(cccc.length){case 4:var cp=(7&cccc.charCodeAt(0))<<18|(63&cccc.charCodeAt(1))<<12|(63&cccc.charCodeAt(2))<<6|63&cccc.charCodeAt(3),offset=cp-65536;return fromCharCode((offset>>>10)+55296)+fromCharCode((offset&1023)+56320);case 3:return fromCharCode((15&cccc.charCodeAt(0))<<12|(63&cccc.charCodeAt(1))<<6|63&cccc.charCodeAt(2));default:return fromCharCode((31&cccc.charCodeAt(0))<<6|63&cccc.charCodeAt(1))}};var btou=function(b){return b.replace(re_btou,cb_btou)};var cb_decode=function(cccc){var len=cccc.length,padlen=len%4,n=(len>0?b64tab[cccc.charAt(0)]<<18:0)|(len>1?b64tab[cccc.charAt(1)]<<12:0)|(len>2?b64tab[cccc.charAt(2)]<<6:0)|(len>3?b64tab[cccc.charAt(3)]:0),chars=[fromCharCode(n>>>16),fromCharCode(n>>>8&255),fromCharCode(n&255)];chars.length-=[0,0,2,1][padlen];return chars.join("")};var atob=global.atob?function(a){return global.atob(a)}:function(a){return a.replace(/[\s\S]{1,4}/g,cb_decode)};var _decode=buffer?buffer.from&&buffer.from!==Uint8Array.from?function(a){return(a.constructor===buffer.constructor?a:buffer.from(a,"base64")).toString()}:function(a){return(a.constructor===buffer.constructor?a:new buffer(a,"base64")).toString()}:function(a){return btou(atob(a))};var decode=function(a){return _decode(String(a).replace(/[-_]/g,function(m0){return m0=="-"?"+":"/"}).replace(/[^A-Za-z0-9\+\/]/g,""))};var noConflict=function(){var Base64=global.Base64;global.Base64=_Base64;return Base64};global.Base64={VERSION:version,atob:atob,btoa:btoa,fromBase64:decode,toBase64:encode,utob:utob,encode:encode,encodeURI:encodeURI,btou:btou,decode:decode,noConflict:noConflict};if(typeof Object.defineProperty==="function"){var noEnum=function(v){return{value:v,enumerable:false,writable:true,configurable:true}};global.Base64.extendString=function(){Object.defineProperty(String.prototype,"fromBase64",noEnum(function(){return decode(this)}));Object.defineProperty(String.prototype,"toBase64",noEnum(function(urisafe){return encode(this,urisafe)}));Object.defineProperty(String.prototype,"toBase64URI",noEnum(function(){return encode(this,true)}))}}if(global["Meteor"]){Base64=global.Base64}if(typeof module!=="undefined"&&module.exports){module.exports.Base64=global.Base64}else if(typeof define==="function"&&define.amd){define([],function(){return global.Base64})}})(typeof self!=="undefined"?self:typeof window!=="undefined"?window:typeof global!=="undefined"?global:this);
|
||
</script>
|
||
<script>
|
||
var vm_text = new Vue({
|
||
el: "#text",
|
||
data: {
|
||
origin: 'Base64 编码解码',
|
||
base64: ''
|
||
},
|
||
mounted: function () {
|
||
if (localStorage.base64_tab0_origin) {
|
||
this.origin = localStorage.base64_tab0_origin
|
||
}
|
||
this.onChangeOrigin()
|
||
},
|
||
methods: {
|
||
onChangeOrigin: function() {
|
||
localStorage.base64_tab0_origin = this.origin
|
||
this.base64 = Base64.encode(this.origin)
|
||
},
|
||
onChangeBase64: function() {
|
||
this.origin = Base64.decode(this.base64)
|
||
localStorage.base64_tab0_origin = this.origin
|
||
}
|
||
}
|
||
})
|
||
|
||
var vm_img = new Vue({
|
||
el: "#img",
|
||
data: {
|
||
imgType: '',
|
||
imgSize: '',
|
||
base64: ''
|
||
},
|
||
mounted: function () {
|
||
if (localStorage.base64_tab1_base64) {
|
||
this.base64 = localStorage.base64_tab1_base64
|
||
}
|
||
},
|
||
methods: {
|
||
onInputBase64: function() {
|
||
this.imgType = ''
|
||
this.imgSize = ''
|
||
if (this.base64.length < (1024 * 128)) {
|
||
localStorage.base64_tab1_base64 = this.base64
|
||
}
|
||
},
|
||
ignoreDrag: function(event) {
|
||
event.stopPropagation()
|
||
event.preventDefault()
|
||
},
|
||
drop: function (event) {
|
||
event.stopPropagation()
|
||
event.preventDefault()
|
||
var files = event.dataTransfer.files
|
||
this.processImg(files[0])
|
||
},
|
||
onFileInputChange: function (event) {
|
||
var files = event.target.files
|
||
this.processImg(files[0])
|
||
},
|
||
clickDropBox: function(file) {
|
||
$('#file_input').click()
|
||
},
|
||
processImg: function(file) {
|
||
if (file) {
|
||
this.imgType = file.type
|
||
if (file.size < 1000) {
|
||
this.imgSize = file.size + ' B'
|
||
} else {
|
||
this.imgSize = parseInt(file.size / 1000) + ' KB'
|
||
}
|
||
var reader = new FileReader()
|
||
reader.onload = function (o) {
|
||
vm_img.base64 = o.target.result
|
||
if (vm_img.base64.length < (1024 * 128)) {
|
||
localStorage.base64_tab1_base64 = vm_img.base64
|
||
}
|
||
$('.jq_watermark').trigger('paste')
|
||
}
|
||
reader.readAsDataURL(file);
|
||
}
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
</div> |