Draw a line over images in javascript using Opencv.js

Question

in this upload.html page the user will be upload multi images after that draw line on the images the show in the same page

Note: draw a line, not by the user

this error appears to me when i run a code

Uncaught 
BindingError
message: "Cannot pass "1" as a Mat"
name: "BindingError"
stack: "BindingError: Cannot pass "1" as a Mat↵    at BindingError.<anonymous>

A code

function preview_images() 
{

 var total_file=document.getElementById("images").files.length;

 for(var i=0;i<total_file;i++)
 {
  //cv.line(total_file, Point(dx+150, dy+100), Size(100,70), 0, 0, 360, white, -1, 8, 0 )

   cv.line(total_file, (20, 160), (100, 160), (0, 0, 255), 10) 


         var UrlFile=URL.createObjectURL(event.target.files[i]);


  $('#image_preview').append("<div class='col-md-3'><img class='img-responsive' src='"+UrlFile+"'></div>");
 }

}

</script>

</head>
<body>

<div class="row">
 <form action="/upload" method="post" enctype="multipart/form-data">
  <div class="col-md-6">

  <input type="file" class="form-control" id="images" name="images"  onchange="preview_images(this);" multiple="" accept='image/*' />


  <input type ="submit" value = "upload"

Milija B · Accepted Answer · 2020-11-12 13:54:22Z

1

var img           = document.getElementById('img');
var canvas_output = document.getElementById("canvas_output");

var mat = cv.imread(img);
for (j = 0; j < lines.length; j++) {
    let line = lines[j]
    // line = [y_1, x_1, y2, x_2]
    let y_1 = line[0]
    let x_1 = line[1]
    let y_2 = line[2]
    let x_2 = line[3]
    let p1  = new cv.Point(x_1, y_1);
    let p2  = new cv.Point(x_2, y_2);
    cv.line(mat, p1, p2, [0, 255, 0, 255], 1)
}

cv.imshow(canvas_output, mat);
mat.delete()

answered Nov 12, 2020 at 13:54

Milija B

91 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Zigmas Slušnys · Accepted Answer · 2019-10-31 17:53:25Z

0

From what I understand you try to pass a number into a field that requires a Mat object.

cv.line(total_file, (20, 160), (100, 160), (0, 0, 255), 10) - where total_file is a number.

Please refer to the documentation provided by opencv: https://docs.opencv.org/3.4/d6/d6e/group__imgproc__draw.html#ga7078a9fae8c7e7d13d24dac2520ae4a2

As an example you could do

let matrix = new cv.Mat()

cv.line(matrix, (20, 160), (100, 160), (0, 0, 255), 10)

answered Oct 31, 2019 at 17:53

Zigmas Slušnys

12 bronze badges

1 Comment

hideya Over a year ago

As the coordinates need to be specified by Point instances, and the color by an array, I think the line would look like the following: cv.line(matrix, new cv.Point(20, 160), new cv.Point(100, 160), [0, 0, 255, 255], 10)

Collectives™ on Stack Overflow

Draw a line over images in javascript using Opencv.js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related