Creating composite image from two source png in Groovy - image-processing

I've seen some Groovy code that lets you combing images and text, but not images and images ...
Essentially, I need to overlay symbols at certain coordinates on maps: I have some maps and symbols as .png files. I can do the coordinate calcs no problem, so the issue is more a case of, given two transparent pngs how do I combine them without losing transparency? (Both the map and the symbol may need to retain their transparency).
Ideally I need a function, something like
combinePngImage(background_src, foreground_src, foreground_x, foreground_y)
that would return a png combination of the two, given the top left, top right coordinates of the foreground image.
[Background: I have some maps and symbols as .png files stored in container fields in FileMaker that I need to combine within a FileMaker solution. I've tried looking in to doing it using ImageMagick and the command line, but it suddenly struck me that this may be something that could be done using ScriptMaster, which uses Groovy to create external functions. ]
Any pointers gratefully received!

Okay, for what it's worth - here's some cobbled together cookbook snippets that seem to do the job - any comments on the (poor) coding style greatfully received.
Given a ScriptMaster call to
combineImage ( backgroundImg ; foregroundImg ; x ; y )
the required code is:
import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import java.net.URL;
// get container data
InputStream bgImgContainer
try{
bgImgContainer = fmpro.getContainerStream(backgroundImg)
}catch(e){
throw new Exception('Could not get data from background image container (make sure container field name is passed as text)')
}
// test if container field is empty
if( bgImgContainer == null ) {
throw new Exception('Background image container field is empty')
}
bgImgName = fmpro.getContainerFileName(backgroundImg);
InputStream fgImgContainer
try{
fgImgContainer = fmpro.getContainerStream(foregroundImg)
}catch(e){
throw new Exception('Could not get data from foreground image container (make sure container field name is passed as text)')
}
// test if container field is empty
if( fgImgContainer == null ) {
throw new Exception('Foreground image container field is empty')
}
fgImgName = fmpro.getContainerFileName(foregroundImg);
int xCoord = Integer.parseInt(x);
int yCoord = Integer.parseInt(y);
// load image from container data
BufferedImage result = ImageIO.read(bgImgContainer);
BufferedImage overlay = ImageIO.read(fgImgContainer);
int fgWidth = overlay.getWidth(null);
int fgHeight = overlay.getHeight(null);
Graphics2D graphics = result.createGraphics();
// overlay the foreground at given coordinates and actual size
graphics.drawImage(overlay, xCoord, yCoord, fgWidth, fgHeight, null);
graphics.dispose();
File output = File.createTempFile(bgImgName, ".png");
ImageIO.write(result, "png", output);
return output;

Rather than using the ImageMagick command-line, you could try using Im4java, a pure Java ImageMagick API.

Related

Printing an image to a dye based application

I am learning about fluid dynamics (and Haxe) and have come across this awesome project and thought I would try to extend to it to help me learn. A demo of the original project in action can be seen here.
So far, I have created a side menu of items containing different shapes. When the user clicks on one of the shapes, then, clicks onto the canvas, the image selected should be imprinted onto the dye. The user will then move the mouse and explore the art etc.
To try and achieve this I did the following:
import js.html.webgl.RenderingContext;
function imageSelection(): Void{
document.querySelector('.myscrollbar1').addEventListener('click', function() {
// twilight image clicked
closeNav();
reset();
var image:js.html.ImageElement = cast document.querySelector('img[src="images/twilight.jpg"]');
gl.current_context.texSubImage2D(cast fluid.dyeRenderTarget.writeToTexture, 0, Math.round(mouse.x), Math.round(mouse.y), RenderingContext.RGB, RenderingContext.UNSIGNED_BYTE, image);
TWILIGHT = true;
});
After this call, inside the update function, I have the following:
override function update( dt:Float ){
time = haxe.Timer.stamp() - initTime;
performanceMonitor.recordFrameTime(dt);
//Smaller number creates a bigger ripple, was 0.016
dt = 0.090;//#!
//Physics
//interaction
updateDyeShader.isMouseDown.set(isMouseDown && lastMousePointKnown);
mouseForceShader.isMouseDown.set(isMouseDown && lastMousePointKnown);
//step physics
fluid.step(dt);
particles.flowVelocityField = fluid.velocityRenderTarget.readFromTexture;
if(renderParticlesEnabled){
particles.step(dt);
}
//Below handles the cycling of colours once the mouse is moved and then the image should be disrupted into the set dye colours.
}
However, although the project builds, I can't seem to get the image imprinted onto the canvas. I have checked the console log and I can see the following error:
WebGL: INVALID_ENUM: texSubImage2D: invalid texture target
Is it safe to assume that my cast for the first param is not allowed?
I have read that the texture target is the first parameter and INVALID_ENUM in particular means that one of the gl.XXX parameters are just flat out wrong for that particular function.
Looking through to the file writeToTexture is declared as so: public var writeToTexture (default, null):GLTexture;. WriteToTexture is a wrapper around a regular webgl handle.
I am using Haxe version 3.2.1 and using Snow to build the project. WriteToTexture is defined inside HaxeToolkit\haxe\lib\gltoolbox\git\gltoolbox\render
writeToTexture in gltoolbox is a GLTexture. With snow and snow_web, this is defined in snow.modules.opengl.GL as:
typedef GLTexture = js.html.webgl.Texture;
So we're simply dealing with a js.html.webgl.Texture here, or WebGLTexture in native JS.
Which means that yes, this is definitely not a valid value for texSubImage2D()'s target, which is specified to take one of the gl.TEXTURE_* constants.
A GLenum specifying the binding point (target) of the active texture.
From this description it's obvious that the parameter isn't actually for the texture itself - it merely gives some info on how the active texture should be used.
The question then becomes how the "active" texture can be set. bindTexture() can be used for this.

Error in batch merging images (x.tif is not a valid choice for "C2 (green):")

I want to merge two sets of fluorescence microscope images into a green & blue image, but I'm having trouble with the macro (haven't used ImageJ before). I have a folder of FITC-images to be coloured green and a folder of DAPI-images to be coloured blue. I have been using this modified version of a macro I found online:
macro "batch_merge_channel"{
count = 1;
setBatchMode(true);
file1= getDirectory("Choose a Directory");
list1= getFileList(file1);
n1=lengthOf(list1);
file2= getDirectory("Choose a Directory");
list2= getFileList(file2);
n2=lengthOf(list2);
open(file1+list1[1]);
open(file2+list2[1]);
small = n1;
if(small<n2)
small = n2;
for(i=0;i<small;i++)
{
run("Merge Channels...", "c2="+list1[1]+ " c3="+list2[1]+ " keep");
name = substring(list1, 0, 13)+")_merge";
saveAs("tiff", "C:\\Merge\\"+name);
first += 2;
close();
setBatchMode(false);
}
This, however returns an error
x.tif is not a valid choice for "C2 (green):"
with x being the name of the first file in the first folder.
If I merge the images manually, two by two, there is no error. So I'm presuming the problem is in the macro code.
I found several cases of this error online, but none of the solutions that seemed to work for those people work for me.
Any help would be appreciated!
In case you didn't solve this already, a great place to get help on ImageJ questions is the forum.
I can suggest a couple of ideas:
Is your image successfully opened by the macro? You could set the batch mode to false to check this.
It looks to me like the for loop does not employ the variable i. It works on the first pair of
images (list1[1], list2[1]), then closes the merged image, but then
tries to process image 1 again. To actually loop through all the
images in the folder, you have to put inside the loop something
like this (you don't need 'keep' -- better to leave it out so the source images will automatically be closed)
open(file1+list1[i]);
open(file2+list2[i]);
run("Merge Channels...", "c2="+list1[i]+ " c3="+list2[i]);
-- Turning off batch mode should be done after the loop, not within the loop.
Here's a version that works for me.
// #File(label = "Green images", style = "directory") file1
// #File(label = "Blue images", style = "directory") file2
// #File(label = "Output directory", style = "directory") output
// Do not delete or move the top 3 lines! They contain essential parameters
setBatchMode(true);
list1= getFileList(file1);
n1=lengthOf(list1);
print("n1 = ",n1);
list2= getFileList(file2);
n2=lengthOf(list2);
small = n1;
if(small<n2)
small = n2;
for(i=0;i<small;i++)
{
image1=list1[i];
image2=list2[i];
open(file1+File.separator+list1[i]);
open(file2+File.separator+list2[i]);
print("processing image",i);
run("Merge Channels...", "c2=&image1 c3=&image2");
name = substring(image1, 0, 13)+"_merge";
saveAs("tiff", output+File.separator+name);
close();
}
setBatchMode(false);
Hope this helps.

Releasing Mat images with openCV(.release() and =Mat() doesn't work)

I have tried to release a Mat image from my program, however, no matter how I tried it, the same image (result) still appear when I click on the "process button" to process another image (from loading or snapping an image). The old results will always be displayed.
I have to close the whole program, open the next image I want to process and click the "process button" to get the actual result. However, this is not ideal, as I want my program to immediately process the image I load or snap and not having to close the whole program(or rather stop run and click run again)
Most of the results I searched from google suggested these methods:
imagep.release(); //where imagep is the image after going through processing
imagep=Mat();
UPDATE:
My code is goes something along this line. In my program.h file, the image and image p and declared like this:
class program : public QMainWindow
{
Q_OBJECT
public:
program(QWidget *parent = 0);
~program();
cv::Mat image, imagep; //original image and image processed
The coding for the button in the .cpp file goes something like this:
imagep = image.clone(); //also tried: imagep=image, and imagep=image+0 already.
.
.
.
processing/segmenting steps
.
.
cv::imshow("new image", imagep);
cvWaitKey(10);
imagep=Mat(); //also tried cvDestroyWindow("new image"), //imagep.release();
The setting of the picture of imagep(where I changed the values of the pixels based on results from the image processing. ) is created via:
for (int i=0; i< imagep.rows; ++i)
{
for (int j=0; j<imagep.cols; ++j)
{
//imagep.at<cv::Vec3b>(i,j)= v_char[i]; Note that this is commented. This method doesn't work, hence the below method. But it doesn't work too.
Vec3b temp=v_char[i];
imagep.at<cv::Vec3b>(i,j)[0]=temp[0];
imagep.at<cv::Vec3b>(i,j)[1]=temp[1];
imagep.at<cv::Vec3b>(i,j)[2]=temp[2];
}
}
However, these methods doesn't work. Any suggestions of how I can release the Mat image?
waitKey(-1) wait for a keyboard input while waitKey(10) uses 10 ms to update UI and then passes to control further on; It seems to that your problem is not release but proper update.
Normally one don’t need to release Mat (though I saw some release() calls in Java), just reassign it. Your problem may also be related to smart pointers that got killed when the number of references goes to zero but it is hard to say without seeing your code.
There are some tricky things happening when creating, assigning, and declaring Mats. Also, note for example that Mat m = n, copies the reference only but Mat m = n + 0, copies the whole object.

Pass null values to SVG path (using d3.js) to suppress missing data

Using jQuery Flot, I can pass a null value to the plotting mechanism so it just won't draw anything on the plot. See how the missing records are suppressed:
I'm looking to move to d3js, so that I can have deeper low level control of the graphics using SVG. However, I have yet to find out how to do that same process of suppressing missing records. The image below is an attempt to do this, using a value of 0 instead of null (where the d3 package breaks down). Here is some code to give you an idea of how I produced the graph below:
var line = d3.svg.line()
.x(function(d) {
var date = new Date(d[0]);
return x(date);
})
.y(function(d) {
var height = d[1];
if (no_record_exists) {
return y(0);
}
return y(height) + 0.5;
});
I looked up the SVG path element at the Mozilla Developer Network, and I found out that there is a MoveTo command, M x y, that only moves the "pen" to some point without drawing anything. Has this been implemented in the d3js package, so that I won't have to create several path elements every time I encounter a missing record?
The defined function of d3.svg.line() is the way to do this
Let's say we want to include a break in the chart if y is null:
line.defined(function(d) { return d.y!=null; })
Use line.defined or area.defined, and see the Area with Missing Data example.

Monodroid Camera/imageview example

Can someone post an example of how to use the camera, capture the image, preview the image in an image view, compress the image in jpg and upload the bytes to a remote server? The closest I have been able to find is below. We have the camera, and image capture but we need to know how to preview, compress/resize jpg to 640/480px and around 120kb size then upload bytes to a remote server. Thanks to all of you for your help.
http://android-coding.blogspot.com/2010/12/intent-of-mediastoreactionimagecapture.html
Looking at your code there are some things i notice to be wrong:
-[ for the camera functionality ]-
Don't create a file yourself. This is not necessary. Use the ContentResolver.Insert function to give you back a file URI that will contain the picture, just like done here and also take over the isMounted if you want to check if there is external memory present.
You are checking if there's data and then checking if there is a thumbnail. If there's no thumbnail you'll get the full image. That doesn't make sense unless you want to make a thumb of the full version if the thumb is not given back?? Don't you just want to grab the full version or both but not this OR that?
You are retrieving a string value variable to get the URI to the full image? Just save the uri you get from the code in my first point as a property (let's say "myPhotoURI" in the activity class. In the OnActivityResult function that handles your camera intent result just recall that URI and use it as following (Yes, you're seeing it right; i'm not even using the data intent for this just the remembered uri):
Bitmap imageFromCam = MediaStore.Images.Media.GetBitmap(this.ContentResolver, Android.Net.Uri.Parse(myPhotoURI));
To grab an image from the gallery just use the SelectImageFromStorage() function from this question's answer and retrieve the URI of the chosen image in the OnActivityResult check just use:
Android.Net.Uri selectedImageUri = data.ToURI();
That's what worked like a charm for me.
-[sending the data to a webservice ]-
Assuming you're using a WCF or webservice that'll want to receive the image data as a byte array; the approved answer to this question gives a nice example of how to convert your image to an byte array (which is what a WCF webservice wants, anyway)
I think that these directions will get you going.
here is the closest example to date... this brings back Null data when the extra output is used. Still trying to get access to the full image/photo and not a thumbnail.
private void saveFullImage() {
Intent intent = new Intent(Android.Provider.MediaStore.ActionImageCapture);
string file = System.IO.Path.Combine(Android.OS.Environment.DirectoryDcim.ToString(), "test.jpg");
var outputFileUri = Android.Net.Uri.Parse(file);
intent.PutExtra(Android.Provider.MediaStore.ExtraOutput, outputFileUri);
StartActivityForResult(intent, TAKE_PICTURE);
}
protected override void OnActivityResult(int requestCode, Result resultCode, Intent data)
{
base.OnActivityResult(requestCode, resultCode, data);
if (requestCode == TAKE_PICTURE)
{
Uri imageUri = null;
// Check if the result includes a thumbnail Bitmap
if (data != null)
{
if (data.HasExtra("data"))
{
var thumbnail = data.GetParcelableArrayExtra("data");
// TODO Do something with the thumbnail
}
}
else
{
var outputFileUri = data.GetParcelableArrayExtra("outputFileuri");
// TODO Do something with the full image stored
// in outputFileUri
}
}
}

Resources