Получил изображение от контроллера web api 2, получил его от sql и получил в angular в виде строки base64. Как я мог показать это? - PullRequest
Новая
       21

Получил изображение от контроллера web api 2, получил его от sql и получил в angular в виде строки base64. Как я мог показать это?

0 голосов
/ 09 февраля 2020

Что я получаю обратно в передний конец. 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class FoodieService {
  baseUrl: string = 'http://localhost:50025/api';
  //baseUrl: string = 'https://itica.azurewebsites.net/api';

  constructor(private http: HttpClient) { }
  getImages(foodId) {
    return this.http.get(this.baseUrl + '/foodImage/getByFoodId/' + foodId, foodId);
  }

  // getAllOrdersByCookId(cookId) {
  //   return this.http.get(this.baseUrl + '/order/getBycook/' + cookId, cookId);
  // }

}

Сервис ^^ 

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../services/shared.service';
import { FoodieService } from '../services/foodie.service';
import { DomSanitizer } from '@angular/platform-browser';

    @Component({
      selector: 'app-dashboard',
      templateUrl: './dashboard.component.html',
      styleUrls: ['./dashboard.component.scss']
    })
    export class DashboardComponent implements OnInit {
      lat:any;
      lng:any;
      public data: Array<any>;
      image: any;
      message: string;
      public constructor(private getOrderService: SharedService, public service: FoodieService, private 
    sanitizer: DomSanitizer){
    if (navigator)
    {
    navigator.geolocation.getCurrentPosition( pos => {
        this.lng = +pos.coords.longitude;
        this.lat = +pos.coords.latitude;
      });
    }
  }

         ngOnInit() {
            this.getOrderService.currentMessage.subscribe(message => this.message = message);
        this.service.getImages(4013).subscribe((data:any) => {
          console.log(data);
          this.image = data[0].foodimg;
          return true;
        }, (error) => {
          console.log(error);
        });
      }

  newMessage() {
    this.getOrderService.changeMessage("Hello from Sibling");
  }
  //have to find out if it gets the data or not
  //If not, then we have to subscribe.
  doStuff(event: any){
    this.data = event;
  };
}

^^ Компонент 

    public List<FoodImageAddRequest> GetByFoodId(int FoodId)
    {
        using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString))
        {
            con.Open();
            SqlCommand cmd = con.CreateCommand();

            cmd.CommandText = "dbo.FoodImages_SelectByFoodId";
            cmd.CommandType = CommandType.StoredProcedure;

            cmd.Parameters.AddWithValue("@FoodId", FoodId);

            List<FoodImageGetRequest> newImage = new List<FoodImageGetRequest>();
            using (var reader = cmd.ExecuteReader())
            {
                var results = new List<FoodImageGetRequest>();

                while (reader.Read())
                {
                    results.Add(new FoodImageGetRequest
                    {
                        Name = (string)reader["Name"],
                        FoodId = (int)reader["FoodId"],
                        Size = (int)reader["Size"],
                        FoodImg = (byte[])reader["FoodImg"]
                    });
                }

                newImage = results;
            }
            List<FoodImageAddRequest> newImages  = new List<FoodImageAddRequest>();
            for (var i = 0; i < newImage.Count(); i++)
            {
                newImages.Add(new FoodImageAddRequest
                {
                    Name = newImage[i].Name,
                    FoodId = newImage[i].FoodId,
                    Size = newImage[i].Size,
                    FoodImg = System.Convert.ToBase64String(newImage[i].FoodImg)
                });
            }
            return newImages;
        }

    }

^^ Служба веб-API.

После отправки запроса на сервер я преобразую файл varbinary из SQL в base 64 в службе GetFoodImage, а затем отправляю его обратно на компонент и консоль Angular. войдите

Я не знаю, откуда go оттуда. Как я могу преобразовать эту строку base 64 в видимое изображение в компоненте приборной панели?

1 Ответ

0 голосов
/ 09 февраля 2020

NVM, я только что решил. Я нашел кусок от Васифа Али здесь: BASE64 к изображению angular 2

Все, что вам нужно сделать, это использовать Dom Sanitizer и через него вы можете установить, что это за изображение, и использовать уже преобразуется в строку base 64 следующим образом: 

this.imagePath = this._sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,' 
                 + toReturnImage.base64string);

Затем свяжите свой объект (imagePath) в html следующим образом: 

<img [src]="imagePath">
...