JavaScript解析接收到的base64格式的图片数据流。

本人在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;

猜你喜欢

转载自blog.csdn.net/weixin_43448686/article/details/106541718