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

eit6fx6z 于 2023-08-06 发布在 Java

关注(0)|答案(1)|浏览(172)

我试图在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对象？

opencv

来源：https://stackoverflow.com/questions/76743162/read-base64-string-of-png-datatype-as-cvmat-object-in-opencv-js-using-javascrip

1条答案

按热度按时间

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

的数据

赞(0）回复(0）举报 2023-08-06

我来回答

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

1条答案

相关问题

热门标签

最新问答