vue加载static文件夹外的图片——以base64方式传图及压缩图片传递

解决VUE只能加载static文件夹图片的问题，涉及代码有参考他人代码。
图片压缩参考：https://www.cnblogs.com/21dacia/articles/1335495.html
图片转base64参考：https://www.geek-share.com/detail/2711539701.html
1.C#部分代码，实现转化为Base64及压缩等功能

/// <summary>
/// 展示图片
/// </summary>
/// <param name="filename"></param>
/// <param name="ratio">是否压缩</param>
/// <returns></returns>
public HttpResponseMessage ShowImgInfo([FromUri]string local, [FromUri]string company, [FromUri]string infoYear, [FromUri]string filename, [FromUri]int ratio)
{
string msg = "error";
if (string.IsNullOrEmpty(filename))
{
return new HttpResponseMessage()
{
Content = new StringContent(JsonConvert.SerializeObject(msg), Encoding.UTF8, "application/json")
};
}
// 拼接图片文件路径
string path = System.Configuration.ConfigurationManager.AppSettings["file_pic"];
string fullPath = System.IO.Path.Combine(path, string.Format(@"{0}_{3}\{1}\{2}", company, local, filename, infoYear));
byte[] bytes;
string imgBase64 = "";
if (System.IO.File.Exists(fullPath))
{
if (ratio == 0)
{
// 返回原图
System.IO.FileStream fs = new System.IO.FileStream(fullPath, System.IO.FileMode.Open,
System.IO.FileAccess.ReadWrite);
bytes = new byte[fs.Length];
System.IO.BinaryReader r = new System.IO.BinaryReader(fs);
bytes = r.ReadBytes((int) fs.Length);
r.Close();
r = null;
fs.Close();
}
else
{
// 压缩图片
System.Drawing.Image img = System.Drawing.Image.FromFile(fullPath);
System.Drawing.Imaging.ImageFormat thisFormat = img.RawFormat;
Bitmap outBmp = new Bitmap(58, 58);
Graphics g = Graphics.FromImage(outBmp);
// 设置画布的描绘质量
g.CompositingQuality = CompositingQuality.HighQuality;
g.SmoothingMode = SmoothingMode.HighQuality;
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.DrawImage(img, new Rectangle(0, 0, 58, 58), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel);
g.Dispose();
// 以下代码为保存图片时,设置压缩质量
EncoderParameters encoderParams = new EncoderParameters();
long[] quality = new long[1];
quality[0] = 100;
EncoderParameter encoderParam = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, quality);
encoderParams.Param[0] = encoderParam;
//获得包含有关内置图像编码解码器的信息的ImageCodecInfo 对象.
ImageCodecInfo[] arrayICI = ImageCodecInfo.GetImageEncoders();
ImageCodecInfo jpegICI = null;
for (int x = 0; x < arrayICI.Length; x++)
{
if (arrayICI[x].FormatDescription.Equals("JPEG"))
{
jpegICI = arrayICI[x];
//设置JPEG编码
break;
}
}
MemoryStream ms = new MemoryStream();
if (jpegICI != null)
{
outBmp.Save(ms, jpegICI, encoderParams);
}
else
{
outBmp.Save(ms, thisFormat);
}
img.Dispose();
outBmp.Dispose();
bytes = new byte[ms.Length];
ms.Position = 0;
ms.Read(bytes, 0, (int)ms.Length);
ms.Close();
}
imgBase64 = Convert.ToBase64String(bytes);// 转化为base64格式
}

msg = string.Format("data:image/gif;base64,{0}",imgBase64);
return new HttpResponseMessage()
{
Content = new StringContent(JsonConvert.SerializeObject(msg), Encoding.UTF8, "application/json")
};
}

2.VUE界面加载

this.viewurl = this.formatImgeUrl(this.imgName,0);

formatImgeUrl(filename,ratio) {
var baseurl;
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ax({ url: this.baseurl + “/voc/api/showimginfo”,
type: “get”,
async: false,
data: {
local: this.local,
company: this.company,
infoYear: this.infoYear,
filename: filename,
ratio: ratio
},
success: json => {
if (json) {
if (json !== “error”) {
baseurl = json;
}
}
}
});
return baseurl;
}