WEBAPI返回图片显示在VUE前端

easyboot

已于 2023-12-01 11:49:38 修改

阅读量811

点赞数 8

CC 4.0 BY-SA版权

分类专栏： # VUE3 # .net core 文章标签： vue.js 前端 javascript WEBAPI

于 2023-12-01 09:20:06 首次发布

本文链接：https://blog.youkuaiyun.com/easyboot/article/details/134726436

VUE3 同时被 2 个专栏收录

54 篇文章

订阅专栏

.net core

49 篇文章

订阅专栏

文章讲解了如何在ASP.NETCore的控制器中通过Opencvsharp进行图像旋转操作，并在Vue中使用axios发起GET请求调用API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WEBAPI部分

通过nuget安装Opencvsharp ，这部分用来做图像处理

在controller中写如下方法，我要对原图进行旋转使用了Opencv，如果不需要旋转可以用注释的代码

        [HttpGet(Name = "ShowImage")]
        public async Task<IActionResult> ShowImage(string FileName)
        {
            // return PhysicalFile(FileName, "image/jpeg");
            Mat mat = new Mat();
            mat = Cv2.ImRead(FileName);
            Cv2.Rotate(mat, mat, RotateFlags.Rotate90Counterclockwise);

          
            MemoryStream stream = mat.Clone().ToMemoryStream(Path.GetExtension(FileName));
            // using (FileStream fileStream = new FileStream(FileName, FileMode.Open)) 
            //{
            //    int len = (int)fileStream.Length;
            //    byte[] buf = new byte[len];
            //    fileStream.Read(buf, 0, len);
            //    stream = new MemoryStream();
            //    stream.Write(buf, 0, len);
            //}
            return await Task.FromResult<FileResult>(File(stream.ToArray(), "image/jpeg"));

        }

Vue前端部分

通过axios调用controller中的ShowImage

Html部分
		<el-col :span="3">
					<el-button type='primary' class="el-btn" @click="DrawImage">图片</el-button>
				</el-col>

			<el-row>
				<!-- <img :src="FoamImageFile"/> :fit="fits" style="width: 100px; height: 100px"-->
				<el-image :src="FoamImageFileURL" :preview-src-list="[FoamImageFileURL]" />
			</el-row>


script部分

let FoamImageFile = ref<any>('/assets/img/abc.bmp')  // 图片所所在目录地址
let FoamImageFileURL = ref<any>('http://localhost:8100/assets/img/abc.bmp') //url地址

const DrawImage = async () => {
	console.log('FoamImageFile ', FoamImageFile)
	await axios.get(global_const.WEBAPI + `LMI3DCamera/ShowImage`, {  //params参数必写 , 如果没有可传参数，传{}以 JSON.stringify(cmdParam1)
		params: { FileName: FoamImageFile.value }
	})
		.then(function (response) {
			console.log('DrawImage ok');
			console.log(response);

			console.log('response.request.responseURL');
			console.log(response.request.responseURL);
			FoamImageFileURL.value = response.request.responseURL

			console.log('FoamImageFile ', FoamImageFile)
			//FoamImageFile.value=response.data
			return response.data;
		})
		.catch(function (error) {
			//ElMessage.error(cmd + '命令执行异常！' + error)
			console.log(error);
		});
}