javascript - 发送一组二进制数据，并高效地将其写入服务器端

Question

我使用 AJAX 将图像数组发送到服务器，并将它们写入服务器端。

我希望它尽可能高效，而且我很确定我现在所做的不好:

1. 以 string[] 形式发送图像数据效率不高。
2. 使用 JSON.stringify 对图像数据进行字符串化不是一个好主意。
3. 在服务器端使用 Convert.FromBase64String 效率不高。

<小时/>

这是我的客户端代码:

这从 Canvas 元素捕获图像并将其添加到数组中:

ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
imagesArr.push(canvas.toDataURL('image/jpeg', JPEG_QUALITY).replace('data:image/jpeg;base64,', ''))

这会将图像数组发送到服务器:

function sendImageBlock() {

    $.ajax({
        type: "POST",
        url: "/AJAXServices.aspx/Upload",
        data: JSON.stringify({images: imagesArr }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {},
        error: function (xhr, status, message) {}
    });

}

这是我的服务器端代码:

[WebMethod]
public static int Upload(string[] images)
{
     int index = 0;
     foreach (string image in images)
     {
         File.WriteAllBytes(string.Format("{0}.jpeg", index.ToString(), Convert.FromBase64String(image));
         index++;
     }
}

有什么建议可以让我保持干净和高效吗？摆脱使用字符串格式并使用二进制数据purley？

Answer 1

您可以将 Uint32Array 与 xhr2 (HTML5 XMLHttpRequest Level 2) 结合使用，以原始二进制格式发送数据。

XMLHttpRequest Level 2 introduces a slew of new capabilities which put an end to crazy hacks in our web apps; things like cross-origin requests, uploading progress events, and support for uploading/downloading binary data.

更多信息:https://www.html5rocks.com/en/tutorials/file/xhr2/

(function ($) {
   // fetch the canvas data buffer into an Uint32Array
   var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height); 
   var data= new Uint32Array(imageData.data.buffer);
   $.ajax({
      url: 'server_address',
      type: 'POST',
      contentType: 'image/png', 
      // set processData to false to prevent string converstion
      processData: false, 
      data:data
   });
})(jQuery);

可以通过以下方式在 PHP 中读取 blob 中的数据:

<php>
    $data = file_get_contents('php://input');
</php>