I wrote this webRTC app which takes photos with different filters added onto it. When I click on the click button, the frame from the webRTC video feed is loaded onto the canvas on the right side.
HTML Code -
<video id="vid" autoplay="true"></video>
<canvas id="cvs"></canvas>
<button id="btn1" onclick="start()">Start</button>
<button id="btn2" onclick="change()">Change Filter</button>
<button id="btn3" onclick="snap()" ng-click="random()">Click</button>
The function I've written to snap the picture onto the canvas after adding the filter is as follows
function snap()
{
canvas.className = '';
if (findex != 0)
canvas.classList.add(filters[findex]);
canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
}
How can I allow the user to download the image onto the computer from the canvas with the filters after the photo has been clicked ?