精华内容
下载资源
问答
  • 图片转码BASE64

    2021-09-02 22:35:21
    base64转码工具: https://www.css-js.com/tools/base64.html 阿里组件库: https://www.iconfont.cn/search/index?searchType=icon&q=%E5%96%87%E5%8F%AD&page=1&fills=0&tag= 实例: background:...

    base64转码工具:
    https://www.css-js.com/tools/base64.html

    阿里组件库:
    https://www.iconfont.cn/search/index?searchType=icon&q=%E5%96%87%E5%8F%AD&page=1&fills=0&tag=

    实例:
    background:url(‘data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjMwNTkyNjcxNzUxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM2MjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMjYyLjgyNjY2NyA2MDUuODY2NjY3bDEuOTYyNjY2IDAuNzI1MzMzIDE4Ni4wMjY2NjcgNTcuMjE2IDU4LjAyNjY2NyAxOTMuMTA5MzMzQTYzLjQ4OCA2My40ODggMCAwIDEgNDQ4IDkzOC42NjY2NjdhMTE0LjY4OCAxMTQuNjg4IDAgMCAxLTEwOS44NjY2NjctODEuNzQ5MzM0TDI2Mi44NjkzMzMgNjA1Ljg2NjY2N3pNODc0LjY2NjY2NyA4NS4zMzMzMzNhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMSA0Mi42NjY2NjYgNDIuNjY2NjY3djY0MGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAxLTg1LjMzMzMzMyAwVjEyOGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAxIDQyLjY2NjY2Ny00Mi42NjY2Njd6IG0tODUuMzMzMzM0IDg1LjMzMzMzNHY1NTQuNjY2NjY2bC01NTQuNjY2NjY2LTE3MC42NjY2NjZWMzQxLjMzMzMzM2w1NTQuNjY2NjY2LTE3MC42NjY2NjZ6IG0tNTk3LjMzMzMzMyAxNzAuNjY2NjY2djIxMy4zMzMzMzRoLTQyLjY2NjY2N2E0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAxLTQyLjY2NjY2Ni00Mi42NjY2NjdWMzg0YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEgNDIuNjY2NjY2LTQyLjY2NjY2N2g0Mi42NjY2Njd6IiBwLWlkPSIzNjIyIiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+’) no-repeat center center / contain;

    展开全文
  • 在Base64中的可打印字符包括字母A-Z、a-z、数字0-9,这样共有62个字符,此外两个可打印符号不同的系统中而不同(维基百科:https://zh.wikipedia.org/wiki/Base64)url传输数据时,会用到base64编码。为什么:...


    Base64是一种基于64个可打印字符来表示二进制数据的表示方法。在Base64中的可打印字符包括字母A-Z、a-z、数字0-9,这样共有62个字符,此外两个可打印符号在不同的系统中而不同(维基百科:https://zh.wikipedia.org/wiki/Base64)
    在url传输数据时,会用到base64编码。为什么:(https://segmentfault.com/q/1010000000801988)
    以前在编码解码的时候,都需要在网上找base64的工具库。其实,浏览器内置了编码解码的函数:window.btoa() window.atob()
    浏览器支持情况:https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/atob

     

    在用的时候,注意中文直接编码会出现问题。
    包含中文的时候,用下面的方法:

    function utf8_to_b64( str ) {
        return window.btoa(unescape(encodeURIComponent( str )));
    }
    function b64_to_utf8( str ) {
        return decodeURIComponent(escape(window.atob( str )));
    }

    有时候你会看到这样的代码:

    //str中没有中文
    window.btoa(str).replace(/\//g, '_').replace(/\+/g, '-');

    这是因为:即使通过base64编码,64个字符除了A-Z、a-z、数字0-9(总共62个),最后2个可打印字符:/和+,url参数中会转义这2个字符(如果出现,会被转义)。所以,还需要替换这2种字符。

    转载于:https://www.cnblogs.com/xiaochongchong/p/7845145.html

    展开全文
  • 这个方法PC端用谷歌调试的时候,可以正常下载,手机上只有谷歌浏览器可以正常下载,其他浏览器就不行,下载任务会有,但是下载不成功,提示未知错误,而且a标签里设置的download文件名也不生效。 有其他办法可以...
  • base64_encode 编码后的字符串中含有 "/", "+", "=" 等字符, 一次请求经过默认base64编码后为: url:...

    base64_encode 编码后的字符串中含有 "/", "+", "=" 等字符,


    一次请求经过默认base64编码后为: url:http://localhost/pre?merchantNo=222222&cipherJson=FZbDffV4jzH8SHFl8bakEJGyZLYrQdEM0F4CU3tiEcS7s6SyCIFa3cDU5fJAiZnTxjURePnMJ5wcqfmfh8+NcISbe4grbJsr&sign=65d9eac59e06eba3e88899e20eb8d25a

    其中cipherJson=FZbDffV4jzH8SHFl8bakEJGyZLYrQdEM0F4CU3tiEcS7s6SyCIFa3cDU5fJAiZnTxjURePnMJ5wcqfmfh8+NcISbe4grbJsr

    在浏览器中通过get方式请求到后台,获取到cipherJson=FZbDffV4jzH8SHFl8bakEJGyZLYrQdEM0F4CU3tiEcS7s6SyCIFa3cDU5fJAiZnTxjURePnMJ5wcqfmfh8 NcISbe4grbJsr

    其中将+ 变为了 空格

    这些字符在url编码中又是特殊字符,比如 "+" ,它就表示 “空格”,但是不同的浏览器对“空格”的编码又不一样,有的是用“+”表示,有的是用“20%”表示,也就是说,让这些base64_encode编码后的字符串在url中传递,用不同的浏览器去浏览时,服务端得到值不一样。

    eg:
    String a = "2+2 3";
    System.out.println(URLEncoder.encode(a, "UTF-8"));
    //输出结果: 2%2B2+3
    结论: 在url中请求时,请求中带有 + , 服务器默认 url中+ 是经过URLEncoder.encode后的结果, tomcat服务器会将相关请求做URLDecoder.decode( )操作, 所以会将请求中+ 转换为 空格

    一、基本原理
    对于URL传递到后台,会对其中的有些字符进行编码(即encode),以下是我百度到的一些资料。
     
     网页中的表单使用POST/GET方法提交时,数据内容的类型是 application/x-www-form-urlencoded,这种类型会:
      1.字符"a"-"z","A"-"Z","0"-"9",".","-","*",和"_" 都不会被编码;
      2.将空格转换为加号 (+) ;
      3.将非文本内容转换成"%xy"的形式,xy是两位16进制的数值;
      4.在每个 name=value 对之间放置 & 符号。
       URLEncoder类包含将字符串转换为application/x-www-form-urlencoded MIME 格式的静态方法。
    urlencode()编码:对字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后跟两位 十六进制数 空格则编码为加号(+)
    二、说明
    所以URLEncode就是将URL中特殊部分进行编码。URLDecoder就是对特殊部分进行解码。

    例如:
    一产品名称为A&T Plastic,在产品列表中就产生了这样的一个联接<a href="product.asp?name=A&T Plastic">A&T Plastic</a>,在服务器端接收此参数的时候怎么也无法接收到准确的产品名。
    -->用urlencode方法
    特殊特殊字符的含义
    ————————————————————————————
    字符 特殊字符的含义 URL编码
    # 用来标志特定的文档位置 %23
    % 对特殊字符进行编码 %25
    & 分隔不同的变量值对 %26
    + 在变量值中表示空格 %2B
    \ 表示目录路径 %2F
    = 用来连接键和值 %3D
    ? 表示查询字符串的开始 %3F

    当键值中含有以上列表中的一些字符时就无法准确的接收其中的值。

    发现现在几乎所有的网站都对url中的汉字和特殊的字符,进行了urlencode操作,也就是:

    http://hi.baidu.com/%BE%B2%D0%C4%C0%CF%C8%CB/creat/blog/

    这个样子,中间%形式的,肯定就是我的登录用户名称了吧。

    为什么对这些字符进行了u的编码形式,是为了字符编码(gbk、utf8)还是为了不出现特殊的字符在url中?都知道要转,但是转了的真正好处呢。查看了网上的很多资料,也没有找到更加准确的说法。

    url转义其实也只是为了符合url的规范而已。因为在标准的url规范中中文和很多的字符是不允许出现在url中的。

    看一下php的urlencode的说明了。

    urlencode — 编码 URL 字符串

    <div u"="">
    string  urlencode ( string  $str )

    返回字符串,此字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后跟两位十六进制数,空格则编码为加号(+)。此编码与 WWW 表单 POST 数据的编码方式是一样的,同时与 application/x-www-form-urlencoded 的媒体类型编码方式一样。由于历史原因,此编码在将空格编码为加号(+)方面与 RFC1738 编码(参见 rawurlencode())不同。此函数便于将字符串编码并将其用于 URL 的请求部分,同时它还便于将变量传递给下一页。

    标准的英文说明是:

    "...Only alphanumerics [0-9a-zA-Z], the special characters "$-_.+!*'(),"  [not including the quotes - ed], and reserved characters used for their reserved purposes may be used unencoded within a URL."

    那哪些字符是需要转化的呢?

    1. ASCII 的控制字符

    这些字符都是不可打印的,自然需要进行转化。

    2. 一些非ASCII字符

    这些字符自然是非法的字符范围。转化也是理所当然的了。

    3. 一些保留字符

    很明显最常见的就是“&”了,这个如果出现在url中了,那你认为是url中的一个字符呢,还是特殊的参数分割用的呢?

    4. 就是一些不安全的字符了。

    例如:空格。为了防止引起歧义,需要被转化为“+”。

    明白了这些,也就知道了为什么需要转化了,而转化的规则也是很简单的。

    按照每个字符对应的字符编码,不是符合我们范围的,统统的转化为%的形式也就是了。自然也是16进制的形式。

    和字符编码无关

    通过urlencode的转化规则和目的,我们也很容易的看出,urleocode是基于字符编码的。同样的一个汉字,不同的编码类型,肯定对应不同的urleocode的串。gbk编码的有gbk的encode结果。

    apache等服务器,接受到字符串后,可以进行decode,但是还是无法解决编码的问题。编码问题,还是需要靠约定或者字符编码的判断解决。

    因此,urleocode只是为了url中一些非ascii字符,可以正确无误的被传输,至于使用哪种编码,就不是eocode所关心和解决的问题了。

    编码问题,不是urlencode所要解决的。
    转自:http://apps.hi.baidu.com/share/detail/32230450

    参考资料:

    http://www.blooberry.com/indexdot/html/topics/urlencoding.htm

    http://cn.php.net/manual/zh/function.urlencode.php




    BASE64中相关参数:

    CRLF 这个参数看起来比较眼熟,它就是Win风格的换行符,意思就是使用CR LF这一对作为一行的结尾而不是Unix风格的LF
    DEFAULT 这个参数是默认,使用默认的方法来加密
    NO_PADDING 这个参数是略去加密字符串最后的”=”
    NO_WRAP 这个参数意思是略去所有的换行符(设置后CRLF就没用了)
    URL_SAFE 这个参数意思是加密时不使用对URL和文件名有特殊意义的字符来作为加密字符,具体就是以-和_取代+和/


    其实之前也用Base64转过字符串,不过那时候是将一张图片通过base64转换为字符串传递给服务端了,以前总是用那个sun.misc.BASE64Decoder.jar了,其实android里面里面已经自带了的base64工具类,所以这次我们用这个方法吧。它有encodeToString方法,如果不需要特殊处理,那么第二个参数直接传递Base64.DEFAULT就好了。我们可以试一下:对字符串String param = “北京市哈哈取某某门门南大街靠近值招商银行(北二环支行)&province=北京市&city=北京市&area=某某区&country=中国&street=哈哈门西大街&aaid=000000&time=1505370170813”进行base64编码。android自带的Base64.encodeToString方法,即为Base64.encodeToString(param.getBytes(),Base64.DEFAULT)我们得到的结果为:
    5YyX5Lqs5biC5ZOI5ZOI5Y+W5p+Q5p+Q6Zeo6Zeo5Y2X5aSn6KGX6Z2g6L+R5YC85oub5ZWG6ZO2
    6KGMKOWMl+S6jOeOr+aUr+ihjCkmcHJvdmluY2U95YyX5Lqs5biCJmNpdHk95YyX5Lqs5biCJmFy
    ZWE95p+Q5p+Q5Yy6JmNvdW50cnk95Lit5Zu9JnN0cmVldD3lk4jlk4jpl6jopb/lpKfooZcmYWFp
    ZD0wMDAwMDAmdGltZT0xNTA1MzcwMTcwODEz
    是的,它换行了,因为我们是让h5同学去解编码的,让h5同学一看,当时就懵了,直接就不能解,为什么会换行呢?那是因为默认模式下,编码后的如果长度超过76,那么每逢76个字符就会加一个换行符。前面我们看到encodeToString有两个参数,那就看看第二个参数还有别的什么值吧,可以看到注释如下:
    /**
    * Default values for encoder/decoder flags.
    */
    public static final int DEFAULT = 0;
    /**
    * Encoder flag bit to omit the padding '=' characters at the end
    * of the output (if any).
    */
    public static final int NO_PADDING = 1;
    /**
    * Encoder flag bit to omit all line terminators (i.e., the output
    * will be on one long line).
    */
    public static final int NO_WRAP = 2;
    /**
    * Encoder flag bit to indicate lines should be terminated with a
    * CRLF pair instead of just an LF. Has no effect if {@code
    * NO_WRAP} is specified as well.
    */
    public static final int CRLF = 4;
    /**
    * Encoder/decoder flag bit to indicate using the "URL and
    * filename safe" variant of Base64 (see RFC 3548 section 4) where
    * {@code -} and {@code _} are used in place of {@code +} and
    * {@code /}.
    */
    public static final int URL_SAFE = 8;
    /**
    * Flag to pass to {@link Base64OutputStream} to indicate that it
    * should not close the output stream it is wrapping when it
    * itself is closed.
    */
    public static final int NO_CLOSE = 16;
    可以看到第二个参数有6种情况,第一种就是默认,我们刚刚试了。如果要解决换行问题,那么得用NO_WRAP了,因为它的意思就是会将所有字符输出至一行,所以我们换成Base64.encodeToString(param.getBytes(),Base64.NO_WRAP),输出结果如下:5YyX5Lqs5biC5ZOI5ZOI5Y+W5p+Q5p+Q6Zeo6Zeo5Y2X5aSn6KGX6Z2g6L+R5YC85oub5ZWG6ZO26KGMKOWMl+S6jOeOr+aUr+ihjCkmcHJvdmluY2U95YyX5Lqs5biCJmNpdHk95YyX5Lqs5biCJmFyZWE95p+Q5p+Q5Yy6JmNvdW50cnk95Lit5Zu9JnN0cmVldD3lk4jlk4jpl6jopb/lpKfooZcmYWFpZD0wMDAwMDAmdGltZT0xNTA1MzcwMTcwODEz;对,这次没有换行, 貌似是我们想要的呢,假装我们拼接后生成二维码背后的地址就是https://www.baidu.com?param=5YyX5Lqs5biC5ZOI5ZOI5Y+W5p+Q5p+Q6Zeo6Zeo5Y2X5aSn6KGX6Z2g6L+R5YC85oub5ZWG6ZO26KGMKOWMl+S6jOeOr+aUr+ihjCkmcHJvdmluY2U95YyX5Lqs5biCJmNpdHk95YyX5Lqs5biCJmFyZWE95p+Q5p+Q5Yy6JmNvdW50cnk95Lit5Zu9JnN0cmVldD3lk4jlk4jpl6jopb/lpKfooZcmYWFpZD0wMDAwMDAmdGltZT0xNTA1MzcwMTcwODEz;好的用微信扫描该地址生成的二维码可以出来页面,但是我们的页面还有引导用户下载我们apk的功能,但是微信里面是不支持下载的,故而必须提示用户在浏览器中打开,所以最终这个地址是需要在浏览了器中打开,那我们可以将其生成二维码,然后用微信扫描后再次在手机浏览器中打开试试(一定得是手机浏览器中哦),可是地址变成了下面酱紫:https://www.baidu.com/?param=5YyX5Lqs5biC5ZOI5ZOI5Y%20W5p%20Q5p%20Q6Zeo6Zeo5Y2X5aSn6KGX6Z2g6L%20R5YC85oub5ZWG6ZO26KGMKOWMl%20S6jOeOr%20aUr%20ihjCkmcHJvdmluY2U95YyX5Lqs5biCJmNpdHk95YyX5Lqs5biCJmFyZWE95p%20Q5p%20Q5Yy6JmNvdW50cnk95Lit5Zu9JnN0cmVldD3lk4jlk4jpl6jopb%2FlpKfooZcmYWFpZD0wMDAwMDAmdGltZT0xNTA1MzcwMTcwODEz; 可以看到跟上面相比所有的+以及斜杠都转义成了% ,那这后面一串让h5去解肯定会失败,那就看看其他的参数;突然发现 URL_SAFE这个意思是能够将编码后的+以及/转换成-以_了,貌似符合我们个预期,我们试试 ,最终结果如下:
    5YyX5Lqs5biC5ZOI5ZOI5Y-W5p-Q5p-Q6Zeo6Zeo5Y2X5aSn6KGX6Z2g6L-R5YC85oub5ZWG6ZO2
    6KGMKOWMl-S6jOeOr-aUr-ihjCkmcHJvdmluY2U95YyX5Lqs5biCJmNpdHk95YyX5Lqs5biCJmFy
    ZWE95p-Q5p-Q5Yy6JmNvdW50cnk95Lit5Zu9JnN0cmVldD3lk4jlk4jpl6jopb_lpKfooZcmYWFp
    ZD0wMDAwMDAmdGltZT0xNTA1MzcwMTcwODEz
    的确那些加号以及斜杠被替换了,可是又换行了呀,所以在想如果有一个属性能够同时实现URL_SAFE和NO_WRAP就好了呢,可是属性就那么6个,没有一个能够达到这种效果,可以看到后面第二个参数其实是一个常量,其实之前这样写过,view.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.BOTTOM)就是希望该view在其父布局的底部且水平方向居中。那么encodeToString方法是否可以这样子写呢,试了下,答案是可以的,哈哈。所以现在可以酱紫写 Base64.encodeToString(param.getBytes(),Base64.URL_SAFE|Base64.NO_WRAP)) ,我们的得到的结果是什么呢?结果如下:5YyX5Lqs5biC5ZOI5ZOI5Y-W5p-Q5p-Q6Zeo6Zeo5Y2X5aSn6KGX6Z2g6L-R5YC85oub5ZWG6ZO26KGMKOWMl-S6jOeOr-aUr-ihjCkmcHJvdmluY2U95YyX5Lqs5biCJmNpdHk95YyX5Lqs5biCJmFyZWE95p-Q5p-Q5Yy6JmNvdW50cnk95Lit5Zu9JnN0cmVldD3lk4jlk4jpl6jopb_lpKfooZcmYWFpZD0wMDAwMDAmdGltZT0xNTA1MzcwMTcwODEz;嗯,这次没有换行且没有特殊字符了,终于满足我们的预期。其实还有最后一点,在有些定位地址下,编码后的字符串最后几位会出现=,而=在浏览器里面打开也是有问题的,所以也需要替换掉, 此时可以用上面的NO_PADDING,它的意思就是在最后会省略填充=。那么最终我们的方式是这样子的: Base64.encodeToString(param.getBytes(),Base64.URL_SAFE|Base64.NO_WRAP|Base64.NO_PADDING) 的。如果不是非要在浏览器中打开,其实是不用这么费事的。

    或者可以参考使用
    commons-code 包中的org.apache.commons.codec.binary.Base64 类中相关方法

    展开全文
  • 在浏览器中解析Base64编码图像

    千次阅读 2015-08-28 13:24:38
    上一篇介绍中,我们将二进制文件(BLOB)保存为Base64编码的文本,这些文本可以内嵌XML的标签中,因此二进制信息它可以随着XML文件被拷贝、下载而不用担心信息会缺失。这项技术也email邮件中被广泛使用。  ...

    上一篇介绍中,我们将二进制文件(BLOB)保存为Base64编码的文本,这些文本可以内嵌在XML的标签中,因此二进制信息它可以随着XML文件被拷贝、下载而不用担心信息会缺失。这项技术也在email邮件中被广泛使用。 

    浏览器对Base64的支持 
    图像是最经常被使用的一种二进制文件。而现代的浏览器的进步日新月异,IE7,FireFox和其他浏览器为包括Base64在内各种编码的图像信息提供了很好的支持。因此图形信息可以以下面的形式呈现在页面中|伦理片 http://www.gxuy.com

    Java代码   收藏代码
    1. <img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/  
    2. wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML  
    3. wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="  
    4. alt="Base64 encoded image" width="150" height="150"/>  



    这种data: URI的格式能把Base64(或其他数据)可以内嵌在image标签的属性当中(或者CSS中)。我们可以看到在大部分浏览器中的显示效果: 
     

    这种做法有利有弊,好处是浏览器可以在一个连接中得到完成的页面内容,不好的地方时图像的大小会增加1/3。因此,这种内嵌的方法适合对小的图形元素比如图标、圆角等等进行处理,从而减少浏览器打开的连接数,但对大的照片、图片(量少而大)等等则不应该使用Base64编码以免影响下载速度。 

    为了得到刚才的Base64编码,我们将上一篇的Java修改成Struts Action,并借用了JIMI进行图形的读取和格式转换,Base64编码器则改为更普遍的Apache Commons组件,代码如下: 

    Java代码   收藏代码
    1. public class Base64ImageAction extends ActionSupport {  
    2.   
    3.     private final static String galleryName = "gallery";  
    4.     private static String parent = null;  
    5.          private String encodeString = null;  
    6.   
    7.     public String getEncodeString() {  
    8.         return encodeString;  
    9.     }  
    10.   
    11.     public void setEncodeString(String encodeString) {  
    12.         this.encodeString = encodeString;  
    13.     }  
    14.   
    15.   
    16.     private String getImageFullPath() {  
    17.         parent = new File(this.getClass().getClassLoader().getResource(  
    18.                     File.separator).getPath()).getParent()+File.separator+"flag.jpg";  
    19.     }  
    20.   
    21.     public String execute() {  
    22.         ByteArrayOutputStream output = new ByteArrayOutputStream();  
    23.         try {  
    24.             JimiReader reader = Jimi.createJimiReader(this.getImageFullPath());  
    25.             Image image = reader.getImage();  
    26.             Jimi.putImage("image/png", image, output);  
    27.             output.flush();  
    28.             output.close();  
    29.             this.encodeString = Base64.encodeBase64String(output.toByteArray());  
    30.         } catch (IOException e) {  
    31.             e.printStackTrace();  
    32.         } catch (JimiException e) {  
    33.             e.printStackTrace();  
    34.         }  
    35.       
    36.         return SUCCESS;  
    37.     }  
    38. }  


    对应的View端是个十分简单的Freemarker模板: 

    Html代码   收藏代码
    1. <html>  
    2. <head>  
    3. <title>Hello,World</title>  
    4. </head>  
    5. <body>  
    6. <img src="data:image/png;base64,${encodeString}" />  
    7. </body>  
    8. </html>  



    处理古代浏览器 
    世界总是不是那么完美,尽管大部分现代浏览器对Base64的处理都十分完善,但是我们不能不考虑到一些“古老”的浏览器,而现在还是普遍使用的“古老”的浏览器,就当属IE6,在IE6里试图浏览上面的图片可能会得到一个红叉叉。我们不得不为IE6做一些特殊处理,利用下面的javascript,我们把Base64字串传回服务器端,重新解析成图片 

    Javascript代码   收藏代码
    1. // a regular expression to test for Base64 data  
    2. var BASE64_DATA = /^data:.*;base64/i;  
    3. // path to the PHP module that will decode the encoded data  
    4. var base64Path = "/my/path/base64.php";  
    5. function fixBase64(img) {  
    6.   // check the image source  
    7.   if (BASE64_DATA.test(img.src)) {  
    8.     // pass the data to the PHP routine  
    9.     img.src = base64Path + "?" + img.src.slice(5);  
    10.   }  
    11. };  
    12. // fix images on page load  
    13. onload = function() {  
    14.   for (var i = 0; i < document.images.length; i++) {  
    15.     fixBase64(document.images[i]);  
    16.   }  
    17. };  


    服务器端的Struts可以参考上面的例子做反向操作,具体从略。 

    更完美的方法 
    将Base64传回服务器解码是不错的IE6补丁,但是违背了我们的初衷,对IE6来说,浏览器连接数并未有任何减少。更直接的想法,是否能用Javascript直接在浏览器中,对Base64文本进行解码呢?我们构思的场景如下:服务器端先将图片转换成PNG格式以方便客户端进行处理,Base64编码之后,利用JSON将文本传递给浏览器客户端进行处理。 

    我们选择PNG图形格式是因为PNG已经俨然成为新的Web图形标准,它格式非常简单,可以很方便的用javascript进行处理而不需要借助浏览器的支持。我们知道javascript直接不能处理二进制数据,但是现在这不是个问题,服务器端已经准备好了Base64编码的文本数据,现在我们只需要一个javascript的Base64解析器,你可以在这里找到一个notmasteryet的Base64解析器。 

    现在PNG图形格式采用了DEFLATE作为唯一的压缩算法,该算法也广泛应用在ZIP,GZIP等压缩格式中。PNG图像格式文件(或者称为数据流)由一个8字节的PNG文件署名(PNG file signature)域和按照特定结构组织的3个以上的数据块(chunk)组成。 

    PNG定义了两种类型的数据块,一种是称为关键数据块(critical chunk),这是标准的数据块,另一种叫做辅助数据块(ancillary chunks),这是可选的数据块。关键数据块定义了4个标准数据块,其中图像数据块IDAT(image data chunk):它存储实际的数据, PNG总的数据流采用DEFLAT进行压缩。此外还擦用三角过滤“delta filters”来过滤每一行的像素的未压缩数据。DEFLAT和delta压缩在其他数据和文本处理中也被广泛应用。PNG格式你可以参考<a href="http://www.libpng.org/pub/png/spec/1.1/PNG-Contents.html">官方文档</a>。 

    很棒的,notmasteryet也为我们提供了一个DEFLAT解压器。 

    最后,我们把这些组合起来: 

    Html代码   收藏代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2.   
    3. <html xmlns="http://www.w3.org/1999/xhtml">  
    4. <head>  
    5.     <title>Demo JavaScript PNG Viewer</title>  
    6.  </head>  
    7. <body onload="show(gravatar);">  
    8. <script src="../Source/Base64.js" type="text/javascript"></script>  
    9. <script src="../Source/Deflate.js" type="text/javascript"></script>  
    10. <script src="../Source/PNG.js" type="text/javascript"></script>  
    11.   
    12. <script type="text/javascript">  
    13. var gravatar = 'iVBORw0KGgoAAAANSUhEUgAAA.......数据从略......55CYII=';  
    14. String.prototype.padRight = function(c, n){  
    15.     var txt = '';  
    16.     for(var i=0;i<n-this.length;i++) txt += c;  
    17.     return txt + this;  
    18. };  
    19. function show(data){  
    20.     var png = new PNG(data);  
    21.     var img = document.getElementById('image'), limg = document.getElementById('largeimage');  
    22.     document.getElementById('nativeimage').src = 'data:image/png;base64,' + data;  
    23.     img.innerHTML = '';  
    24.     limg.innerHTML = '';  
    25.     img.style.width = png.width + 'px';  
    26.     img.style.height = png.height + 'px';  
    27.     limg.style.width = (png.width * 3) + 'px';  
    28.     limg.style.width = (png.height * 3) + 'px';  
    29.     var line;  
    30.     while(line = png.readLine())  
    31.     {  
    32.         for (var x = 0; x < line.length; x++){  
    33.             var px = document.createElement('div'), px2 = document.createElement('div');  
    34.             px.className = px2.className = 'pixel';  
    35.             px.style.backgroundColor = px2.style.backgroundColor = '#' + line[x].toString(16).padRight('0', 6);  
    36.             img.appendChild(px);  
    37.             limg.appendChild(px2);  
    38.         }  
    39.     }  
    40. }  
    41. </script>  
    42. <div id="image"></div>  
    43. <div id="largeimage"></div>  
    44. <img id="nativeimage" />  
    45. </body>  
    46. </html>  



    相关的javascript请到blogs.ejb.cc下载。 

    还可以更完美 
    回顾上一篇的例子,我们用了ihard.net提供了Base64编码,它提供一个GZIP编码参数,你可以发现如此编码之后的文本大小和原来的图形大小相差无几。利用上一节提供了javascript是不是可以解决Base64编码后文件大小增加的问题?留着思考吧。 

    展开全文
  • 1、window.atob和window.btoa window.atob:对base64进行解码; window.btoa:对字符串转化为base64;...可以先对中文进行encodeURIComponent转码,然后转化成base64; 之后可以先对base64解码,然后使用decodeURICo...
  • 原来浏览器原生支持JS Base64编码解码 转载来源:https://www.zhangxinxu.com/wordpress/2018/08/js-base64-atob-btoa-encode-decode/ 一、基础不牢,选型糟糕 糟糕的技术选型往往源自自身技术广度不足。 ...
  • 将 SVG 放置 img 中显示及浏览器 base64 编码base64 编码增强浏览器本身是拥有 Base64 功能的,对应的编码和解码是btoa()与atob(),但其存在一个问题:只支持 ASCII 字符。而几乎大部分情况下,我们需要的字符集...
  • 其他浏览中没有问题, IE下报错。 查了一番之后, 说是版本问题。 卸载,安装低版本。 npm uninstall js-base64 npm install js-base64@2.6.2 --save
  • 3.0版中, js-base64切换到ES2015模块,因此它不再与IE等旧版浏览器兼容(请参见下文)。 从3.3版开始,它是用TypeScript编写的。 现在base64.mjs从编译base64.ts然后base64.js从产生base64.mjs 。 安装 $ npm ...
  • base64转码_2013.8.27.rar

    2013-08-27 13:58:58
    使用fireBreath开发跨浏览器插件的过程中,遇到插件接口参数或返回值中文乱码的问题,于是想起采用Base64先编码,到插件函数内再解码的方法。 包含3个文件base64.h,Base64.cpp,base64.js
  • 最近做一个头部背景大图背景的官网,页面功能不多,开发也很快,最后上线背景大图加载总会有0.5s左右的空白,用户体验很不好,找了很多方法都没效果,最后通过base64转码解决 ,Base64是网络上最常见的用于传输8Bit...
  • 对于vue项目,我们使用axiso来发送请求,如果传递二进制图片时...解决方案:我们 axios 里面,responseType 默认返回数据类型是 json,将其改为返回数据类型 blob。export function miniprogramQrcode (params) {...
  • 浏览器原生支持JS Base64编码解码

    千次阅读 2019-04-21 18:39:28
    本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。 一、基础不牢,选型糟糕 ...就在数月前,一个前端HTML字符信息转Base64的需求,我是毫不犹豫去找了个开源的base64.js。 使...
  • 1.为什么要用到BASE64编码...由于一些二进制字符传输协议中属于控制字符,不能直接传送需要转换一下。最常见的用途是作为电子邮件或WebService附件的传输编码.2.base64编码定义目前的internet e-mail标准--简单邮...
  • 一种是图片转为Base64编码,这种编码是直接可以在页面通过的方式显示 Base64 在CSS中的使用 .demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); } Base64 在...
  • 浏览器URL(地址栏)直接输入: data:image/png;base64,编码内容
  • springboot中base64前端编码与后端解码

    千次阅读 2020-09-21 09:20:03
    当然可以通过降低tomcat版本,或者增添配置来更改,但是这些都不是好的方法),可采用前端base64编码后再传向后端,后端再解码即可,毕竟编码后这些特定字符像被转化为二进制一样,可以随意传输了。 前端编码: ...
  • base_64转码

    2017-03-03 13:41:15
    base64的用法详解 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: background-image:url(data:image/png;base64, iVBORw0...
  • 1、写成代码再打开 <img src="data:image/png;base64,这里写你的base64编码/> 2、直接在浏览器打开 在浏览器url中直接输入:data:image/png;base64,这里写你的base64编码 ,然后回车
  • js-base64, JavaScript的Base64实现 base64.js另一个Base64转码器用法浏览器中的[removed][removed] node.jsvar Base64 = require('
  • url地址输入prompt等js代码会引发xss问题,本文url注入xss问题进行模拟、原理分析,建议使用base64编码、解码进行url携带js代码处理。
  • 需求: 后端返回的是一个base64的文件流,需要前端自行处理,把它处理成PDF格式并在浏览器中打印出来 代码: getPrint(data).then(res => { const URL = this.dataURLtoBlob(res.data) // res.data是后端返回的...
  • 首先讲一下什么是Base64编码:
  • 关于图片的Base64编码

    2021-01-19 01:47:52
    什么是Base64编码Base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,页面上显示的时候,可以用该字符串来代替图片的url属性。base64编码就是长得像下面这样子的代码:thunder://QUFodHRwOi8...
  • Javascript 实现base64编码[图片]

    千次阅读 2019-04-21 20:56:43
    最后被否决,邮件中不能使用base64位编码,原因未明[TBD]提示: outlook中不能显示,Foxmail中可以显示.但是原因似乎不止于此. foxmail测试结果: Outlook测试结果: TBD 2.字符串编码 ...
  • 说明一下,此示例支持ie8+以上的版本,如果版本太低,自己更新一下就行了。 咱么此处采用flash插件。 没有flash插件的先去下载一个flashplayer,安装太简单,咱们不说了。 接下来,咱们去下载一个jQuery-webcam-...
  • 我们开发的过程中,总会遇到上传的问题,如果不使用文件服务器的话,那么需要我们对文件进行编码,然后... 那下面我们就来说一下base64编码vue项目中的使用吧 html代码,此处用的是element-ui中的上传组件: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,843
精华内容 1,937
关键字:

可以在浏览器搜一下base64转码就可以