rv1126 web端下载截图保存的图片格式不对分析_专栏

1.现象描述

rv1126通过mpp编码保存jpg格式图片，但是通过web前端下载之后，虽然扩展名仍然是.jpg，但是其实图片数据已经是png格式了，原来保存的图片jpg格式的是200KB左右，下载之后，将近2M，并且数据发生变化：

1.截图保存的图片数据头：

2.web前端下载的图片数据头：

目前测试发现，360浏览器和google浏览器会出现图片数据变化的情况，但是火狐浏览器不会。而图片数据发生变化之后，也就是扩展名是jpg，但是数据是png的时候，windows的图片工具仍然可以打开，linux的图片工具会进行检测，提示数据格式不匹配，修改扩展名为png之后倒是可以打开。

2.原因分析

说到问题原因，首先来看下图片下载部分，代码中是分了三种情况的，一种是ie核浏览器，一种是Chrome核浏览器，最后一种分到其他里面，比如火狐浏览器。针对这三种情况，网页的处理也是不一样，第三种其他的用的是普通的浏览器的download的功能进行下载，这种方式目前测试默认情况下也是正常，不会出现图片数据变化的情况，而第一种和第二种处理就会出现问题，所谓的问题就是下载的时候，虽然原始图片是jpg格式，.jpg扩展名，但是下载之后，数据是png格式，扩展名仍然是.jpg格式，起初这个问题没发现，因为没看文件大小，windows上也都能打开，但是Linux上的时候却打不开了，现象如下：

提示扩展名是jpg，但是数据头来看却是png的，从上面的原始数据截图也能看出，linux的图片查看工具比较严格，才发现问题。

具体的问题原因，从下面代码看一下（第一种和第二种都用到了canvas.toDataURL，转base64，问题也正是出在这个地方）：

getBase64(url: string, fileType: string, callback: Function) {
  const Img = new Image();
  let dataURL = '';
  Img.src = url;
  Img.setAttribute('crossOrigin', 'Anonymous');
  Img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = Img.width,
      canvas.height = Img.height;
      canvas.getContext('2d').drawImage(Img, 0, 0, Img.width, Img.height);
      console.log("getBase64 fileType:",fileType);
      dataURL = canvas.toDataURL('image/' + fileType, 1.0);
      console.log("dataURL:",dataURL);
      callback ? callback(dataURL) : null;
  };
}

下面是ie浏览器和google浏览器测试过程中控制台的log：

<ie浏览器 console log>
downloadPic4IE fileType: jpg
getBase64 fileType: jpg
dataURL: data:image/png;base64,.........

<google浏览器 console log>
downloadEvent-->downloadPic4Chrome
main-es2015.dcba4423e943133f53b8.js:1 getBase64Test fileType: jpg
main-es2015.dcba4423e943133f53b8.js:1 getBase64Test dataURL: data:image/png;base64,........

从log来看，我的图片保存的是.jpg扩展名，也就是图片格式被代码认为是jpg格式，结果toDataURL的时候，返回的结果却是image/png，这是因为jpg格式不支持，没识别出来，而canvas的toDataURL默认就是image/png，所以格式不支持的时候，就用了默认的png的，而文件的扩展名是文件名一部分不会修改，所以就出现了.jpg的扩展名，但内容是png的情况，然后我人为修改为jpeg就识别了，log如下：

<ie浏览器 console log>
downloadPic4IE fileType: jpg
getBase64 1fileType: jpg
getBase64 2fileType: jpeg
dataURL: data:image/jpeg;base64,.........

<google浏览器 console log>
downloadEvent-->downloadPic4Chrome
main-es2015.307604d97dd4df664651.js:1 getBase64Test 1fileType: jpg
main-es2015.307604d97dd4df664651.js:1 getBase64Test 2fileType: jpeg
main-es2015.307604d97dd4df664651.js:1 getBase64Test dataURL: data:image/jpeg;base64,........

3.解决方法

都采用第三种方式，不用base64的方式，但是这样的话ie浏览器上有问题，原因没细究。另一个解决方法就是设备端保存图片的时候不用.jpg的扩展名，用.jpeg的扩展名，程序就会识别为jpeg类型，canvas的toDataURL就支持了。

4.扩展知识

canvas的toDataURL都支持哪些类型呢，我们用一个js的测试代码来看：

const canvas = document.createElement('canvas');
//图片导出为 png 格式
var typePng = 'png';
var imgDataPng = canvas.toDataURL(typePng);
console.log("type:png,imgDataPng:",imgDataPng);

var typeJpeg = 'image/jpeg';
var imgDataJpeg = canvas.toDataURL(typeJpeg,1.0);
console.log("type:jpeg,imgDataJpeg:",imgDataJpeg);

var typeJpg = 'image/jpg';
var imgDataJpg = canvas.toDataURL(typeJpg,1.0);
console.log("type:jpg,imgDataJpg:",imgDataJpg);

var typeWebp = 'image/webp';
var imgDataWebp = canvas.toDataURL(typeWebp,1.0);
console.log("type:webp,imgDataWebp:",imgDataJpeg);

上面的代码，我们直接用在线js测试工具跑下结果，在线测试工具连接如下：

https://www.sojson.com/runjs.html

测试结果如下：

> "type:png,imgDataPng:" "data:image/png;base64,..........
> "type:jpeg,imgDataJpeg:" "data:image/jpeg;base64,..........
> "type:jpg,imgDataJpg:" "data:image/png;base64,..........
> "type:webp,imgDataWebp:" "data:image/jpeg;base64,..........