How to Take Picture with <a-marker-camera> ?

[hendrasan]

Hi, I'm testing the AR for A-frame demo and it looks cool! Just wondering can we add a take photo button so users can snap a photo with the AR? I know we can use screenshot in mobile phones but a button to take picture will be great

[OmranAbazid]

I was able to implement taking the screenshot using three.js example (basic.html):

• I added empty canvas as following:

<canvas width='640' height='480' style='visibility:hidden;' id='doubleImage'></canvas>

• then I wrote these functions (takeSnapshort is triggered on button click):

        function takeScreenshot() {
            var w = window.open('', '');
            w.document.title = "Screenshot";
            var img = new Image();
            var secondImg = new Image();
            renderer.render(scene, camera);
            var doubleImageCanvas = document.getElementById('doubleImage');
            var context = doubleImageCanvas.getContext('2d');
            var sources = {
                firstImage: renderer.domElement.toDataURL("image/png"),
                secondImage: arToolkitContext.arController.canvas.toDataURL("image/png")
            };

            loadImages(sources, function(images){
                context.drawImage(images.secondImage, 0, 0);
                context.drawImage(images.firstImage, 0, 0);
                img.src = doubleImageCanvas.toDataURL("image/png");
                w.document.body.appendChild(img);
            });
        }

        function loadImages(sources, callback) {
            var images = {};
            var loadedImages = 0;
            var numImages = 0;
            // get num of sources
            for (var src in sources) {
                numImages++;
            }
            for (var src in sources) {
                images[src] = new Image();
                images[src].onload = function () {
                    if (++loadedImages >= numImages) {
                        callback(images);
                    }
                };
                images[src].src = sources[src];
            }
        }

[ZoltanVeres]

@benhanks040888 Right now this feature is out of the scope of AR.js ATM, let me explain why: AR.js can have different ways to display objects on the screen: For AFrame you need a custom A-frame control For three.js you might need a custom control to make a screenshot etc. but the solution suggested by @OmranAbazid above might work for you.

[MattewZav]

Excuse me, I want to take a simple screenshot of with javascript.

this is my html code:

can i help me? thanks.

[mavichow]

Hello @OmranAbazid , I did try using arToolkitContext.arController.canvas.toDataURL("image/png") , but it's not working, currently my setup is following this article

thanks!

[OmranAbazid]

@mavichow @MattewZav You are using A-FRAME. I am not sure how it can be done using A-Frame A-FRAME is an abstraction layer on top of three.js therefore, it might not allow you to customize everything you want.

I suggest that you follow my instructions above. Use one of the three.js examples available in this repo basic.html is the simplest one

[Jamolinesca]

@OmranAbazid Hi Omran! I got it to work. To take a snapshot, but any ideas on how I could download the image? I also want to share it on facebook or social media. This will be of great help! Thank you

[liyasthomas]

@Esmolan Can you please share how you got it working? ie: to take a snapshot. Use FileSaver.js to download generated image. Also look up to html2canvas.js for FileSaver.js implementation. And do share how you succeeded in taking snapshot.

[Jamolinesca]

@liyasthomas I solved it. Taking and downloading image. Im just looking for a way to share the image now to facebook on click with some SDK. Any ideas? ` function takeScreenshot() {

    // open in new window like this
    //
    var w = window.open('', '');
    w.document.title = "Screenshot";
    //w.document.body.style.backgroundColor = "red";
    var img = new Image();
    var secondImg = new Image();
        renderer.render(scene, camera);
        var doubleImageCanvas = document.getElementById('doubleImage');
        var context = doubleImageCanvas.getContext('2d');
        var sources = {
            firstImage: renderer.domElement.toDataURL("image/png"),
            secondImage: arToolkitContext.arController.canvas.toDataURL("image/png")
        };

        loadImages(sources, function(images){
            context.drawImage(images.secondImage, 0, 0);
            context.drawImage(images.firstImage, 0, 0);
            img.src = doubleImageCanvas.toDataURL("image/png");
            w.document.body.appendChild(img);
        });

    // // download file like this.
    // var a = document.createElement('a');
    // // Without 'preserveDrawingBuffer' set to true, we must render now
    // renderer.render(scene, camera);
    // a.href = renderer.domElement.toDataURL().replace("image/png", "image/octet-stream");
    // a.download = 'img.png';
    // a.click();

    // New version of file download using toBlob.
    // toBlob should be faster than toDataUrl.
    // But maybe not because also calling createOjectURL.
    //
    renderer.render(scene, camera);
    renderer.domElement.toBlob(function(blob){
        var a = document.createElement('a');
      var url = img.src.replace(/^data:image\/[^;]+/, 'data:application/octet-stream');
      a.href = url;
      a.download = 'canvas.png';
      a.click();
    }, 'image/png', 1.0);
}
function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for (var src in sources) {
            numImages++;
        }
        for (var src in sources) {
            images[src] = new Image();
            images[src].onload = function () {
                if (++loadedImages >= numImages) {
                    callback(images);
                }
            };
            images[src].src = sources[src];
        }
    }
</script>`

[taime]

This example open the new tab with image. Could somebody please help to make download (saving) image ?

Or may be it's possible to open html page with this image in new tab ?