时间戳

首页 > 解决方案 > 如何旋转（任意角度）ImageData 对象并接收新的“旋转”ImagData.data 数组

javascript - 如何旋转（任意角度）ImageData 对象并接收新的“旋转”ImagData.data 数组

问题描述

我有一个 imageData 对象，其中包含以 rgba 编码的高程数据。我需要计算指定航向的高程剖面。对于一个像素宽度的线和北向上的标题，这很容易，因为它只是 imagaData 数组的一列。对于指定的度数，它也很容易，因为它涉及简单的三角函数来计算数组中的 x,y 位置，但是我的要求更复杂。事实上，我需要计算宽度大于 1 像素的条纹的高程剖面（最大值），因此我需要旋转整个图像数据。

简而言之，我需要：

1）裁剪图像以处理较小的数据（例如原始图像的中心一半） - 性能很重要

2) 将裁剪后的图像按中心旋转指定的度数，因此我将在表格中以向上的方向获取所需的高程数据。

3) 扫描高程剖面数据，按射线原始并计算每行的最大高程值。

由于此操作必须每秒计算多次，因此我需要优化的解决方案。我尝试使用画布上下文的转换/旋转，但是 imageData 对象没有改变，所以我想我需要将上下文图像（旋转）保存到另一个图像对象，但我不确定如何。

任何超过欢迎的提示

标签： javascriptimage-processing

解决方案

我决定自己做数学，因为我只需要旋转图像的一部分。此函数以角度（以弧度为单位）围绕 (r) 顺时针旋转单点 (p)

function rotate(p, r, angle) // angle in radians, clockwise
{
var new_p = new Object();

// shortened calculation
new_p.x = Math.round(r.x + ((p.x - r.x)*Math.cos(angle) - (p.y - r.y)*Math.sin(angle)));
new_p.y = Math.round(r.y + ((p.x - r.x)*Math.sin(angle) + (p.y - r.y)*Math.cos(angle)));

return new_p;
}

测试，将 (0,0) 旋转 90 度

var test_p = rotate({ x:0, y:0 },{x:400,y:400},Math.PI/2)

结果

{x: 800, y: 0}

推荐阅读