Javascript - 选择啥文件类型来保存像素数据？

Posted 2023-05-07

【中文标题】Javascript - 选择啥文件类型来保存像素数据？

【英文标题】：Javascript - what files type choose to save pixels data?Javascript - 选择什么文件类型来保存像素数据？

【发布时间】：2015-08-13 08:25:37

【问题描述】：

如何在javascript中保存（最小文件大小）像素数据？

现在我正在使用 JSON，它看起来像这样：

 "SIZE":[120,120],
  "FRAME":["SHINE",""],
  "LEDS":[
       "X":0,"Y":0,"R":16,"G":30,"B":58,
       "X":1,"Y":0,"R":13,"G":23,"B":43,
       "X":2,"Y":0,"R":14,"G":26,"B":50,
  etc...

所以对于像 16x16、90x32 这样的小图片，文件大小还可以，但现在我需要做 120x120 的图片，文件大小约为 500kb。有没有更好的解决方案？

【问题讨论】：

您的数据是否创造了连贯的空间？您是否定义了所有像素 (120x120)？

没有。我定义了所有像素。

【参考方案1】：

您几乎没有选择以最小尺寸发送像素数据。最简单的方法是将所有这些像素信息打包到一个二进制数据中。

MIME 类型

您可以使用 image/bmp MIME 类型通过 http 请求发送图像数据。您可以查看https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data 以查看如何读取此类数据

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) 
  var arrayBuffer = oReq.response; // Note: not oReq.responseText
  if (arrayBuffer) 
    var byteArray = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteArray.byteLength; i++) 
      // do something with each byte in the array
    
  
;

oReq.send(null);

转换为二进制并作为 BASE64 发送

您可以将像素数据转换为二进制格式（类似于纯 BMP），然后使用BASE64 算法用字母表示。然后你可以用普通的 JSON 发送它

这是关于将复杂结构打包成二进制的很好的解释：http://danthedev.com/2015/07/25/binary-in-javascript/

【讨论】：

是的，我做了，要检查两者。谢谢。