Aphire - 6 months ago 590
Python Question

# Layer image with opacity over the top of another image. - OpenCV

Edit

Anybody with a similar problem - I found another SO answer here with a great python solution that exploits the speed of NumPy.

I have two images, both the same size. One is a red square with varying layers of opacity:

And a second, a blue square, smaller than the red, with no opacity but white surrounding it.

I am using OpenCV's python bindings for this project and so far (after reading about watermarking here I have this:

(rH, rW) = redSquare.shape[:2]

(h, w) = blueSquare.shape[:2]

blueSquare = np.dstack([blueSquare, np.ones((h,w), dtype = 'uint8') * 255])
overlay = np.zeros((h,w,4), dtype = 'uint8')
overlay[0:rH, 0:rW] = redSquare
output = blueSquare .copy()
cv2.addWeighted(overlay, 0.5, output, 0.5, 0, output)

Which produces the following output:

However the desired effect is:

Now I understand by using weighted adding, I am using 0.5 of each, when I really want 1.0 of each, however when I try increasing the weighht of both, only one is increased and the other is decreased.

If anyone has some insight into how I can achieve this, preferably in Python, but if you know a way in C++ I am sure I can replicate it.

Thanks.

here is C++ code gives exactly the result you want.

// http://jepsonsblog.blogspot.be/2012/10/overlay-transparent-image-in-opencv.html
// https://gist.github.com/maximus5684/082f8939edb6aed7ba0a

#include "opencv2/imgproc.hpp"
#include "opencv2/highgui.hpp"
#include "iostream"

using namespace cv;
using namespace std;

void overlayImage(Mat* src, Mat* overlay, const Point& location)
{
for (int y = max(location.y, 0); y < src->rows; ++y)
{
int fY = y - location.y;

if (fY >= overlay->rows)
break;

for (int x = max(location.x, 0); x < src->cols; ++x)
{
int fX = x - location.x;

if (fX >= overlay->cols)
break;

double opacity = ((double)overlay->data[fY * overlay->step + fX * overlay->channels() + 3]) / 255;

for (int c = 0; opacity > 0 && c < src->channels(); ++c)
{
unsigned char overlayPx = overlay->data[fY * overlay->step + fX * overlay->channels() + c];
unsigned char srcPx = src->data[y * src->step + x * src->channels() + c];
src->data[y * src->step + src->channels() * x + c] = srcPx * (1. - opacity) + overlayPx * opacity;
}
}
}
}

int main( int argc, char** argv )
{

if( underlay.empty() || overlay.empty() )
{
return -1;
}

overlayImage( &underlay, &overlay, Point() );
imshow("underlay result",underlay);

waitKey();

return 0;
}