代码之家 › 专栏 › 技术社区 › Msmkt

离子-从图像中获取RGB值

ionic-framework html javascript

Msmkt · 技术社区 · 6 年前

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

我用来拍照的 cordova-plugin-camera-preview 插件。

然后我在显示图片 img 元素来自 base64string .

我正在尝试裁剪我感兴趣的部分图像并将其显示出来。 canvas 元素。

直到这一点,它是正常的工作,但未能获得在画布上显示的图像的一部分的RGB值。 data 只包含“0”,拍摄的图像不是黑色的(所以值应该是!= 0)

任何帮助都非常感谢。

主页.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”值。

主页.html

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

1 回复 | 直到 6 年前

Endre Simo 6 年前

这个 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)
}

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前