Question

只需要获取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>

此代码中会发生什么...... 是摄像头捕获的图像，戴有保存按钮，这就是我需要的

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

我希望它是

用于下载图像的Canvas URL

1 个答案: