【问题标题】:create an image from a byte array using javascript使用 javascript 从字节数组创建图像
【发布时间】:2014-04-13 15:13:03
【问题描述】:

目前我使用通用 - ASHX - 处理程序(通过 ajax/jquery 调用)将图像加载到 IMG 元素中......

serverimage1x4.src = '/Cloud/LiveXP.ashx';

但是,我想要一个网络工作者来代替这个。

我正在从网络工作者返回一个字节数组,并使用“postmessage”将它返回到父 UI。

那么,假设我使用 XMLHttpRequest 向 UI 返回一个字节数组,我该如何将该字节数组加载到 Image/IMG 元素中?

尝试加载画布元素会更好吗?

【问题讨论】:

  • 嗨,它不是重复的。我使用的是 JavaScript 而不是 C# 我需要相当于 C#
  • 该问题的公认答案也回答了您的问题......
  • 其实我在这里太高兴了。我的问题表明我已经有一个字节数组。我想知道如何使用 javascript 转换为图像。在客户端使用 base64 会放大图像大小。不过还是谢谢
  • 我很确定这就是这样做的方法。我不会担心“通货膨胀”,除非它是非常大的图像或非常微不足道的客户端设备。

标签: javascript image-processing bytearray web-worker


【解决方案1】:

我想你要找的是putImageData()

这是一个通过操作字节数组任意修改现有画布的用法示例:

  var image=draw.getImageData(0,0,W,H), data=image.data;
  for ( var y=0; y<H; y++ ) for ( var x=0; x<W; x++ )
    {
    var index=(x+y*W)*4;
    data[0+index]=x+y; // red
    data[1+index]=x; // green
    data[2+index]=255-data[2+index]; // blue
    data[3+index]=255; // alpha
    }
  draw.putImageData(image,0,0);

【讨论】:

  • 您好,感谢您的回答。那么, image.data 将是我的字节数组吗?另外,通过枚举是否会导致显示图像的延迟?我想尽快刷新图像。我会在第一次测试这个 - 谢谢
  • @AndrewSimpson:在最简单的情况下,您可以像我在这里所做的那样从现有画布中获取image.data。然后,您可以根据我展示的示例索引复制字节数组(将我的任意更改替换为从字节数组复制像素的内容)。我不知道速度——它可能取决于浏览器。
  • 嗨,这一切都非常有用,谢谢。将尽快对其进行测试并回复 - 谢谢
猜你喜欢
  • 1970-01-01
  • 2012-08-22
  • 1970-01-01
  • 2010-10-12
  • 1970-01-01
  • 1970-01-01
  • 2013-03-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多