I'm trying to get random image from input video file, and then put the image into opencv to get grayScale image on the webpage.

Getting random image from video is solved by below-solution.

Javascript how to extract frame from video?

but now i'm stuck to the problem, Is it impossible to give base 64 source image file into opencv(imread, imshow, cv.cvtColor)? Please help me.

'''
//const cv = require("./js/opencv");
var video = document.createElement("video");
var image = new Image();

var canvas = document.getElementById("prevImgCanvas");
var canvas_after = document.getElementById("canvas_after");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

video.addEventListener('loadeddata', function() {
  reloadRandomFrame();
}, false);

video.addEventListener('seeked', function() {

  var context = canvas.getContext('2d');
  context.drawImage(video, 0, 0, canvas.width, canvas.height);

  const dataurl = canvas.toDataURL("image/jpeg")
  image.src = dataurl;

  image.onload = function(){
  console.log(image);
  let mat = cv.imread(image);
  cv.imshow('canvasOutput', mat);

  mat.delete();
  };

}, false);

var playSelectedFile = function(event) {
  var file = this.files[0];
  var fileURL = URL.createObjectURL(file);
  video.src = fileURL;
}

var input = document.getElementById('fileinput');
input.addEventListener('change', playSelectedFile, false);

function reloadRandomFrame() {
  if (!isNaN(video.duration)) {
    var rand = Math.round(Math.random() * video.duration * 1000) + 1;
    video.currentTime = rand / 1000;
  }
}

'''