javascript ImageData 类型数组读取整个像素?

2024-05-22

所以有很多关于如何的例子writeImageData 对象的 Uint32Array 视图中的整个像素。但是是否可以在不将计数器增加 4 倍的情况下读取整个像素呢?从hacks.mozilla.org https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/,写一个 rgba 像素看起来像this http://jsfiddle.net/andrewjbaker/GhwUC/.

var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);

var buf = new ArrayBuffer(imageData.data.length);
var buf8 = new Uint8ClampedArray(buf);
var data = new Uint32Array(buf);

for (var y = 0; y < canvasHeight; ++y) {
    for (var x = 0; x < canvasWidth; ++x) {
        var value = x * y & 0xff;

        data[y * canvasWidth + x] =
            (255   << 24) |    // alpha
            (value << 16) |    // blue
            (value <<  8) |    // green
             value;            // red
    }
}

imageData.data.set(buf8);

ctx.putImageData(imageData, 0, 0);

但是,如何从 ImageData 的 32 位视图中的单个偏移读取整个像素?这就是我感到困惑的地方,不应该吗buf32下面的长度是 256/4 = 64?

// 8x8 image
var imgd = ctx.getImageData(0, 0, canvasWidth, canvasHeight),
    buf32 = new Uint32Array(imgd.data);

console.log(imgd.data.length);  // 256
console.log(buf32.length);      // 256  shouldn't this be 256/4 ?

thanks!


想通了,我需要将缓冲区本身传递到 Uint32Array 构造函数中,而不是另一个 BufferView 中。

var buf32 = new Uint32Array(imgd.data.buffer);
console.log(buf32.length)  // 64 yay!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

