# Opencv.js copyTo freezes

**URL:** <https://forum.opencv.org/t/opencv-js-copyto-freezes/7727>\
**Category:** Uncategorized\
**Created:** [February 26, 2022, 2:02pm UTC](https://forum.opencv.org/t/opencv-js-copyto-freezes/7727 "2022-02-26T14:02:21Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![skunkwerk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.opencv.org/skunkwerk/32/4626_2.png) [@skunkwerk](https://forum.opencv.org/u/skunkwerk)\
**Post date:** [February 26, 2022, 2:02pm UTC](https://forum.opencv.org/t/opencv-js-copyto-freezes/7727/1 "2022-02-26T14:02:21Z")

</div>

I’ve loaded an image into openCV (the Javascript build) like this:

```auto
let src = cv.imread('canvas_input');

```

I’m able to take a rectangular region from the image like this:

```auto
let rect = new cv.Rect(0, 0, 100, 100);
sample = dst.roi(rect);

```

but when I try to copy that back to the src execution freezes (the next line which logs to console never executes):

```auto
sample.copyTo(src_copy, rect);

```

link to [codepen](https://codepen.io/skunkwerk/pen/gOXdRKd?editors=1111) (click the ‘Try it’ button)

What am I missing?  
Thanks

---

<div class="post-metadata">

**Author:** ![berak](https://avatars.discourse-cdn.com/v4/letter/b/85f322/32.png) [@berak](https://forum.opencv.org/u/berak)\
**Post date:** [February 26, 2022, 3:24pm UTC](https://forum.opencv.org/t/opencv-js-copyto-freezes/7727/2 "2022-02-26T15:24:48Z")

</div>

nice, that you have that codepen thing, however, could you please put a more complete code snippet to reproduce it _here_ ?

e.g.what are dst, src\_copy ? how do those get initialized ?

---

<div class="post-metadata">

**Author:** ![skunkwerk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.opencv.org/skunkwerk/32/4626_2.png) [@skunkwerk](https://forum.opencv.org/u/skunkwerk)\
**Post date:** [February 28, 2022, 1:38pm UTC](https://forum.opencv.org/t/opencv-js-copyto-freezes/7727/3 "2022-02-28T13:38:19Z")

</div>

Yes, certainly.

with the following HTML:

```
<canvas id='canvas_input'></canvas>
<canvas id='canvas_output'></canvas>
<canvas id='canvas_output_rect'></canvas>

```

and the following script:

```
let canvas = document.getElementById('canvas_input');
load_image_to_canvas('https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Nelson_Mandela_1994.jpg/463px-Nelson_Mandela_1994.jpg', 'canvas_input');

let src = cv.imread('canvas_input');
let dst = new cv.Mat();
cv.cvtColor(src, src, cv.COLOR_RGBA2RGB, 0);

let ksize = new cv.Size(3, 3);
cv.GaussianBlur(src, dst, ksize, 3, 3, cv.BORDER_DEFAULT);
cv.imshow('canvas_output', dst);

let src_copy = src.clone();
let sample = new cv.Mat();
let rect = new cv.Rect(0, 0, 100, 100);
sample = dst.roi(rect);

console.log('about to copy')
sample.copyTo(src_copy, rect);
console.log('copied')
cv.imshow('canvas_output_rect', src_copy);

```

You should be able to reproduce it (I am using the build from [https://huningxin.github.io/opencv.js/build/wasm/opencv\_js.wasm](https://huningxin.github.io/opencv.js/build/wasm/opencv_js.wasm))

thanks

---

<div class="post-metadata">

**Author:** ![berak](https://avatars.discourse-cdn.com/v4/letter/b/85f322/32.png) [@berak](https://forum.opencv.org/u/berak)\
**Post date:** [February 28, 2022, 2:08pm UTC](https://forum.opencv.org/t/opencv-js-copyto-freezes/7727/4 "2022-02-28T14:08:48Z")

</div>

problem is here:

> [@skunkwerk](#):
>
> ```auto
> sample.copyTo(src_copy, rect);
> 
> ```

you cannot copy to a Rect, destination needs to be (part of) an image / Mat  
(with the same size as `sample`)

you should also get an error like:

```
BindingError: Cannot pass "[object Object]" as a Mat

```

somewhere

btw, just curious:

> [@skunkwerk](#):
>
> I am using the build from [https://huningxin.github.io/opencv.js/build/wasm/opencv\_js.wasm](https://huningxin.github.io/opencv.js/build/wasm/opencv_js.wasm)

how would i use that ?

---

<div class="post-metadata">

**Author:** ![skunkwerk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.opencv.org/skunkwerk/32/4626_2.png) [@skunkwerk](https://forum.opencv.org/u/skunkwerk)\
**Post date:** [February 28, 2022, 4:15pm UTC](https://forum.opencv.org/t/opencv-js-copyto-freezes/7727/5 "2022-02-28T16:15:29Z")

</div>

thank you.

Is there a better way of copying a Rect to a matrix of a certain dimension, without having to write two for loops and setting the pixel values manually?  
Ie in Python you can use the slicing syntax to do it in one line, like [this](https://stackoverflow.com/a/14102014/1316252).

I initialized the WASM file like this:  
var Module = {  
wasmBinaryFile: ‘[https://huningxin.github.io/opencv.js/build/wasm/opencv\_js.wasm](https://huningxin.github.io/opencv.js/build/wasm/opencv_js.wasm)’,  
\_main: function() { console.log(‘ready’); }  
};  
and also added a script src to opencv.js

---

<div class="post-metadata">

**Author:** ![berak](https://avatars.discourse-cdn.com/v4/letter/b/85f322/32.png) [@berak](https://forum.opencv.org/u/berak)\
**Post date:** [February 28, 2022, 4:25pm UTC](https://forum.opencv.org/t/opencv-js-copyto-freezes/7727/6 "2022-02-28T16:25:33Z")

</div>

> [@skunkwerk](#):
>
> `sample.copyTo(src_copy, rect);`

i think you wanted

```auto
sample.copyTo(src_copy.roi(rect));

```

(since src\_copy is larger than sample, you need to specify a roi, too)  
(2nd arg for copyTo() would be a mask image, not a rect)

---

<div class="post-metadata">

**Author:** ![skunkwerk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.opencv.org/skunkwerk/32/4626_2.png) [@skunkwerk](https://forum.opencv.org/u/skunkwerk)\
**Post date:** [March 3, 2022, 5:42pm UTC](https://forum.opencv.org/t/opencv-js-copyto-freezes/7727/7 "2022-03-03T17:42:27Z")

</div>

that worked, thank you