base64和图片的互转（HTML5的File实现)

最新推荐文章于 2024-07-24 14:43:45 发布
最新推荐文章于 2024-07-24 14:43:45 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： js
base64和图片的互转（HTML5的File实现)
2013-08-02       0  个评论       作者：qklin
收藏     我要投稿

刚接触到一个内联图片的概念，内联图片即使把图片文件编码成base64 看下面代码即是内联问题

可以减少http的请求，缺点是不能跨域缓存！


 

?
1
2
3
< img src = "data:image/jpeg;base64,/9j/4QqsRX..." alt = "" >
 
< img src = "data:image/jpeg;base64,/9j/4QqsRX..." alt = "" >

然后在线如何把图片转化成base64

如果只依靠单纯的javascript是有权限问题的 js不允许操作本地的file文件或文件夹 为了安全问题

现在html5来了 百度了下有不少资料 中文的也不少   现在我们用html5的file api里的 readAsDataURL函数 这是一个把文件转化成base64编码的


 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< title >简单的html5 File测试 for pic2base64</ title >
< style >
</ style >
< script >
window.onload = function(){
     var input = document.getElementById("demo_input");
     var result= document.getElementById("result");
     var img_area = document.getElementById("img_area");
     if ( typeof(FileReader) === 'undefined' ){
             result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
             input.setAttribute( 'disabled','disabled' );
     } else {
             input.addEventListener( 'change',readFile,false );}
}
function readFile(){
         var file = this.files[0];
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件  
         if(!/image\/\w+/.test(file.type)){  
                 alert("请确保文件为图像类型");
                 return false;
         }
         var reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = function(e){
                 result.innerHTML = '< img src = "'+this.result+'" alt = "" />';
                 img_area.innerHTML = '< div class = "sitetip" >图片img标签展示：</ div >< img src = "'+this.result+'" alt = "" />';
         }
}
</ script >
</ head > 
< body >
< input type = "file" value = "sdgsdg" id = "demo_input" />
< textarea id = "result" rows = 30 cols = 300 ></ textarea >
< p id = "img_area" ></ p >
</ body >
</ html >
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< title >简单的html5 File测试 for pic2base64</ title >
< style >
</ style >
< script >
window.onload = function(){
  var input = document.getElementById("demo_input");
  var result= document.getElementById("result");
  var img_area = document.getElementById("img_area");
  if ( typeof(FileReader) === 'undefined' ){
          result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
          input.setAttribute( 'disabled','disabled' );
  } else {
          input.addEventListener( 'change',readFile,false );}
}
function readFile(){
         var file = this.files[0];
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
         if(!/image\/\w+/.test(file.type)){
                 alert("请确保文件为图像类型");
                 return false;
         }
         var reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = function(e){
                 result.innerHTML = '< img src = "'+this.result+'" alt = "" />';
                 img_area.innerHTML = '< div class = "sitetip" >图片img标签展示：</ div >< img src = "'+this.result+'" alt = "" />';
         }
}
</ script >
</ head >
< body >
< input type = "file" value = "sdgsdg" id = "demo_input" />
< textarea id = "result" rows = 30 cols = 300 ></ textarea >
< p id = "img_area" ></ p >
</ body >
</ html >
良_123
关注
专栏目录
图片转换成base64如何在html文件中使用呢
qq_31397725的博客
03-31 2186
Base64编码提供了一种在HTML中嵌入图片的便捷方式，特别是对于小图标或在不支持外部文件引用的场景中非常有用。然而，由于可能带来的性能问题和SEO影响，应谨慎使用，并在适当的情况下使用外部图片文件引用。
JAVA 图片互转Base64编码实现实例
qq_40595055的博客
11-13 1374
package com.zhuoshi.jcbigdata.util; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.Output...
base64转图片.html
11-20
将base64字符串生成图片展示到页面，方便查看计算的数据是否存在问题。可以较为直接的校验生成的片是否存在问题
图片转换成Base64编码集成到html文件
小生我怕怕
09-03 2495
首先为什么要这么做？  原因很简单这样可以减少与服务器的请求，当然对于一些浏览器并不支持，如IE8。通常用在手机版网站中，具体转化方法如下：   1.在线打开Base64的编码器将图片编码成Base64 例如：我在网上用的图像编码器Base64的地址：http://www.vgot.net/test/image2base64.php 2.将需要编码的图片编码成 Base64 代码。 3.
【如何把base64的文件，转成正常文件】
最新发布
爱码社长，从拧螺丝到造火箭，一步步带你飞
07-24 477
今天遇到一个问题，后端给的文件是base64加密过的字符串，我通过apifox请求接口，想得到正常文件，看看效果的愿望被挡住了。把你的base64字符串放进去，然后把这段代码复制到一个txt文件里面。base64,你的base64字符串"我这边的文件知道格式是excel，所以，后缀我写成了.xlsx。那就写一个讲base64的文件转成正常文件的工具吧。// 将base64字符串转换为Blob对象。// 将你的base64字符串替换到这里。// 创建下载链接的a标签。完美，文件就这么打开了。
Html5 input[type='file'] 把图片转换成base64
macleer的博客
01-09 4035
function _addImgFileListener(obj, fun)     {         $(obj).change(function ()         {             try             {                 var file = this.files[0];                 var reader = ne
html5片转为base64,html5 file转换base64
weixin_31881743的博客
05-31 332
html中file注册文件javascript处理$("#file").change(function(){varfile=this.files[0];if(file.size>1024*1024*0.3){toastr.warning('上传文件太大！');returnfalse;}varreader=newFileReader();reader.readAsDataUR...
使用HTML5的File实现base64和图片的互转
09-28
总结来说，通过HTML5的File API和FileReader对象，我们能够有效地将图片文件转换为base64编码的字符串，并将其嵌入到HTML中，以此减少页面加载时的HTTP请求次数，提升用户体验。但同时也要注意避免使用这种方法对...
图片文件与Base64编码字节数组字符串互转
07-26
总之，图片文件与Base64编码字节数组字符串之间的转换是通过读取文件、进行Base64编码/解码来实现的。Java提供了内置的工具类来支持这一过程，使得这种转换变得简单而高效。理解并熟练运用这种转换技巧，对于开发者...
图片与base64互转
04-07
用html5的file api里的 readAsDataURL函数，是一个可以把文件转化成base64编码的函数，使用该函数实现转换
实现html和word的相互转换（带图片）
热门推荐
盛夏温暖流年
06-16 7万+
项目后端使用了springboot，maven，前端使用了ckeditor富文本编辑器。目前从html转换的word为doc格式，而图片处理支持的是docx格式，所以需要手动把doc另存为docx，然后才可以进行图片替换。 一.添加maven依赖 主要使用了以下和poi相关的依赖，为了便于获取html的图片元素，还使用了jsoup： &lt;dependency&gt; &lt;gr...
h5上传图片压缩并且转为base64并且上传阿里云（对ios相机拍照旋转90度处理）
07-22
上传图片压缩并且转为base64并且上传阿里云（对ios相机拍照旋转90度处理）
html5上传图片转换成base64值传入后台，再转换为图片保存在服务器
10-30
这个是基于某个同志的资源进行修改的。 同时生成了缩略图和正常图片的base64值，缩略图用于页面进行显示，正常图片进行后续打开查看。测试了安卓和ios的微信端，一切正常。 另外由于缓存资源的原因没有考虑上传按钮的添加，上传图片即上传，ajax为异步请求。 至于后台是C#没啥好看的，就是数据库插入。 后续更新成base64数据保存到数据库，直接base64转换成图片保存在服务器，数据库存储相关信息，下载或者查看的时候直接调用相对路径的文件即可。 毕竟base64的数据保存到数据库太影响查询了。另外在存储文件的时候生成了随机码，毕竟上传的图片名称可能相同会覆盖掉。
【Html】通过浏览器让base64字符串转成pdf或图片
q280917903的博客
05-22 1762
base64,base64编码的icon图片数据。base64,base64编码的jpeg图片数据。base64,base64编码的gif图片数据。base64,base64编码的png图片数据。如果需要设置大小，可以额外自行增加height width为100%如有任何问题请联系微信指教哦。
base64编码与图片之间相互转换
2201_75705263的博客
01-19 1万+
将图片编码为Base64格式
html5图片压缩预览,HTML5 input file 图片上传，压缩，上传，预览
weixin_30983209的博客
06-03 187
上传预览框$('#textfile').on('change', function() { var reader = new FileReader();//新建获取file的读取文件var imgsrc = null;var _file = this.files[0], //获取的的图片fileType = _file.type; //图片类型console.log(fileT...
在HTML中显示base64格式的img图片
weixin_44867717的博客
03-01 2万+
在HTML中显示base64格式的img图片 base64的图片可以直接显示在网页上面 <img src=“data:image/png;base64,***************************************************"/>
用java实现base64和图片互转的代码
05-11
下面是Java实现Base64和图片互转的代码： ```java import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.InputStream; import java.io.OutputStream; import java.util.Base64; public class ImageBase64Util { /** * 将图片转换成Base64编码字符串 * * @param imagePath 图片路径 * @return Base64编码字符串 */ public static String imageToBase64(String imagePath) { String base64 = null; InputStream in = null; try { in = new FileInputStream(imagePath); byte[] bytes = new byte[in.available()]; in.read(bytes); base64 = Base64.getEncoder().encodeToString(bytes); } catch (Exception e) { e.printStackTrace(); } finally { try { in.close(); } catch (Exception e) { e.printStackTrace(); } } return base64; } /** * 将Base64编码字符串转换成图片 * * @param base64 Base64编码字符串 * @param imagePath 图片保存路径 * @return 是否保存成功 */ public static boolean base64ToImage(String base64, String imagePath) { boolean result = false; OutputStream out = null; try { out = new FileOutputStream(imagePath); byte[] bytes = Base64.getDecoder().decode(base64); out.write(bytes); result = true; } catch (Exception e) { e.printStackTrace(); } finally { try { out.close(); } catch (Exception e) { e.printStackTrace(); } } return result; } } ``` 使用示例： ```java public class ImageBase64UtilTest { public static void main(String[] args) { // 图片路径 String imagePath = "D:/test.png"; // 将图片转换成Base64编码字符串 String base64 = ImageBase64Util.imageToBase64(imagePath); System.out.println(base64); // 将Base64编码字符串转换成图片 String newImagePath = "D:/newtest.png"; ImageBase64Util.base64ToImage(base64, newImagePath); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值