asp.net MVC 将base64字符串转换为image

最新推荐文章于 2023-08-18 16:20:46 发布

罗汉松驻扎的工作基地

最新推荐文章于 2023-08-18 16:20:46 发布

阅读量1.2k

点赞数

文章标签： asp.net mvc 后端

本文链接：https://blog.csdn.net/MFCdestoryer/article/details/122112379

版权

在html image 里面，是可以见image.src 赋值为base64的字符串。

这样就可以免去后台直接传送image 文件的麻烦了，只要一串字符就可以显示图片，以下是运行效果

首先建立一个asp.net MVC 网站，然后在homeControl里面加入一个actionresult 页面

 public ActionResult ShowImage()
        {
            ImageConvert convert = new ImageConvert();
            string str= convert.ImageToBase64("C:\\temp\\test2.jpg");
            //png jpg 都行
            ViewBag.imgSTR = str;
            return View();
        }

然后就是最重要的转换方法 ImageConvert 代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;

namespace ImageBase64.Models
{
    public class ImageConvert
    {
        public string ImageToBase64(string imagePath)
        {
            string baseSTR = "";

            try
            {
                FileStream file = new FileStream(imagePath, FileMode.Open);
                byte[] imgBytes = ToByte(file);
                baseSTR = Convert.ToBase64String(imgBytes);

                file.Close();
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
            return baseSTR;
        }


        private byte[] ToByte(Stream stream)
        {
            byte[] bytes;

            using (var ms = new MemoryStream())
            {
                stream.CopyTo(ms);
                bytes = ms.ToArray();
                stream.Flush();
                stream.Close();
            }

            return bytes;
        }
    }



}

然后是前端view代码

@*ShowImage Page*@
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ShowImage</title>

    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script type="text/javascript">

        $(function () {

            $('#btnShow').click(function () {
                var imagebase64 ='data:image/png;base64,'+ $('#baseSTR').val();
                //根据base64的字符串显示图片
                baseToImage(imagebase64);
            });

        });  //end page ready



        function baseToImage(data) {
            var c = document.getElementById("qrcanvas");
            var ctx = c.getContext("2d");

            var img = new Image();
            img.src = data;
            img.onload = function () {
                $("#qrcanvas").attr("width", img.width)
                $("#qrcanvas").attr("height", img.height)
                ctx.drawImage(img, 0, 0, img.width, img.height);

                //var imageData = ctx.getImageData(0, 0, img.width, img.height);
            };
        }


    </script>

</head>

<body>
    <div>
        <p>base64  to show iamge（备注：可以先修改下HomeController里面的图片路径C:\\temp\\imageTest.png）</p>
        <input type="text" id="baseSTR" name="baseSTR" style="width:100%;" value="@ViewBag.imgSTR" />

        <p>
            <button id="btnShow" name="btnShow">show</button>
        </p>

        <canvas id="qrcanvas" style=""></canvas>
    </div>
</body>

</html>

这里要提醒一下：base64字符串得到以后，html image标签需要显示的话，记得前面带上

data:image/png;base64,

这句话，如图