javascript ImageData 类型数组读取整个像素? 的相关文章

  • 如何提高Canvas渲染性能?

    我必须画很多Shape http msdn microsoft com en us library system windows shapes shape aspx 约 1 20 万 作为 Canvas 2 的子级 我在 WPF 应用程序中
  • HTML5 - Canvas - 大图像优化

    我需要建立一个HTML5 canvas其中包含非常大的图像 可能高达 10 15MB 我的第一个想法是将图像分成几个块 这些块将在画布上水平移动时加载 对这个想法有什么想法吗 这是一件好事吗 也许我错过了一些已经实现的优化功能 你说得对 这
  • JavaScript;使用画布在图像上添加文本并保存到图像

    我只想制作一个页面 您可以在其中输入文本并将其添加到所选图像上并将其另存为新图像 我尝试了几种方法 但没有运气
  • 如何将webview内容划分为多个页面

    我必须使用 Android 上的 PdfDocument 从 webView 创建 PDF https developer android com reference android graphics pdf PdfDocument htm
  • 如何将多个画布元素放入一个画布元素中?

    我有多个由 JavaScript 创建的画布元素 我的问题是 如何将多个画布元素放入一个画布元素 干得好 JSfiddle http jsfiddle net Allendar UqxCY 它会抓取每个画布并将它们做成 PNG 的 访问缓冲
  • swscaler 警告:使用了已弃用的像素格式

    我想先对视频帧执行颜色空间转换 然后使用以下代码将其转换为 opengl 纹理 struct SwsContext pSwsCtx sws getCachedContext NULL width height codec gt pix fm
  • 如何获取 html5 画布内像素的像素坐标

    我知道您可以使用 getImageData 和 data 获取 html5 Canvas 内每个像素的值 但是有没有办法获取它们的坐标而不仅仅是它们的值 var w ctx canvas width h ctx canvas height
  • Gridview,允许背景画布在视图之外绘制

    我正在开发一个 Android 应用程序 一个小型记事本应用程序 在我的应用程序中 我使用 Gridview 创建 2 X 大小的网格并在每个单元格中 我有一个 LinearLayout 调用 AbstractNote 它的任务是显示每个保
  • 快速响应的交互式图表/图形:SVG、Canvas 还是其他?

    我正在尝试选择正确的技术来更新一个项目 该项目基本上在可缩放 可平移的图表中渲染数千个点 当前使用 Protovis 的实现性能不佳 在这里查看 http www planethunters org classify http www pl
  • 将图像缩略图上传到服务器,而不上传整个图像

    据我所知 我在这里问的是不可能的 但我想无论如何我都会问 以防我遗漏了什么 假设您想让用户上传 JPG 图像 并且这些图像被缩放为较小的图标 并且原始图像始终被丢弃并且不再需要 有没有什么方法可以在大多数现代浏览器中普遍使用 让用户选择硬盘
  • HTML Canvas:旋转图像 3D 效果

    我怎样才能旋转图像 例如45度 并挤压图像 假设我有一个完美的方形图像 我可以将它旋转到我想要的任何角度 但我想让旋转后的正方形被压扁 使高度比宽度小 2 3 生成的图像将不是一个完美的旋转正方形 而是一个被压扁的正方形 你知道我怎样才能达
  • 如何用java对jpg进行像素化?

    我正在尝试使用 Java 6 对 JPEG 进行像素化 但运气不佳 它需要使用 Java 而不是像 Photoshop 这样的图像处理程序 并且它需要看起来像老派 像这样 有谁能够帮助我 使用java awt image javadoc h
  • 无法在 Raphael 中缩放多条路径?

    我尝试使用当前的热门问题 使用 raphael 缩放多条路径 https stackoverflow com questions 3352698 scaling multiple paths with raphael 没有太多运气 我正在通
  • 如何检查图像的特定像素是否透明?

    有什么方法可以检查 PNG 图像的选定 x y 点是否透明 根据 Jeff 的回答 您的第一步是创建 PNG 的画布表示 下面创建一个与图像宽度和高度相同的离屏画布 并在其上绘制图像 var img document getElementB
  • 如何等待第一次画布重绘,直到 @font-face-font 加载?

    我有一个 HTML5 画布并用它编写文本context fillText 使用 font face font 使用 Firefox 3 6 显示页面我遇到问题 在画布的第一次绘制上 字体尚未下载 因此文本将以标准字体显示 我找到了一个 解决
  • 如何在 Android 中获取像素颜色

    我正在使用 Intent 调用并显示图库中的图像 现在我可以使用以下命令在 TextView 中获取图像的坐标 final TextView textView TextView findViewById R id textView fina
  • 如何计算android中位图擦除区域的百分比?

    我是安卓新手 我正在制作一个可以使用手指擦除画布上的位图的应用程序 像手指画橡皮擦之类的东西 我想计算擦除区域的百分比 例如 60 已从完整图像中擦除 请帮助我做到这一点 提前致谢 我尝试了一些方法 它总是给我 0 它不起作用 请参阅该方法
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 用渐变画线

    我在不同的位置画了多条线 例如 canvas drawLine startXLine1 stopXLine1 startYLine1 stopYLine1 paint canvas drawLine startXLine2 stopXLin
  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么

