nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Merging/stitching images

JanneI

Hello,

I am working with multiple image tiles which I need to compile into single bigger image. This question has been asked earlier eg:

Is it possible to combine two pictures in one expression column?

Generic solution is to use H/V List Boxes. Here, my problem is that merged image has white line between the images which I don't want to have. Is there any way to modify List Box style not to have borders? Or some other method to do merging?

Janne

Accepted answers

Craige_Hales

In JSL, that looks like this. Not sure what the performance will be, I don't think it will be using many CPUs.

img = Open("$SAMPLE_IMAGES/windmap.png", "png")<<getpixels;

compose = 	(img||img||img)|/
			(img||img||img)|/
			(img||img||img);

outpic = newimage(compose);

new window("no gaps", outpic);

|| is the horizontal matrix concatenation and |/ is vertical. Line 1 turns the image into a matrix.

All comments

jthi

Not sure how good idea this is, but maybe you can play around with negative margins (if all images are same size)

Names Default To Here(1);
img = Open("$SAMPLE_IMAGES/windmap.png", "png");

nw = New Window("",
	Lineup Box(N Col(3),
		img,img,img,
		img,img,img,
		img,img,img
	)
);
wait(2);
pbs = nw << XPath("//PictBox");
pbs << Margin(Left(-2), Top(-2));

Also for me it seems like there are no borders between images. Are all the images you have same size?

Names Default To Here(1);
img = Open("$SAMPLE_IMAGES/windmap.png", "png");

nw = New Window("no borders",
	V List Box(
		h list box(img,img,img),
		h list box(img,img,img),
		h list box(img,img,img)
	)
);

V List Box + H List Box (no borders):

Lineup Box() (borders):

JanneI

Jarmo, You are amazing!
With your help, I was able to study this more. Apparently the issue is not originating from List boxes but from Get Picture-function. With this, borders appear to resulting picture object. However, I would like to be able to convert the List to Picture as then further manipulation (eg cropping) is possible.

So, any ideas how to get Picture without borders?

Names Default To Here(1);
img = Open("$SAMPLE_IMAGES/windmap.png", "png");

v_list_box = V List Box(
			h list box(img,img,img),
			h list box(img,img,img),
			h list box(img,img,img)
		);

outpic = v_list_box << Get Picture;

new window("with borders", outpic);
new window("no borders", v_list_box);

Craige_Hales

https://community.jmp.com/t5/Discussions/Crop-a-JPG-Image/td-p/441835#M69054
Explains how the crop function works.

JanneI

Hi All,
Apparently there is no trivial solution to get of borders caused by the Get Picture function. Likely there are many other work arounds but I ended to do this by using Python and sharing this here if anyone has interest to this. Something like below

Names Default To Here( 1 );

Python Init();
Python Submit( "\[
import cv2
import datetime
path = r'C:\Program Files\SAS\JMP\16\Samples\Images\windmap.png'
img=cv2.imread(path)
img_concat = cv2.vconcat([
cv2.hconcat([img, img, img]),
cv2.hconcat([img, img, img]),
cv2.hconcat([img, img, img]),
])
cv2.imwrite(r'C:\tmp\final_image.png', img_concat)
str='Concationation completed'
]\");

getStr = Python Get( str );
show(getStr);
Python Term();

outpic = Open("C:\tmp\final_image.png",png);
new window("no borders", outpic);
outpic = empty();

Here, OpenCV library (cv2) is used which works well in my case as I have thousands of big pictures to be processed. OpenCV support utilization of GPU which reduce execution time drastically (several hours in my case).