在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,
这句话,如图