随机推荐

  • 在 Grails 中创建一个新的资源包?

    我想创建另一个资源包来组织我的 Grails 应用程序 Grails 提供了一个 messages 资源包 我需要创建一个 myApp 资源包 如何创建新的资源包并使用 g message GSP 标记读取其属性 你必须创建一个beangr
  • 如何以编程方式禁用 元素上的自动选择?

    然后用户使用 TAB 或 SHIFT TAB 跳转 到某个文本框 并且该文本框恰好有一个值 那么该值将被自动选择 我想禁用此行为 我认为这可以在 focusin 事件处理程序内部完成 input text focusin function
  • 使用 ggplot 2 使用线条或线段将堆栈条形图与多个组连接起来

    我正在对一些患有某种疾病的患者进行一项研究 并在 3 个不同的时间点使用顺序量表评估功能状态 我想在这些时间点的堆叠条形图中连接多个组 我查看了这些主题 但尚未使用这些建议使其发挥作用 如何将线条放置在堆积条形图的边缘 https stac
  • 节点:以编程方式检查包的最新版本

    我希望我的节点包 在 npm 上发布 在新版本可用时提醒用户 如何以编程方式检查已发布软件包的最新版本并将其与当前版本进行比较 Thanks 您可以结合npmview https npmjs com package npmview 用于获取
  • Dart 如何模拟过程

    我如何去模拟一个过程 与函数相反 请参见here https stackoverflow com questions 23925384 dart mocking a function 例如 给定以下 typedef 和过程 typedef
  • 如何使用 SQL 对项目进行排序,然后按另一个条件再次排序

    我正在使用 MySQL 我想对记录进行排序 或者我想对记录进行分组 然后按另一个条件再次对其进行排序 例如我有 6 个项目 Names Group Jack G1 Dian G2 Emily G2 Dean G1 Teddy G2 Gabe
  • 如何在 Pygame 中将具有一定透明度的 PNG 位图传输到表面上?

    我试图将 PNG 图像传输到表面上 但图像的透明部分由于某种原因变成黑色 这是简单的代码 screen pygame display set mode 800 600 pygame DOUBLEBUF 32 world pygame Sur
  • SQL Server - 仅执行存储过程角色

    如何创建只能运行的自定义 SQL Server 数据库服务器角色SELECT查询和存储过程 这意味着 该角色的用户不允许执行自定义查询 但可以运行具有 CRUD 和 SysAdmin 语句的存储过程 UPDATES DELETES ALTE
  • 从 MySQL 将 500 万行加载到 Pandas 中

    我在 本地 网络上的 MySQL 数据库中有 500 万行 连接速度非常快 而不是在互联网上 与数据库的连接工作正常 但如果我尝试这样做 f pd read sql query SELECT FROM mytable engine inde
  • HashMap 的奇怪序列化行为

    考虑以下三个类 实体变压器包含一个关联的地图Entity用字符串 Entity是一个包含 ID 的对象 由 equals hashcode 使用 并且包含对实体变压器 注意循环依赖 一些包装器包含一个实体变压器 并维护一个 Map 关联En
  • 安装 OS X Mavericks 后使用 mkvirtualenv 时出现问题

    我最近安装了 OS X Mavericks 我可以访问之前创建的虚拟环境 但在创建新虚拟环境时遇到问题 Christophers MacBook Pro 2 christopherspears mkvirtualenv bottle tod
  • javascript + jquery + setinterval + 动画

    我在 setInterval 和 jquery animate 方面遇到问题 这是我的代码 function slides1 table agah1 animate left first1 slow table agah2 animate
  • 快速重写函数错误

    我有一个结构 struct ErrorResultType ErrorType var description String var code Int 和一个协议 protocol XProtocol func dealError erro
  • <表值函数> 不是可识别的内置函数名称

    我收到此错误 消息 195 第 15 级 状态 10 第 1 行 fnParseName 不是可识别的内置函数名称 对于这个查询 SELECT fnParseName DOCTORFIRSTNAME DOCTORLASTNAME FROM
  • Xcode 中的目标、可执行文件和产品之间有什么区别

    在 Xcode 的 组和文件 面板下 目标 可执行文件和产品之间有什么区别 Target 定义如何构建产品 目标将构建产品所需的文件和指令组织成一系列可以采取的构建操作 Product 建立目标的结果 MyAppName app 换句话说
  • 机器人对话中未显示“反馈”文本

    我的表单流对话框包含一个应用了自定义验证的字段 var form builder Field new FieldReflector
  • html 可嵌入 flash wav 播放器

    我需要一个可在 IE FF 和 Chrome 中播放 wav 文件的嵌入式音频播放器 目前无法转换为 mp3 或任何其他格式 该播放器应该非常简单 只有一个播放 暂停按钮 也许还有一个时间轴栏 用户可以单击该时间轴栏来转到音频的特定部分 还
  • 使用 jQuery 在页面之间滑动

    我有一个 4 页的网站 我想用幻灯片效果在 4 页之间进行转换 我不想使用 ID 来执行此操作 我想按按钮或链接滑动到下一页 我知道这可以使用 jQuery 来完成 并且我见过这样做的网站 请帮忙 预先感谢所有建议 批评和意见 查看本教程和
  • JavaScript 函数默认参数[重复]

    这个问题在这里已经有答案了 const add a 1 b 1 c 1 gt a b c add 4 2 抛出未捕获的语法错误 意外的标记 如何调用该函数 使 b 默认为值 1 就拿undefined https developer moz
  • javascript ImageData 类型数组读取整个像素?

    所以有很多关于如何的例子writeImageData 对象的 Uint32Array 视图中的整个像素 但是是否可以在不将计数器增加 4 倍的情况下读取整个像素呢 从hacks mozilla org https hacks mozilla