# Pasting image with feathered edges in Javascript

**URL:** <https://forum.opencv.org/t/pasting-image-with-feathered-edges-in-javascript/7816>\
**Category:** Uncategorized\
**Tags:** opencvjs\
**Created:** [March 4, 2022, 4:59pm UTC](https://forum.opencv.org/t/pasting-image-with-feathered-edges-in-javascript/7816 "2022-03-04T16:59:33Z")\
**Posts on this page:** 2\
**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:** [March 4, 2022, 4:59pm UTC](https://forum.opencv.org/t/pasting-image-with-feathered-edges-in-javascript/7816/1 "2022-03-04T16:59:34Z")

</div>

I have two images, and have created an ROI from the second image that I’d like to paste into the first image, but with its edges feathered (with a transparency gradient), like [this](https://stackoverflow.com/questions/55969276/feather-cropped-edges).

I’ve seen solutions to this in Python, but I don’t know how to do this in the Javascript version of openCV.

I think I need to first create a mask and blur it, but I don’t know how to do that:

```
let mask = cv.Mat.zeros(src.rows, src.cols, cv.CV_8U);
let rect = new cv.Rect(25, 25, 100, 100);
//how do I set the mask to 255 where the rect is?

```

Once I have this mask, how would I do the alpha blending?

thank you

---

<div class="post-metadata">

**Author:** ![crackwitz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.opencv.org/crackwitz/32/14_2.png) [@crackwitz](https://forum.opencv.org/u/crackwitz)\
**Post date:** [March 4, 2022, 6:23pm UTC](https://forum.opencv.org/t/pasting-image-with-feathered-edges-in-javascript/7816/2 "2022-03-04T18:23:13Z")

</div>

related:

> <https://stackoverflow.com/questions/71354767/pasting-image-with-feathered-edges-in-opencv-javascript>