画布到 JPEG，然后文件上传到 ESP32 SPIFFS 无法解码，Picojpeg 错误 9

如何解决画布到 JPEG，然后文件上传到 ESP32 SPIFFS 无法解码，Picojpeg 错误 9

Picojpeg 很棒。我发现它嵌入在 Bodmer 的 JPEGDecoder 中 https://github.com/Bodmer/JPEGDecoder/blob/master/src/picojpeg.h 和用于在 135x240 像素的 OLED 显示屏上显示图像。

我从 Javascript 上下文创建了一个 10x10 像素的 JPEG 编码图像使用此代码：

var mywide = video.videoWidth;
mywide = mywide / 6;
canvas.width = 135;
canvas.height = 240;

var image = canvas.getContext('2d').drawImage(video,10,10);
var base64png = canvas.toDataURL("image/jpeg",1.0);
var dataURL = base64png.replace(/\s/g,'+').replace(/^data:image\/jpeg;base64,/,'');
var nobase = window.atob(dataURL);

var oAjaxReq = new XMLHttpRequest();
oAjaxReq.submittedData = nobase;

oAjaxReq.onreadystatechange = function() {
   console.log("Uploading image");
   console.log(oAjaxReq.responseText);
}

oAjaxReq.onload = function (oEvent)
{
   console.log("Uploaded");
}

oAjaxReq.open("post","upload",true);

var bound = Date.Now().toString(16);
var sBoundary = "----WebKitFormBoundary" + bound;

oAjaxReq.setRequestHeader("Content-Type","multipart/form-data; boundary=" + sBoundary );

var mydata = "--" + sBoundary + "\r\n";

mydata += "Content-disposition: form-data; name=\"name\"; filename=\"" + "slice1.jpg" + "\"\r\n";
mydata += "Content-Type: image/png";
mydata += "\r\n";
mydata += "\r\n";

mydata += nobase;

mydata += "\r\n";

mydata += "--" + sBoundary + "--";
mydata += "\r\n";

oAjaxReq.send( mydata );

我在 ESP32 上使用 fhessel 的 HTTPS 服务器来接收来自 Chrome 浏览器。

https://github.com/fhessel/esp32_https_server

这是我的服务器端表单发布处理程序代码：

void handle_upload(HTTPRequest * req,HTTPResponse * res)
{ 
  Serial.println("Handle_upload");

  HTTPBodyParser *parser;
  parser = new HTTPMultipartBodyParser(req);
  bool didwrite = false;

  Serial.println( "Handle_upload 2" );

  while(parser->nextField()) {
    
    Serial.println( "Handle_upload 3" );
    std::string name = parser->getFieldName();
    std::string filename = parser->getFieldFilename();
    std::string mimeType = parser->getFieldMimeType();
    Serial.printf("handleFormUpload: field name='%s',filename='%s',mimetype='%s'\n",name.c_str(),filename.c_str(),mimeType.c_str() );

    if ( ! (filename.rfind("/",0) == 0) )
    {
      filename = "/" + filename;
    }
    
    Serial.print("handle_upload Name: "); 
    Serial.println(filename.c_str()  );
    
    fsuploadFile = LITTLEFS.open( filename.c_str(),"w");            // Open the file for writing in SPIFFS (create if it doesn't exist)

    size_t fileLength = 0;
    didwrite = true;
    
    while (!parser->endOfField()) {
      byte buf[512];
      size_t readLength = parser->read(buf,512);
      fsuploadFile.write(buf,readLength);
      fileLength += readLength;
    }
    
    fsuploadFile.close();
    res->printf("<p>Saved %d bytes to %s</p>",(int)fileLength,filename.c_str() );
  }

  if (!didwrite) {
    res->println("<p>Did not write any file contents</p>");
  }
  
  delete parser;
  if(didwrite) 
   {                                    // If the file was successfully created
     res->setHeader("Location","/success");
     res->setStatusCode(303);
   }
   else 
   {
     res->setStatusCode(500);
     res->setStatusText("Upload Failed");
   }
 }

上传成功，将文件存储在ESP32 SPIFFS文件系统中（使用LittleFS）这是文件内容（打印为 ASCII 字符和十六进制值）：

 =A,⸮=C3,⸮=BF,⸮=84,=0,)=29,=10,=1,=3,=2,=5,=9,=4,=11,=6,=7,=12,=13,1=31,⸮=C2,⸮=81,=14,!=21,"=22,#=23,2=32,Q=51,⸮=85,⸮=94,=19,-=2D,=D,=15,⸮=A3,⸮=93,A=41,S=53,T=54,a=61,s=73,⸮=A1,⸮=B1,⸮=B3,⸮=B0,⸮=9A,=C,?=3F,z=7A,⸮=8D,⸮=89,⸮=99,⸮=8F,4=34,⸮=87,⸮=BA,⸮=A9,⸮=9B,i=69,⸮=9F,⸮=97,=7F,=1B,⸮=8B,>=3E,⸮=8E,q=71,3=33,⸮=AC,⸮=A7,⸮=BB,k=6B,[=5B,⸮=A6,]=5D,u=75,\=5C,l=6C,⸮=95,U=55,}=7D,=18,⸮=BD,=1A,=8,⸮=B5,⸮=88,Y=59,⸮=B2,{=7B,/=2F,⸮=AE,⸮=B8,⸮=8A,⸮=AA,⸮=A8,⸮=B4,⸮=96,P=50,@=40,⸮=98,⸮=BC,g=67,=1E,;=3B,~=7E,*=2A,⸮=BE,⸮=A0,⸮=B7,=1D,⸮=AD,⸮=AF,m=6D,8=38,w=77,⸮=92,r=72,=1C,h=68,j=6A,⸮=AB,⸮=9D,V=56,6=36,⸮=9E,⸮=A2,M=4D,⸮=9C,5=35,⸮=8C,t=74,W=57,v=76,9=39,L=4C,O=4F,D=44,b=62,:=3A,⸮=B9,=A,=20,[HTTPS:I] Request: GET /favicon.ico (FID=62)

Picojpeg 拒绝文件并抛出错误 19。

我使用在 Pixelmator for Mac 和 Picojpeg 中创建的 jpeg 文件测试了 Picojpeg 工作正常。我使用相同的 HTTPS 服务器代码上传文件内容。我用这个 HTML：

<form action=upload method=post enctype=multipart/form-data>
<input type=file name=name>
<input class=button type=submit value=Upload>
</form>

这将正确上传 Jpeg 文件。然后 Picojpeg 解码 jpeg 图像正确无误。

我不知道接下来要去哪里？任何帮助将不胜感激。

-弗兰克