图片Base64编码

  我们经常在做Jquery插件的时候需要插入一些自定义的控件,比如说按钮,而我们自己又觉着button标签很丑,而且不同浏览器显示的效果还不一样,这个时候我们需要用到图片,当然,我们可以通过img标签添加src,这个时候我们需要jpg、png、gif等格式的图片相匹配,这样的话,需要添加额外的文件,使得这个文件的可移植性变差,这个时候我们就可以将图片转为Base64编码,即将图片转化为字符方式放在html文件中。

  Base64编码要求把每三个8Bit的字节转换为四个6Bit的字节(3*8 = 4*6 = 24),然后把6Bit再添两位高位0,组成四个8Bit的字节,也就是说,转换后的字符串理论上将要比原来的长1/3。没76个字符1需添加一个换行符,当原文的字符不是3的倍数,原文剩余的字节根据编码规则继续单独转(1变2,2变3;不够的位数用0补全),再用=号补满4个字节。这就是为什么有些Base64编码会以一个或两个等号结束的原因,但等号最多只有两个。所以当原文除以3在任何情况下都只可能是0,1,2这三个数中的一个。如果余数是0的话,就表示原文字节数正好是3的倍数(最理想的情况)。如果是1的话,转成2个Base64编码字符,为了让Base64编码是4的倍数,就要补2个等号;同理,如果是2的话,就要补1个等号。

  关于Base64字符编码网络上有很多教程。我这里主要介绍如何将图片转为Base64编码,用到JS或者Html代码中,其实用过PHP的程序猿都知道这个其实很简单,PHP自带函数file_get_contents将上传的图片转为字符串类型,然后通过base64_encode就可以将字符串转为相应的Base64编码。

  

1 string file_get_contents ( string $filename [, bool $use_include_path = false [, resource $context [, int $offset = -1 [, int $maxlen ]]]] )
2
3 string base64_encode ( string $data )

  通过以上两个函数就可以将图片转为了Base64码了,然后html可以通过CSS样式表来加载Base64码。

  

.image{    width:4px;    height:8px;     background-image:url(data:image/png;base64,Base64码);}

  下面是我自己做的一个图片转Base64码的工具,具体实现方式就和上面讲的一样。

  图片转Base64码工具

  

时间: 2024-10-14 05:35:33

图片Base64编码的相关文章

python获取图片base64编码的例子

用python语言获得图片的Base64编码. #!/usr/bin/env python # -*- coding: utf-8 -*- # www.jbxue.com import os, base64 icon = open('ya.png','rb') iconData = icon.read() iconData = base64.b64encode(iconData) LIMIT = 60 liIcon = [] while True: sLimit = iconData[:LIMI

canvas图片base64编码后,ajax提交到后台

如题,直接上JS var imgData = canvas.toDataURL("image/png"); var data = imgData.substr(22); $.post('Gen', { 'data': data, 'remark': $('remark').val() } ,function(success) { $('#img1').src('data:image/jpeg;base64,' + success); } ); 后台C# string inputStr

【前端攻略】:玩转图片Base64编码(转)

引言 图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的Base64编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的base64编码.标题略大,不过只是希望通过一些浅显的论述,让你知道什么是图片的base64编码,为什么我们要用它,我们如何使用并且方便的使用它,并让你懂得如何去在前端的实际工作中运用它. 什么是base64编码? 我不是来讲概念的,直接切入正题,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样做有什么意义呢?我

【前端攻略】:玩转图片Base64编码

引言 图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的Base64编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的base64编码.标题略大,不过只是希望通过一些浅显的论述,让你知道什么是图片的base64编码,为什么我们要用它,我们如何使用并且方便的使用它,并让你懂得如何去在前端的实际工作中运用它. 什么是base64编码? 我不是来讲概念的,直接切入正题,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样做有什么意义呢?我

20141203图片Base64编码与解码

最近需要将图片通过转码的形式传给移动端,使用了Base64转码与 解码 import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; pu

玩转图片Base64编码

引言 图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的Base64编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的base64编码.标题略大,不过只是希望通过一些浅显的论述,让你知道什么是图片的base64编码,为什么我们要用它,我们如何使用并且方便的使用它,并让你懂得如何去在前端的实际工作中运用它. 什么是base64编码? 我不是来讲概念的,直接切入正题,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样做有什么意义呢?我

浅谈CSS图片base64编码技术

(1)引言 图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的 base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的 base64 编码.标题略大,不过只是希望通过一些浅显的论述,让你知道什么是图片的 base64 编码,为什么我们要用它,我们如何使用并且方便的使用它,并让你懂得如何去在前端的实际工作中运用它.  (2)什么是 base64 编码? 我不是来讲概念的,直接切入正题,图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替

android 图片base64编码解码

android 对图片编码解码demo package com.example.appdemos; import java.io.ByteArrayOutputStream; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.Bitmap.CompressFormat; import android.graphics.BitmapFactory; import android.

php 图片base64编码生成dataurl和保存为图片

<?php header('Content-type:text/html;charset=utf-8'); //读取图片文件,转换成base64编码格式 $image_file = 'aaa.jpg'; $image_info = getimagesize($image_file); // $base64_image_content = "data:{$image_info['mime']};base64," . chunk_split(base64_encode(file_ge