Gulp Graphicsmagick - setting a background image(composite) - image-processing

How can I add a background image to a partially transparent png using Graphicsmagick Gulp module? (https://www.npmjs.com/package/gulp-gm)
Here is my gulp task:
gulp.task("addBackground", function () {
gulp.src('input/*.png')
.pipe(gm(function (gmfile) {
return gmfile.composite('background.jpg');
}))
.pipe(gulp.dest('output/'));
});
However when I try to run this my tasks all finish and then it throws the following error:
Any insight on how to fix this or what is going on here is appreciated.

I also ran into the same error and finally found a solution; it may not work for what you are planning since you're trying to add a background, but it does result in a solution to combine 2 images. Hopefully, this can give you a starting point to find a better solution.
gulp.task( 'composite', function () {
gulp.src('path/image.png')
.pipe( gm( function ( gmfile ) {
return gmfile
.draw('image Over 2,2 0,0 path/overlay.png')
} ) )
.pipe( gulp.dest( 'newpath/' ) );
} );
The first set of numbers "2,2" are for the x,y start. I'm not sure what the second set does yet.
I found the solution based on this github disscusion about watermarks: https://github.com/aheckmann/gm/issues/276

Related

Why are my codes of Code Snippets not working?

I have recently downloaded bbpress but when users log in on the front end they can access the admin area and have the bar across the top which contains a link to remove it. I know nothing about code at all, I've only been blogging a few weeks so after doing a bit of reading I decided to download the plugin Code Snippets and add the following codes.
function annointed_admin_bar_remove() {
global $wp_admin_bar;
/* Remove their stuff */
$wp_admin_bar->remove_menu('wp-logo');
}
add_action('wp_before_admin_bar_render', 'annointed_admin_bar_remove', 0);
and
// disable access to wp-admin for non-administrators
function block_wp_admin_access() {
if ( is_admin() && ! current_user_can( 'administrator' ) && ! ( defined( 'DOING_AJAX' ) && DOING_AJAX ) ) {
wp_redirect( home_url() );
exit;
}
}
add_action( 'init', 'block_wp_admin_access' );
Neither of these has worked and since I don't know anything about code, I don't know why they aren't working. I can't seem to find a plugin that does this for you either.

Imagick causing output parseerror

I'm using php 7.2 and ImageMagick-7.0.8-12. I'm using it to create thumbnails like so:
function thumbimg($sourcePath, $thumbPath) {
try {
if (file_exists($sourcePath)) {
$imagick = new Imagick();
$imagick->readImage($sourcePath);
$imagick->setImageFormat("jpg");
header('Content-Type: image/jpeg');
$imagick->writeImage($thumbPath);
$imagick->clear();
$imagick->destroy();
chmod($thumbPath, 0755);
return;
}
} catch (ImagickException $e) {
echo $this->raiseError('Could not save image to file: ' . $e->getMessage(), IMAGE_TRANSFORM_ERROR_IO);
}
return;
}
The php script does return an echo'ed JSON as designed, but when I look at the network return preview it shows a blank image with the post link to that script. This behavior starts on the line $imagick = new Imagick(); Prior to that it behaves normally. While I do get the desired JSON, it messes with other functions that produce outputs.
I would look for another Imagick example as yours looks a bit of a mess. You have a header in the middle of your code and that is used for the display. No idea why you have a chmod and I would have thought if it was required it would be at the start on the Imagick code. I also do not see any thumbnailing code.
Try this:
$im = new Imagick($input);
$im->resizeImage( 100, 100, imagick::FILTER_LANCZOS, TRUE );
$im->writeImage('resizeImage.jpg');
$im->destroy();
( The filter is optional as Imagick will pick the best filter to use when increasing or decreasing size. )
I think as #Mark Setchell says the destroy is unnecessary

Adding camera profile correction to dng_validate.exe [Adobe DNG SDK]

Using Lightroom I know how to apply a camera profile (*.dcp file) to my *.DNG image.
I would like to do the same in an application which I'm writing, so I guess a good starting point would be to append this functionality to the dng_validate.exe application.
So I started to add:
#include "dng_camera_profile.h"
Then added:
static dng_string gDumpDCP;
And add the following to the error print:
"-dcp <file> Load camera profile from <file>.dcp\"\n"
Then I added the function to read the dcp from cli:
else if (option.Matches("dcp", true))
{
gDumpDCP.Clear();
if (index + 1 < argc)
{
gDumpDCP.Set(argv[++index]);
}
if (gDumpDCP.IsEmpty() || gDumpDCP.StartsWith("-"))
{
fprintf(stderr, "*** Missing file name after -dcp\n");
return 1;
}
if (!gDumpDCP.EndsWith(".dcp"))
{
gDumpDCP.Append(".dcp");
}
}
Then I load the profile from disk [line 421]:
if (gDumpTIF.NotEmpty ())
{
dng_camera_profile profile;
if (gDumpDCP.NotEmpty())
{
dng_file_stream inStream(gDumpDCP.Get());
profile.ParseExtended(inStream);
}
// Render final image.
.... rest of code as it was
So how do I now use the profile data to correct the render and write the corrected image?
You need to add the profile to your negative with negative->AddProfile(profile);.
My project raw2dng does this (and more) and is available in source if you want to see an example. The profile is added here.
So after playing around for a couple of days, I now found the solution. Actually the negative can have multiple camera profiles. So with negative->AddProfile(profile) you just add one. But this won't be used if it's not the first profile! So we first need to clean the profiles and than add one.
AutoPtr<dng_camera_profile> profile(new dng_camera_profile);
if (gDumpDCP.NotEmpty())
{
negative->ClearProfiles();
dng_file_stream inStream(gDumpDCP.Get());
profile->ParseExtended(inStream);
profile->SetWasReadFromDNG();
negative->AddProfile(profile);
printf("Profile count: \"%d\"\n", negative->ProfileCount()); // will be 1 now!
}
Next thing to get the image correctly is to have correct white balance. This can be done in camera or afterwards. For my application with 4 different cameras, the result was the best when using afterward white balance correction. So I found 4 (Temperature,Tint) pairs using Lightroom.
The question was how to add these values in the dng_validate.exe program. I did it like this:
#include "dng_temperature.h"
if (gTemp != NULL && gTint != NULL)
{
dng_temperature temperature(gTemp, gTint);
render.SetWhiteXY(temperature.Get_xy_coord());
}
The resulting images are slightly different from the Lightroom result, but close enough. Also the camera to camera differences are gone now! :)

PhantomJs timeout

I am using Jasmine with PhantomJS to run test cases.
In my typical test case, I make a service call, wait for response and confirm response.
Some requests can return in a few seconds and some can take up to a minute to return.
When ran through PhantomJS, the test case fails for the service call that is supposed to take a minute ( fails because the response is not yet received).
What's interesting is that the test passes when ran through Firefox.
I have tried looking at tcpdump and the headers are same for requests through both browsers, so this looks like a browser timeout issue.
Has anyone had a similar issue ? Any ideas as to where could the timeout be configured ? Or do you think the problem is something else ?
Ah the pain of PhantomJS.
Apparently it turned out that I was using javascript's bind function which is not supported in PhantomJS .
This was causing the test to fail which resulted in messing up state of some global variable( my fault) and hence the failure.
But the root cause was using bind.
Solution: try getting a shim for bind like this from https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
// closest thing possible to the ECMAScript 5 internal IsCallable function
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(this instanceof fNOP && oThis
? this
: oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
I had exactly same issue. All you have to do is add setTimeout to exit
setTimeout(function() {phantom.exit();},20000); // stop after 20 sec ( add this before you request your webpage )
page.open('your url here', function (status) {
// operations here
});

apply new layer to a slice of a volume webgl

i have two volumes (.nrrd) of different qualities. the user can browse through the layers. if a key is pressed
i want to load the slice of the volume with better quality.
my volume is similar to this one: lesson 10 xtk
i've found:
volume.children[2].children[0].children[0].texture.file = "http://path/to/file.ext";
but if i apply some kind of file (.jpg, .dcm) nothing happens.
is this the right approach to change the slice to go inside the children and change the texture?
or shall i load the selected slice seperate as an object and apply it to the "lower-quality-volume" somehow?
edit:
this is what i tried so far (i get errors with dcms but not with jpgs):
if (event.keyCode == 83) { // "s"-button
volume.children[2].children[0].children[0].texture.file = "http://localhost:3000/112.jpg";
volume.children[2].children[0].children[0].modified();
r.render();
}
edit2: this is whats in my r.onShowtime = function() {}
volume.children[2].children[0].texture.file = 'http://localhost:3000/112.jpg';
volume.children[2].children[0].visible = true; // to activate the first layer
volume.children[2].children[0].modified();
console.log(volume.children[2].children[0].visible +" "+ volume.children[2].children[0].texture.file);
it outputs "true hostname/112.jpg"
when i inspect the .jpg in firebug the header is ok but the answer is "null"
when i inspect console.log(volume.children[2].children[0]); with firebug
.texture.file is set to hostname/112.jpg
when i go to "network" the .jpg has been transfered successfully
please notice that 112.jpg and level.jpg are the same. the first one is getting loaded in r.onShowtime and the other one is loaded at a keypressed event.
EDIT 3: volume.children[2].children[0] is of the type "X.slice", isn't it?
here is my approach: jsFiddle
and this is my actual issue and still not working: jsFiddle
Mhh..
I think a call to object.modified() is missing in the file setter (and in others setters from inject classes). Let's see when Haehn will come if he wants to change something internaly, but for the moment could you try to call it by yourself ?
You can try to add after the modification of texture :
volume.children[2].children[0].children[0].modified();
And if it doesn't work, in addition :
renderer.render();
Edit :
It's strange, I did a similar code and it did something. Can you please try something like that with opening your javascript console (Firefox, Chrome,... has one) and tell me the error you get ?
renderer.onShowtime = {
for (var i=0 ; i< volume.children[2].children.length ; i++) {
volume.children[2].children[i].texture.file="myimage.jpeg";
volume.children[2].children[i].modified();
}
}
It is important you call it in the onShowtime, because before the volume is not loaded, and so slicesX, slicesY... don't exist.
Edit2 :
Hey,
Thanks to the informations you added I think I've got the point ! In the render() method of our renderer3D there is a test on texture._dirty flag, that you cannot change from outside the framework. In addition the 1st rendering with a texture make that flag false, and loading a new texture doesn't seem to set that flag back to true in the current XTK. So, I think, we have to add it in the loader.load(texture, object) method. I'll make an issue on Github and see what Haehn thinks of it !

Resources