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.responseURLconsole.log('FoamImageFile ', FoamImageFile)//FoamImageFile.value=response.datareturn response.data;}).catch(function (error) {//ElMessage.error(cmd + '命令执行异常！' + error)console.log(error);});
}