.NET Core 等效于 Uint8ClampedArray答案

【问题标题】：.NET Core equivalent of Uint8ClampedArray.NET Core 等效于 Uint8ClampedArray
【发布时间】：2018-12-21 05:30:04
【问题描述】：

我正在使用 jpeg_camera 库从笔记本电脑上的 web 应用获取快照，并通过 fetch 调用将其发送到我的控制器。

snapshot.get_image_data 返回一个具有 3 个属性（数据：Uint8ClampedArray、width、heigh）的对象。

当我执行 fetch 调用 sendPic(data) 时，我总是收到 400 错误，因为 ModelState 无效。
这意味着 Byte[] 不适合来自 JS 的 Uint8ClampedArray。

该对象的等价物是什么？

我还发现了一种返回 base64 的方法，我可以在控制器内部将其转换为 Byte[]，但我想避免这种解决方案。

JS代码：

function savePic() {
    var test1 = snapshot.get_image_data((done) => {
        var data = {
            "Pic": done.data,
            "IdActivity": idActivity,
            "Instant": new Date().toISOString()
        };
        sendPic(data);
    });
}

function sendPic(data) {
    fetch(uriPicsEndPoint, {
        body: JSON.stringify(data),
        headers: {
            "Content-Type": "application/json; charset=utf-8"
        },
        credentials: 'include',
        method: 'POST'
    });
}

API 控制器：

[Authorize]
[HttpPost]
public async Task<IActionResult> SavePic([FromBody] Selfie selfie)
{
    if (ModelState.IsValid)
    {
        try
        {
            var storageAccount = CloudStorageAccount.Parse(_configuration["ConnectionStrings:Storage"]);
            var blobClient = storageAccount.CreateCloudBlobClient();
            var camerasContainer = blobClient.GetContainerReference("selfies");
            await camerasContainer.CreateIfNotExistsAsync();
            var id = Guid.NewGuid();
            var fileExtension = ".jpeg";
            var blobName = $"{selfie.IdActivity}/{id}{fileExtension}";
            var blobRef = camerasContainer.GetBlockBlobReference(blobName);

            await blobRef.UploadFromByteArrayAsync(selfie.Pic, 0, selfie.Pic.Length);
            string sas = blobRef.GetSharedAccessSignature(
                new SharedAccessBlobPolicy()
                {
                    Permissions = SharedAccessBlobPermissions.Read
                });
            var blobUri = $"{blobRef.Uri.AbsoluteUri}{sas}";

            var notification = new UpdateSelfieRequest()
            {
                UriPic = blobUri,
                IdActivity = selfie.IdActivity,
                Instant = selfie.Instant
            };

            string serviceBusConnectionString = _configuration["ConnectionStrings:ServiceBus"];
            string queueName = _configuration["ServiceBusQueueName"];
            IQueueClient queueClient = new QueueClient(serviceBusConnectionString, queueName);
            var messageBody = JsonConvert.SerializeObject(notification);
            var message = new Message(Encoding.UTF8.GetBytes(messageBody));
            await queueClient.SendAsync(message);
            await queueClient.CloseAsync();

            return Ok();
        }
        catch
        {
            return StatusCode(500);
        }
    }
    else
    {
        return BadRequest();
    }
}

还有“自拍”类：

public class Selfie
{
    public Byte[] Pic { get; set; }
    public int IdActivity { get; set; }
    public DateTime Instant { get; set; }
}

【问题讨论】：

您能发布实际发送的内容吗？您可以在大多数浏览器的开发者工具的网络选项卡中看到这一点
嗯，Uint8ClampedArray 是一个 8 位无符号整数 (0-255)，类似于 Byte type。
快速猜测一下，如果您使用的是JSON.stringify，那么参数应该是 JObject 类型？
@Mark G JSON.stringify() 应该是字节值数组形式的 JSON 字符串（与 Pic 成员相关）。 JSON.Deserialize 应该做对了。
@Jimi 但是通过模型绑定，反序列化已为您完成。我的建议是将参数定义为[FromBody] JObject selfie，这样您就可以看到可以使用selfie["Pic"].Values<byte>() 转换的原始数据（如Pic 作为字节值数组）。

标签： javascript c# asp.net-core uint8array

【解决方案1】：

当您使用 stringify 时，它在 JSON 中变为 {"0":255, "1":0, "2":0, "3":255, ...}。

如果您将操作参数定义为JObject selfie，则可以使用var pic = selfie["Pic"].ToObject<Dictionary<int, byte>>() 获取字节。

或者，您可以将数据作为表单值发布，并将操作定义为SavePic(Dictionary<int, byte> Pic, int IdActivity, DateTime Instant)，在浏览器中使用以下代码进行测试：

var ctx = document.createElement('canvas').getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(5, 5, 5, 5);

$.post('SavePic', {
    Pic: ctx.getImageData(5, 5, 5, 5).data,
    IdActivity: 1,
    Instant: new Date().toISOString()
});

但是，在发布数据之前将 Uint8ClampedArray 转换为常规数组可能更容易。

【讨论】：