Question

我试图从图片中获取RGB值，但是没有成功。

要拍照，我使用的是cordova-plugin-camera-preview插件。

然后，我在img中的base64string元素中显示图片。

在尝试裁剪感兴趣的图像并将其显示在canvas元素中之后。

到此为止，它工作正常，但无法获取画布中显示的部分图像的RGB值。 data仅包含“ 0”，并且拍摄的图像不是黑色的（因此值应为！= 0）

非常感谢任何帮助。

home.ts

var canvas = <HTMLCanvasElement> document.getElementById('imageCanvas');
var image = new Image();
if (canvas.getContext) {
 var imgX = 312;
 var imgY = 408;
 var imgWidth = 60;
 var imgHeight = 296;
 var ctx = canvas.getContext('2d');
 console.log('ctx = ' + ctx);
 var imageData = ctx.getImageData(312, 408, 60, 296);

 image.onload = function(){
  ctx.drawImage(image, 312,408 , 60,304 , 0,0 , 60,304);
 };

 image.src = this.base64Image;
 var imageData = new ImageData(imgWidth, imgHeight);

 imageData = ctx.getImageData(312, 408, imgWidth, imgHeight);
 console.log('imageData: ' + imageData.data[1]);
 var data = imageData.data;
 console.log('data: '+ data[0]);
}

console.log('imageData: ' + imageData.data[1]);和console.log('data: '+ data[0]);给出“ 0”值。

home.html

<img id ="image" class="image-container" src="{{base64Image}}" />
<canvas style="border:1px solid #d3d3d3;" id="imageCanvas" ></canvas>

Answer 1

imageData.data返回一个Uint8ClampedArray，它代表一维数组，其中包含RGBA顺序的数据，整数值介于0和255之间（包括）。这意味着您必须遍历结果数组并获取RGB值。

您可以使用简单的for循环来做到这一点：

for (var pixel = 0; pixel < data.length; pixel += 4) {
    var r = pixel[0];
    var g = pixel[1];
    var b = pixel[2];

    console.log("R:", r, "G:", g, "B:", b)
}

离子-从图像获取RGB值

1 个答案: