Crop Recognized Image in Wikitude

I'm working on simple image recognition in Wikitude AR SDK. I'm using Javascript SDK and launched the sample project "01_ImageRecognition_1_ImageOnTarget". the code is like this:

    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();

I aimed to crop the piece of captured image that is recognized. I asked in Wikitude Forum but no one guided me and I couldn't find the related documentation. I hope somebody helps me here.

To achieve what you are asking for with the Wikitude Javascript SDK, you will have to write a simple plugin. The Javascript SDK itself does not offer that kind of functionality.

You receive the current camera frame in the cameraFrameAvailable function and a list of currently recognised targets in the update function. The former provides access to an unsigned char* pointer to the pixel buffer of the current camera frame, the latter provides the coordinates of the recognised image target within the aforementioned frame.

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

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

As these two functions are executed concurrently, you need to be mindful of race conditions and synchronise access to your data accordingly.

You can find the corresponding documentation pages, including all the details on how to exactly go about writing a plugin, here.

I would like to highlight that you received an answer to the question you posted on the Wikitude forums within a couple of hours. We'd happy to provide further assistance there if you should need any.