ダウンロードするリンクを挿入するには、キャンバス/画像の 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には保存ボタンがあり、これが必要なものです