Qt Base64数据保存成QImage 踏坑(data:image/png；base64)

项目场景

项目中，Qt程序收到JS发过来的base64数据，按理说，下面代码就可以直接保存成本地图片。

//str是base64数据
void  RemoteDataManager::base64_string_2_img(const QString & str)
{

    QImage img;
    QByteArray arr_base64 = str.toLatin1();
    m_curImage.loadFromData(QByteArray::fromBase64(arr_base64 );
	bool b = img.save("/home/test3.jpg");
}

但是发现img.save("/home/test3.jpg") 始终返回false.
百思不得其解啊。
哪里出错了？

分析1，保存base64数据

//str 是上面传过来的base64数据

  QByteArray arr_base64 = str.toLatin1();
  QFile file("out.txt");
  if (!file.open(QIODevice::WriteOnly | QIODevice::Text))
    return ;

  QTextStream out(&file);
  out << arr_base64;
  file.close();

把文件保存到本地，然后复制里面所有的数据，打开在线BASE64转图片网址，BASE64转图片 - 站长工具 - 极速数据
把数据粘贴进去，发现可以成功转图片。我靠，这是哪里的问题导致QImage.save却保存失败呢

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAI9AmADASIAAhEBAxEB/8QAHQABAAMAAgMBAAAAAAAAAAAAAAYHCAQFAQIJA//EAF8QAAEDBAECAwQGBQUKCQgIBwEAAgMEBQYRBxIhCBMxFCJBURUYMleW0wkWI0JhF1JxkdQzOFNidHaBgrTVJDdDVn

上面是从JS端收到的原始数据

分析2 ，尝试自己去读取jpg然后保存成BASE64数据

代码如下，读取本地的test1.jpg，然后把数据转换成base64保存到本地out.txt文件中

QFile file2("C:/test1.jpg");
if(!file2.open(QIODevice::ReadOnly))
{
    qDebug() << "failed 1";
    return;
}

QByteArray raw = file2.readAll().toBase64();

QFile file3("out.txt");
if (!file3.open(QIODevice::WriteOnly | QIODevice::Text))
{
    qDebug() << "failed 2";
    return ;
}
QTextStream out(&file3);
out << raw;
file3.close();

然后打开out.txt,发现数据是这个样子：

iVBORw0KGgoAAAANSUhEUgAABDAAAACbCAIAAAAbYvx/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAP+lSURBVHhehP0HdxxHsi0Kz2949545M6L33ntSEuUtHUCQBL

看出什么不一样了吗？
后面的数据，明显少了 data:image/jpeg;base64, 这一块头，然后尝试从JS端读取的数据中去掉这块头，然后再保存试试：

    QImage img;
    QByteArray arr_base64 = str.toLatin1();
    img.loadFromData(QByteArray::fromBase64(arr_base64.mid(str.indexOf(",")+1)));
   bool b = img.save("/home/test3.jpg");

大功告成。保存成功。

扩展

data:image/png;base64是什么

大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC

那么这是什么呢？这是Data URI scheme。
Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张1X36的白灰png图片。
在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。

注意：图片的base64编码是不包含图片头的，如（data:image/jpg;base64,）
目前，Data URI scheme支持的类型有：
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具
目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

举个图片的例子：
网页中一张图片可以这样显示：

举个图片的例子：
网页中一张图片可以这样显示：

也可以这样显示：

把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处是浏览器不会缓存这种图像。