Отобразить изображение base64, полученное из веб-службы REST, в веб-форме - PullRequest
Новая
       23

Отобразить изображение base64, полученное из веб-службы REST, в веб-форме

0 голосов
/ 24 сентября 2019

Я новичок в asp.net и веб-сервисе Restful.
Я хочу отправить свою фотографию из моего проекта Qt на мой Сервер с API отдыха.
Я читаю свое изображение с помощью opencv и преобразовываю его в base64и отправить его через URL, как это: 

Mat img = imread("C:\\Users\\piltan\\Downloads\\remove.jpg");
cv::resize(img,img,Size(30,30));
string encoded = base64_encode(img.data, img.rows *img.cols);
QString qenc = QString::fromStdString(encoded);
//cout<<encoded<<endl;
//qenc = "sa";
QEventLoop eventLoop;
QNetworkAccessManager mgr;
QObject::connect(&mgr,SIGNAL(finished(QNetworkReply*))
,&eventLoop,SLOT(quit()));
QNetworkRequest req( QUrl( QString("http://localhost:60733/api/Weather? 
id=")+qenc) );

на стороне сервера у меня есть класс контроллера, в котором успешно получить строку моего изображения.

Это мой метод получения:

enter image description here

И получить длину строки для моего клиента Qt.

Это мой вывод: 

  "Image length 1200"

Так что я могууспешно отправьте и получите мои данные.
Теперь я хочу показать это изображение base64 в веб-форме и браузере.
Я добавил новую веб-форму в свой проект и поместил изображение веб-контроля в него:

enter image description here Но я не знаю, как назначить полученные данные моему помещенному объекту изображения.
Поскольку я сказал, что я новичок и не знаком с Rest api.
Может ли кто-нибудь мне помочь?Большое спасибо.

1 Ответ

1 голос
/ 24 сентября 2019

Я бы посоветовал вам загрузить изображение отдельно на ваш веб-сервер, а не отправлять его как base64.Особенно, если вы используете URL или JSON-запрос для отправки данных base64, есть некоторые ограничения в размере вашего тела запроса и могут быть проблематичными для вашего приложения и серверной части.

Вместо этого вы можете использовать HTTP multipart запроси отправьте данные своего изображения, используя это.

Вот ссылка на Gist, где вы можете увидеть рабочий пример этого: https://gist.github.com/wzyuliyang/ffc0217015658b87e3fd

Используется python в качестве серверного бэкэнда, но весь процесс - это то, что вы хотите.Например, в реализации Qt вы можете увидеть, как отправлять данные изображения, используя moltipart данные формы: 

//path image
QString path("d:\\people3.jpeg");
//php script that receives the image
QNetworkRequest requete(QUrl("http://*.*.*.*:8080/upload"));

QByteArray boundary = "------WebKitFormBoundarytoHka8LUGjq34sBN";
QFile file(path);
if (!file.open(QIODevice::ReadOnly))
{
    qDebug()<<"error read image";
    return;
}
QByteArray fileContent(file.readAll());

QByteArray data = boundary + "\r\n";
data += "Content-Disposition: form-data; name=\"file\"; filename=\"people3.jpeg\"\r\n";
data += "Content-Type: image/jpeg\r\n\r\n" + fileContent + "\r\n";
data += boundary + "--\r\n";
requete.setRawHeader("Content-Type", "multipart/form-data; boundary=----WebKitFormBoundarytoHka8LUGjq34sBN");
requete.setRawHeader("Content-Length", QString::number(data.size()).toLatin1 ());
file.close();
QNetworkAccessManager *am = new QNetworkAccessManager(this);
QNetworkReply *reply = am->post(requete,data);

QObject::connect(am, SIGNAL(finished(QNetworkReply*)), this, SLOT(replyFinished(QNetworkReply*)));

Надеюсь, это поможет.

Обновление:

Используя этот подход, у вас будет файл изображения, сохраненный на вашем сервере, а затем вы можете установить атрибут src тега img, чтобы просмотреть его.Например: 

<img src="http://localhost:8080/images/myimg.jpg">

Но если вы хотите отобразить содержимое base64 на изображении, вы должны сделать это следующим образом: 

<img src="data:image/jpeg;base64,/9j/4AAQSk...">

Итак, в вашей веб-форме ASP.NET, если у вас естьэлемент управления изображением с именем image1, вы можете отобразить изображение base64 следующим образом: 

string imgString = "/9j/4AAQSk..."; // Place your actual base64 string here
image1.ImageUrl = String.Format("data:image/jpeg;base64,{0}", imgString);

Кроме того, если вы включили тип изображения в строку, вы можете просто использовать это: 

string imgString = "data:image/jpeg;base64,/9j/4AAQSk..."; // Place your actual base64 string here
image1.ImageUrl = imgString;
...