I am faced with a unique challenge involving 2 images, where one image has a designated Mask area and the other image is supposed to be visible through the Masked area of the first image. My goal is to align the second image in the center of the Mask area of the first image.
My current approach involves scaling the second image to match the dimensions of the mask area using the following function (which includes 3 lines of code aimed at alignment, but unfortunately, they did not yield the desired results),
function scaleimage(img){
img.style.height = 'auto';
img.style.width = 'auto';
//Obtaining the dimensions of the image
var imgW = img.clientWidth;
var imgH = img.clientHeight;
//Obtaining the dimensions of the mask
var maskH = data.result.mask.maskhight;
var maskW = data.result.mask.maskwidth;
var scaleH = maskH / imgH;
var scaleW = maskW / imgW;
// Scaling the image
if (scaleH < scaleW) {
img.style.height = maskH + "px";
img.style.width = Math.round(imgW * scaleH) + "px";
} else {
img.style.width = maskW + "px";
img.style.height = Math.round(imgH * scaleW) + "px";
}
//Attempting to align the image - the following code was tried without success
/*img.style.top = Math.round((mask1H - imgH) / 2) + 'px';
img.style.left = '50%';
img.style.marginLeft = Math.round(imgW/2) + 'px'; */
}
To further illustrate, the current and expected result involves IMAGE 1 with a Mask area revealing IMAGE 2 positioned behind it, with IMAGE 2's top left aligned with the Mask area's top left. Ultimately, the goal is for IMAGE 2 to be centered within the Mask area.
I have attempted various methods without achieving the desired outcome. Any feedback or suggestions would be greatly appreciated.