用于下载图像的画布 URL答案

【问题标题】：Canvas URL to download image用于下载图像的画布 URL
【发布时间】：2013-04-07 13:10:45
【问题描述】：

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

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

我有以下代码...

<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>

这段代码发生了什么... 是网络摄像头拍摄的图像，dai 有保存按钮，这就是我需要的

【问题讨论】：

标签： javascript html getusermedia

【解决方案1】：

这里是解决方案...

<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>

希望是这样

【讨论】：