如何在QML JS中使用ItemGrabResult？

发布于 2025-02-09 21:00:52 字数 1247 浏览 3 评论 0原文

我正在尝试将QT快速项目树渲染到屏幕外容器中，以便我可以阅读RAW PIXELS：

Rectangle {
    x: 20
    y: 20
    width: 20
    height: 20
    color: 'red'

    Rectangle {
        x: 5
        y: 10
        width: 5
        height: 5
        color: 'green'
    }

    Component.onCompleted: {
        grabToImage(function(result) {
            console.log('Grab result:', result.image)
        })
    }
}

PRINTS：

qml：grab result：qvariant（qimage，qSize（qsize（20，20），格式= qimage :: format_rgba _rgba888888_premultiplied，depth = 32，devicepixelratio = 1，bytesperline = 80，sizeinbytes = 1600））

我不知道如何 sizeInbytes = 1600）在JS中访问该问题。

我尝试过：（

for(var k in result.image)
    console.log(k)

打印什么）

console.log(Object.keys(result.image))

（打印[]）

console.log(result.image.format)

（prints undefined）

image.source = result.url

其中image是iD> id> id场景中的现有图像项目。这个有效，但是问题是如何从image中读取像素的方法。我知道我可以使用canvas绘制图像，然后使用ctx.getimagedata（...）获取像素。对于一个简单的目标来说，这看起来很长。这是唯一的方法吗？

原文

I'm trying to render a Qt Quick Item tree to an offscreen container so I can read raw pixels:

Rectangle {
    x: 20
    y: 20
    width: 20
    height: 20
    color: 'red'

    Rectangle {
        x: 5
        y: 10
        width: 5
        height: 5
        color: 'green'
    }

    Component.onCompleted: {
        grabToImage(function(result) {
            console.log('Grab result:', result.image)
        })
    }
}

prints:

qml: Grab result: QVariant(QImage, QImage(QSize(20, 20),format=QImage::Format_RGBA8888_Premultiplied,depth=32,devicePixelRatio=1,bytesPerLine=80,sizeInBytes=1600))

However I don't know how to access that QImage in JS.

I tried:

for(var k in result.image)
    console.log(k)

(prints nothing)

console.log(Object.keys(result.image))

(prints [])

console.log(result.image.format)

(prints undefined)

image.source = result.url

where image is the id of an existing Image item in the scene. This one works, but then the problem becomes how to read the pixels from the Image. I know I can use a Canvas to draw the image and then use ctx.getImageData(...) to get the pixels. It looks quite a long way to a simple goal. Is it the only way?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

友欢 2025-02-16 21:00:52

这是解决方案item.grabtoimage（） - ＆gt; 图像 - ＆gt; canvas - ＆gt; Canvasimagedata：

function copyFromItem(item) {
    item.grabToImage(function(result) {
        tmpImage.source = result.url
    })
}

function copyFromImageData(im) {
    // read RGBA bytes in im.data[...]...
}

Image {
    id: tmpImage
    visible: false
    onSourceChanged: tmpCanvas.requestPaint()
}

Canvas {
    id: tmpCanvas
    visible: false
    width: ...
    height: ...
    onPaint: {
        var ctx = getContext('2d')
        ctx.reset()
        ctx.drawImage(tmpImage, 0, 0)
        copyFromImageData(ctx.getImageData(0, 0, 10, 10))
    }
}

Here's the solution going Item.grabToImage() -> Image -> Canvas -> CanvasImageData:

function copyFromItem(item) {
    item.grabToImage(function(result) {
        tmpImage.source = result.url
    })
}

function copyFromImageData(im) {
    // read RGBA bytes in im.data[...]...
}

Image {
    id: tmpImage
    visible: false
    onSourceChanged: tmpCanvas.requestPaint()
}

Canvas {
    id: tmpCanvas
    visible: false
    width: ...
    height: ...
    onPaint: {
        var ctx = getContext('2d')
        ctx.reset()
        ctx.drawImage(tmpImage, 0, 0)
        copyFromImageData(ctx.getImageData(0, 0, 10, 10))
    }
}

回复收藏 0 原文

~没有更多了~