用于下载图像的Canvas URL [英] Canvas URL to download image

问题描述

只需要获取canvas / image的url即可插入下载链接

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

推荐答案

这是解决方案......

here is the solution...

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

输入图像名称是什么

<script>
            (function(){

...

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

...
        </script>

我希望它是

这篇关于用于下载图像的Canvas URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！