使用JavaScript在opencv.js中读取png数据类型的base64字符串作为cv:MAT对象

eit6fx6z  于 2023-08-06  发布在  Java
关注(0)|答案(1)|浏览(185)

我试图在JavaScript中读取base64字符串作为mat对象,我尝试了我在互联网和文档上找到的一切。我尝试加载img元素并将img元素src分配给base64。我也试着从canvas中获取图像数据,canvas中的图像被绘制到cv mat数组中,但仍然没有成功。
使用像元的方法

img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false,
);
img.src = "myImage.png"; // Set source path
src = cv.imread(img)

字符串
我也试过使用画布,就像下面这样

this.canvas.getContext('2d').drawImage(this.video, 0, 0, 
this.video.videoWidth, this.video.videoHeight,0, 0, canvasWidth, canvasHeight);
let ctx = this.canvas.getContext('2d');
let imgData = ctx.getImageData(0, 0, this.video.videoWidth, this.video.videoHeight);
let src = cv.matFromImageData(imgData);


两次src都是undefined,我检查了canvas的width = 720和height=480,但是src是undefined。我习惯于python,不是一个前端的家伙,我对前端的知识有限。有没有什么简单的方法可以使用base64字符串作为使用JavaScript的MAT对象?

h6my8fg2

h6my8fg21#

你的问题是:时机
传递给openCV的imread()函数的参数必须是HTMLImageElement的示例,除此之外,它还必须包含数据,例如:the actual实际imagedata图像yet尚未.在JavaScript中,图像加载是一个异步操作。
现在,如果你写这样的东西:

img.addEventListener(
  "load",
  () => {
    // execute drawImage statements here
  },
  false,
);
img.src = "myImage.png"; // Set source path
src = cv.imread(img)

字符串
当你尝试使用cv.imread(img)的时候,图像还没有被加载。
这就是"load"事件侦听器的用途。一旦它被触发,你就知道你可以处理图像的数据。因此,您唯一需要做的就是将imread()调用移动到事件侦听器的回调函数中。
举例来说:

let img = document.getElementById("myImage");
img.addEventListener(
  "load",
  () => {
    let mat = cv.imread(img);
    console.log(mat);
  },
  false
);
img.crossOrigin = "Anonymous";
img.src = "https://api.codetabs.com/v1/proxy/?quest=https://picsum.photos/id/237/200/300";
<script src=" https://cdn.jsdelivr.net/npm/opencv-browser@1.0.0/opencv.min.js "></script>
<img id="myImage">

的数据

相关问题