如何base64转换成图片?

在C#中
图片到byte[]再到base64string的转换:
Bitmap bmp = new Bitmap(filepath);
MemoryStream ms = new MemoryStream();
bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);
byte[] arr = new byte[ms.Length];
ms.Position = 0;
ms.Read(arr, 0, (int)ms.Length);
ms.Close();
string pic = Convert.ToBase64String(arr);
base64string到byte[]再到图片的转换:
byte[] imageBytes = Convert.FromBase64String(pic);
//读入MemoryStream对象
MemoryStream memoryStream = new MemoryStream(imageBytes, 0, imageBytes.Length);
memoryStream.Write(imageBytes, 0, imageBytes.Length);
//转成图片
Image image = Image.FromStream(memoryStream);

C
2021-10-26 19:13:11
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
mb615577b7b3769
3

将base64编码转换成图片

有时候会遇到要把前端发送过来的图片的文件base64编码转化成图片,我看过了大部分的文章,他们都是使用new Buffer来实现转化的,但是你要知道,new Buffer已经被废弃了,下面是我的方法:

先获取图片的base64编码

可以使用FileReader,像这样:

<!-- test.html -->

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1.0">

        <title>获取图片的base64编码</title>

    </head>

    <body>

        <input type="file" name="file" id="inputBox">

        <script src="./test.js"></script>

    </body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

// test.js

var inputBox = document.getElementById("inputBox")

inputBox.onchange = function(){

    var reader = new FileReader()

    reader.readAsDataURL(this.files[0])

    reader.onload = function(){

        console.log(reader.result)

    }

}

1

2

3

4

5

6

7

8

9

选择文件之后

 

控制台输出的结果如下:

 

可以看见已经成功把图片转化成了base64编码,同时可以看到前缀是data:image/png;base64,也就是说,这张图片是png格式的,事实上,真正的base64编码是前缀之后的那些数据。

拿到图片的base64编码之后,就可以将他转化成图片了

具体方式是这样的:

// test.js

var inputBox = document.getElementById("inputBox")

inputBox.onchange = function(){

    var reader = new FileReader()

    reader.readAsDataURL(this.files[0])

    reader.onload = function(){

    // 将 “data:image\/png;base64,”前缀去除掉,然后将图片的base64编码通过 post请求发送给服务器

        var data = reader.result.replace(/^data:image\/png;base64,/g,"")

        $.post("http://localhost:3000/index",""+data).then(function(data){

            console.log(data)

        })

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

// server.js

const http = require("http")

const fs = require("fs")

const server = http.createServer(function(req,res){

    res.setHeader("Access-Control-Allow-Origin","null")

    if(req.url === "/index"){

        // 服务器接收图片数据的过程

        var data = []

        req.on("error",function(err){

            if(err) console.log(err)

        }).on("data",function(chunk){

            data.push(chunk)

        }).on("end",function(){

            data = Buffer.concat(data).toString()

            var base64 = Buffer.from(data,"base64")

            // 将接收到的图片base64编码转换成 demo.png

            fs.writeFile("demo.png",base64,function(){

                console.log("\033[34mdemo.png has been converted to complete!\033[39m")

            })

        })

        res.end("the index have received the base64 code..")

    }

})

 

server.listen(3000,function(){

    console.log("server is running at http://localhost:3000")

})

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

看看结果:

 

客户端成功接收到响应

 

服务器成功把base64转化成图片 demo.png

 

demo.png

 

已经转化成了图片了

 

大功告成

我写过一个服务器框架sofer,通过sofer搭建的服务器可以更快更方便处理媒体文件的信息,毕竟我已经这些功能封装成一个模块,下一篇会讲怎么使用sofer处理媒体文件

sofer源代码:

https://github.com/shataniya/sofer

 

 

傻她你呀

关注

————————————————

版权声明:本文为CSDN博主「傻她你呀」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/qq_41672008/article/details/102882431

分享
微博
QQ
微信
回复1
2021-10-26 19:14:55
qq5c6694966c9b2

感谢大佬。

分享
微博
QQ
微信
回复
2021-10-26 19:15:51
相关问题
js canvasbase64编码图片不全
4219浏览 • 1回复 待解决
怎么把PixelMap图片BASE64
3638浏览 • 1回复 待解决
安卓TextView鸿蒙安卓TextView鸿蒙
4808浏览 • 1回复 待解决
mysql怎么快速迁移到ocean Base啊?
762浏览 • 1回复 待解决
如何实现图片点击跳转?
1763浏览 • 1回复 待解决
鸿蒙-富文本如何添加图片
1987浏览 • 1回复 待解决
应用开发中的预览器换成手表模式
6262浏览 • 2回复 待解决
OpenHarmony 小型系统如何加载gif图片
1065浏览 • 1回复 待解决
关系数据库如何保存图片
3605浏览 • 2回复 待解决
鸿蒙如何获取Element图片的宽高
3744浏览 • 1回复 待解决
鸿蒙int类型转为Color类型怎么
4652浏览 • 4回复 已解决
DevEco Studio 2.2.0.200 x64加载样例保错
2626浏览 • 1回复 待解决
DevEco Studio 2.1.0.501 x64配置SDK出错
2493浏览 • 2回复 待解决
如何通过代码随意修改锁屏图片?
1173浏览 • 1回复 待解决
Iamge组件如何加载Graphic的资源图片
2914浏览 • 1回复 待解决
ArkUI(eTS)如何实现本地图片保存?
2068浏览 • 1回复 待解决
分布式如何读写图库图片或者视频?
1822浏览 • 1回复 待解决
前端鸿蒙怎么过渡,需要学习Java吗
3951浏览 • 4回复 待解决