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

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

    /// 
    /// 展示图片
    /// 
    /// 
    /// 是否压缩
    /// 
    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;
}

你可能感兴趣的:(VUE,经验分享,VUE,加载图片)