Canvas URL to download image

Question

just need to get the url of canvas/image to insert the link to download

<a href=IMAGE URL HERE" download="image">Save Image</a>

I have the following code...

<script>
            (function(){

                var ctx=canvas.getContext('2d');
                var localMediaStream=null;

                function sizeCanvas(){
                    setTimeout(function(){
                        canvas.width=video.videoWidth;
                        canvas.height=video.videoHeight;
                        img.height=video.videoHeight;
                        img.width=video.videoWidth;
                    },100);}

                function snapshot(){
                    ctx.drawImage(video,0,0);
                    img.src=canvas.toDataURL('image/png');
                }

                btnInsert.addEventListener('click',function(e){

                    if(navigator.getUserMedia){
                        navigator.getUserMedia('video',function(stream){
                            video.src=stream;
                            localMediaStream=stream;
                            sizeCanvas();
                        })
                    }else if(navigator.webkitGetUserMedia){
                        navigator.webkitGetUserMedia({
                            video:true
                        },function(stream){
                            video.src=window.webkitURL.createObjectURL(stream);
                            localMediaStream=stream;
                            sizeCanvas();
                        })
                    }else{({
                            target:video
                        });}},false);

                btnTake.addEventListener('click',function(e){
                    snapshot();
                },false);

                video.addEventListener('click',snapshot,false);
                btnCancel.addEventListener('click',function(e){
                    video.src='';
                    video.pause();
                    localMediaStream.stop();
                     nimg = new Image();
                     img.src=nimg;

                },false);})();




        </script>

what happens in this code ... is the image capture by webcam, dai has the save button and this is what I need

Answer 1

here is the solution...

<input type="text" id="ID_TEXT"/>
<a href="#" id="ID_LINK" download="">Save Image</a>

what is the input image name will be

<script>
            (function(){

...

                ID_LINK.addEventListener('click',function(e){
                   ID_LINK.href=canvas.toDataURL('image/png');
                   ID_LINK.download=ID_TEXT.value;
                },false);

...
        </script>

I hope it is