本人在C++端用opencv处理过的图片想要发到前端,由于opencv中的图片内存是用Mat类保存的,它保存的数据是BGR格式的裸数据,并不能直接发给前端,用于前端解析。本人先用imwrite()方法将Opencv的图片写入电脑内存,该方法可以指定保存图片格式,如.bmp、.jpg、.png、.gif等等。然后再用C++语言内置的I/O模块读取该图片内存。然后将图片以二进制的方式打开,只有二进制方式打开,读取的内存才是连续的。我是用boost库中的base64类将图片数据将图片转成base64格式,再用jason串的形式发送给前端。
代码如下:
C++端
Json::Value root;
Json::FastWriter writer;
if (_access("imageMeg", 0)) _mkdir("imageMeg");
cv::imwrite("imageMeg\\imageMeg.jpg", msg->image);
std::ifstream infile;
infile.open("imageMeg\\imageMeg.jpg", std::ios::binary|std::ios::in);
infile.seekg(0, infile.end);
int lenth = infile.tellg();
infile.seekg(0, infile.beg);
char* buffer = new char[lenth];
infile.read(buffer, lenth);
infile.close();
root["type"] = "onRecvImageMsg";
root["addr"] = m_addr;
root["sender"] = gb2312_to_utf8(msg->sender);
size_t encoded_size = boost::beast::detail::base64::encoded_size(lenth);
std::string data;
data.resize(encoded_size);
boost::beast::detail::base64::encode(&data[0], &buffer[0],
lenth);
root["image_width"] = std::to_string(msg->image.cols); //图片宽度
root["image_height"] = std::to_string(msg->image.rows); //图片高度
root["image"] = data; //base64格式的图片数据
std::string json = writer.write(root);
JavaScript端
var sender =jsonData["sender"];
var imageee = jsonData["image"]; //接收图片数据
var imagewith = jsonData["image_width"]; //接收图片宽度
var imagehighet = jsonData["image_height"]; //接收图片高度
var x = document.getElementById("imgimage"); //获取html中图片模块的id
x.src = "data:image/jpeg;base64,"+imageee; //给图片模块的src赋值,格式形如代码所示,‘image/jpeg’格式必须与opencv用imwrite()方法保存的图片格式一致,否则无法解析。
x.width = imagewith;
x.height = imagehighet;