.net core使用ViewComponent将页面图片转码成base64

using System;
using System.IO;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Caching.Memory;

namespace MyPorject.MVC.ViewComponents
{
    public class ImgToBase64ViewComponent : ViewComponent
    {
        private readonly IHostingEnvironment _hostingEnvironment;
        private readonly IMemoryCache _memoryCache;
        public ImgToBase64ViewComponent(IHostingEnvironment hostingEnvironment, IMemoryCache memoryCache)
        {
            _hostingEnvironment = hostingEnvironment;
            _memoryCache = memoryCache;
        }

        public async Task InvokeAsync(string src)
        {
            string cacheKey = src;
            string result = await _memoryCache.GetOrCreateAsync(cacheKey, async entry =>
              {
                  string webRootPath = _hostingEnvironment.WebRootPath;
                  string path = webRootPath + @"\" + src.TrimStart(‘~‘).TrimStart(‘/‘).Replace(@"/", @"\").ToString();

                  try
                  {
                      using (var fs = new FileStream(path, FileMode.Open, FileAccess.Read))
                      {
                          var byteArray = new byte[fs.Length];
                          await fs.ReadAsync(byteArray, 0, byteArray.Length);
                          result = "data:image/jpeg;base64," + Convert.ToBase64String(byteArray);
                      }
                  }
                  catch (Exception ex)
                  {
                      result = ex.Message;
                  }
                  return await Task.FromResult(result);
              });
            return View("", result);
        }
    }
}

添加default.cshtml

使用方法:

将原来src中改成Component.InvokeAsync 就可以使用了

效果如图:

原文地址:https://www.cnblogs.com/WNpursue/p/10447208.html

时间: 2024-08-30 08:31:17

.net core使用ViewComponent将页面图片转码成base64的相关文章

js如何将选中图片文件转换成Base64字符串?

如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传文件都是在web页面端通过表单直接提交,再由服务器端捕获请求来进行处理的.但是在前后端分离趋于一种流行趋势,再加上Android和iOS开发技术日渐成熟, 大部分团队都会选择在服务器端仅提供一套通用的webservice数据接口,而web页面.Android和iOS统一都通过这套数据接口来向服务器发送请求和获

js 将图片文件转换成base64

1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getConte

将input type="file" 类型的图片文件转成base64

带有图片的form表单上传数据是很麻烦的,因为图片通常都是和文字分开上传,这是很麻烦的,所有吧图片转成base64就可以和当成文字上传了.话不多少,看代码: 首先定义一个类型为file的input标签还要定义一个onchange事件,并传入一个event参数. <div> <input type="file" id="imgTest" type="file" onchange="imgChange(event)&quo

js 图片压缩 转成base64

HTML: <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>测试</title> <link rel=&qu

图片链接转成base64

一半需要我的图像转换为base64字符串,这样我们可以把我的形象到服务器.现在我们提供一个js: function convertImgToBase64(url, callback, outputFormat){var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img =newImage; img.crossOrigin ='Anonymous'; img.onload =function(

html5将图片转换成base64的实例代码

这篇文章给大家介绍了如何利用html5将图片转换成base64,文中通过示例代码介绍的很详细,有需要的朋友们可以参考借鉴. base64编码介绍base64是一种网络上常用的8bit字节代码的编码方式,base64可以用于http环境下传递较长的标识信息,同时可以放在url当中使用,因为base64不惧可读性,所以具有一定的加密功能. 为什么要把图片转换成base64编码?将图片转换成base64代码可以减少http请求,因为图片可以以字符编码的形式直接传递到客户端,而文件形式都需要进行http

jquery.imgpreload.min.js插件实现页面图片预加载

页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAORk2_fotM4RbzRvtcaiQu2y_BU3Gpj0rYRy_EWrgXEuFeja0q 页面分享地址:http://www.jb51.net/article/21987.htm Javascript , Jquery 实现页面图片预加载百分比展现 如果需要在页面初始加载时显示加载进度.主要是

学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面

学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET Core Razor 编程系列三——创建数据表及创建项目基本页面 学习ASP.NET Core Razor 编程系列四——Asp.Net Core Razor列表模板页面 上一篇文章中我们学习了列表页面的结构,@page与@model两个关键Razor指令,以及页面布局应该修改哪里.这一篇文章我们来

多线程爬取页面图片

详细见代码,在代码段有相应注释: from multiprocessing import Pool import requests import re import random class dImg(): def __init__(self): self.count = 0 pass def run(self): self.userSearch = input('请输入你想要下载的图片:') self.userNum = int(input('你想要下载多少页面图片:')) self.down