在 Wikitude 中裁剪识别图像

Question

我正在 Wikitude AR SDK 中进行简单的图像识别。我正在使用 Javascript SDK 并启动示例项目“01_ImageRecognition_1_ImageOnTarget”。代码是这样的：

    var World = {
    loaded: false,

    init: function initFn() {
        this.createOverlays();
    },

    createOverlays: function createOverlaysFn() {
        /*
            First an AR.ImageTracker needs to be created in order to start the recognition engine. It is initialized with a AR.TargetCollectionResource specific to the target collection that should be used. Optional parameters are passed as object in the last argument. In this case a callback function for the onTargetsLoaded trigger is set. Once the tracker loaded all its target images, the function worldLoaded() is called.

            Important: If you replace the tracker file with your own, make sure to change the target name accordingly.
            Use a specific target name to respond only to a certain target or use a wildcard to respond to any or a certain group of targets.
        */
        this.targetCollectionResource = new AR.TargetCollectionResource("assets/bp2.wtc", {
        });

        this.tracker = new AR.ImageTracker(this.targetCollectionResource, {
            onTargetsLoaded: this.worldLoaded
        });

        /*
            The next step is to create the augmentation. In this example an image resource is created and passed to the 
            AR.ImageDrawable. A drawable is a visual component that can be connected to an IR target (AR.ImageTrackable) 
            or a geolocated object (AR.GeoObject). The AR.ImageDrawable is initialized by the image and its size. 
            Optional parameters allow for position it relative to the recognized target.
        */

        /* Create overlay for page one */
        var imgOne = new AR.ImageResource("assets/imageOne.png");
        var overlayOne = new AR.ImageDrawable(imgOne, 1, {
            translate: {
                x:-0.15
            }

        });

        /*
            The last line combines everything by creating an AR.ImageTrackable with the previously created tracker, the name of the image target and the drawable that should augment the recognized image.
            Please note that in this case the target name is a wildcard. Wildcards can be used to respond to any target defined in the target collection. If you want to respond to a certain target only for a particular AR.ImageTrackable simply provide the target name as specified in the target collection.
        */
        var pageOne = new AR.ImageTrackable(this.tracker, "*", {
            drawables: {
                cam: overlayOne
            }
        });
    },

    worldLoaded: function worldLoadedFn() {

        var cssDivLeft = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";
        var cssDivRight = " style='display: table-cell;vertical-align: middle; text-align: left;'";
        document.getElementById('loadingMessage').innerHTML =
            "<div" + cssDivLeft + ">Scan Target &#35;1 (surfer):</div>" +
            "<div" + cssDivRight + "><img src='assets/bp.png'></img></div>";

        // Remove Scan target message after 10 sec.
        setTimeout(function() {
            var e = document.getElementById('loadingMessage');
            e.parentElement.removeChild(e);
        }, 10000);
    }
};
World.init();

我的目的是裁剪被识别的拍摄图像。我在Wikitude论坛上问过，但是没有人指导我，我也找不到相关的文档。我希望有人在这里帮助我。

Answer 1

要使用 Wikitude Javascript SDK 实现您的要求，您必须编写一个简单的插件。 Javascript SDK 本身不提供那种功能。

您在 cameraFrameAvailable 函数中收到当前相机帧，在 update 函数中收到当前识别的目标列表。前者提供对当前相机帧像素缓冲区的 unsigned char* 指针的访问，后者提供上述帧内已识别图像目标的坐标。

void Plugin::cameraFrameAvailable(const wikitude::sdk::Frame& cameraFrame_)

void Plugin::update(const std::list<wikitude::sdk::RecognizedTarget>& recognizedTargets_)

由于这两个函数是同时执行的，因此您需要注意竞争条件并相应地同步对数据的访问。

您可以找到相应的文档页面，包括有关如何准确编写插件的所有详细信息，here。

我想强调一下，您在几个小时内就收到了对您在 Wikitude 论坛上发布的问题的答复。如果您需要，我们很乐意在那里提供进一步的帮助。

在 Wikitude 中裁剪识别图像

Crop Recognized Image in Wikitude

wikitude

wikitude-sdk