DrawImage

[Ang3ls]

I used the example webcam live demo and it works very well ... doing various experiments have not been able to use DrawImage instead of strokeText to insert an image on the marker ... how can I do?

` function drawImage(markers) {

    var corners, corner, x, y, i, j;
    for (i = 0; i !== markers.length; ++i) {
        corners = markers[i].corners;
        xMin = Infinity;
        yMin = Infinity;
        xMax = 0;
        yMax = 0;
        for (j = 0; j !== corners.length; ++j) {
            corner = corners[j];
            xMin = Math.min(xMin, corner.x);
            yMin = Math.min(yMin, corner.y);
            xMax = Math.max(xMax, corner.x);
            yMax = Math.max(yMax, corner.y);
        }
        my_W = (xMax - xMin);
        my_H = (yMax - yMin)
        base_image = document.createElement('img');
        base_image.onload = function () {
            context.drawImage(base_image, xMin, yMin, my_W, my_H);
        };
        base_image.src = "img/photo.jpg";
    }
}`

I think the refresh rate is too high to upload and insert an image in this way ... someone can help me?

[jcmellado]

AFAIK it's impossible to do perspective transformations with the 2D canvas context.

You could use WebGL (but the setup from scratch is a bit complicated)

Or even CSS transformaionss (but you still we need to calculate the transformation)

You really should be using some third-party library for that kind of stuff (like Three.js).

Take a look to the debug-posit example: https://github.com/jcmellado/js-aruco/blob/master/samples/debug-posit/debug-posit.html

Live demo here: https://jcmellado.github.io/js-aruco/debug/debug.html

It use Three.js to draw the rectangles (variables "plane1" and "plane2" on the source code).

It is easy to associate an image to that rectangles replacing: material = new THREE.MeshNormalMaterial(),

with something like this: texture = THREE.ImageUtils.loadTexture("textures/earth.jpg"), material = new THREE.MeshBasicMaterial( {map: texture} ),