UI界面读取一张图片，鼠标选中一个position，计算出对应图片的像素坐标，传给c++

c++中读取图片地址，解析出*char数组，根据ARGB协议，解析出ARGB的值，传递给UI界面

在UI界面中解析ARGB值，显示对应的颜色和16进制的字符串表示

bitmap 中每个像素的ARGB内存分布

因为大小端的缘故，和我们理解的ARGB的顺序相反，大小端读者有兴趣可以深入了解，

参考：https://zhuanlan.zhihu.com/p/25119530

读取每一个像素值

像素是以char* 格式存储在内存中，是一个一位数组，bitmap中记录了每一行的长度，即步辐，每个平台都有API可以获取 一个像素对应的bitmap内存位置为：

b = y * stride + x * 4 // 计算的是b通道

g = b + 1;

r = b + 2;

a = b + 3；

详细代码如下：

int f_getPixel(unsigned char *srcData, int width, int height, int stride, int x, int y, int argb[4])

{

x = x < 0 ? 0 : (x > width - 1 ? width - 1 : x);

y = y < 0 ? 0 : (y > height - 1 ? height - 1 : y);

int ret = 0;

if(srcData == nullptr)

{

printf("input image is null!");

return -1;

}

//Process

int pos = x * 4 + y * stride;

argb[0] = srcData[pos + 3];

argb[1] = srcData[pos + 2];

argb[2] = srcData[pos + 1];

argb[3] = srcData[pos + 0];

return ret;

}

实现颜色选择

这里基于qml来处理，读者有兴趣迁移到Android/iOS也不复杂

1. 获取鼠标点击坐标对应的图片像素坐标，传递给C++，这里简单处理，图片平铺到Image中

var pox = (mouseX / 640) *imageViewer.sourceSize.width;

var poy = (mouseY / 480) * imageViewer.sourceSize.height;

console.log("pox = ", pox, "poy = ", poy);

processor.getPix(fileDialog.fileUrl, pox, poy);

2.C++中解析Bitmap，注意url是file:///协议，qml中可以识别，C++中不能直接识别，需要处理下；Qt中C++与qml传参有限制，这里需要传递数组，用QVariantList->转场QVariant;最后发送信号

void ImageProcessor::getPix(QString sourceFile, int x, int y)

{

const QUrl url(sourceFile);

if (url.isLocalFile()) {

sourceFile = QDir::toNativeSeparators(url.toLocalFile());

}

QImage image(sourceFile);

if(image.isNull())

{

return;

}

unsigned char *data = image.bits();

int w = image.width();

int h = image.height();

int stride = image.bytesPerLine();

int argb[4];

f_getPixel(data, w, h, stride, x, y, argb);

QVariantList list;

list<

emit getPixDone(QVariant::fromValue(list));

}

qml中接收信号，展示结果。注意js中数据的长度有限

ImageProcessor {

function rgba(a,r,g,b){

var ret = (r << 16 | g << 8 | b);

var strRet = ("#" + a.toString(16) + ret.toString(16)).toUpperCase();

return strRet;

}

id: processor;

onFinished: {

imageViewer.source = "file:///" +newFile;

}

onGetPixDone: {

var selectColor = rgba(list[0], list[1],list[2],list[3]);

position.color = selectColor;

positionTex.text = selectColor;

}

}