How to dynamically merge two photos into a new image - image

I'm grabbing photos from FB's API and I'd like to merge a transparent filter on top and then save it as a new image to then post is a new picture to FB. I've looked into using Canvas however toDataURL() only works when the photos are on the same server. I've also tried using the filter as the src for an image and setting the fb pic as the background image but you can't save it off as this as it's editing through CSS. Any suggestion on how to actually blend the photos together and actually be able to save as a new image?

Related

How to create ripple effect using still image and apply it to 10000 of images making them animated gifs programmatically

I have thousands of images to be used as NFTs and the client wants them to be animated by the ripple effect. I am using an After Effects for a few images but how to do it over many thousands? See the image for reference: https://imgur.com/a/86pdv6u

How can we merge multiple image into single image in react native project

In one of my project I am using RNCamera for capturing image. Also the camera screens have custom components. One of the component showing with camera is compass image. I need to merge the compass image with the captured image.
I have tried this library react-native-view-shot. Wrapping the RNCamera inside the view shot view. But the result contains only the captured image without compass.
I have also tried react-native-images-combine. Here the second image is always positioning at the left side of the first image.
I looking for a better solution. Can anyone suggest a way to fix this in react-native. It would be great. Thank you.
Try to put both images in a View tag and each image in an own View tag. Than give “z-index” style property to put your image above.
Let me know!

nothing happens when I attempt to textout to a transparent image

I am using Lazarus.
I have put 2 images on a form and synchronized their positions and sizes.
I can textout to both images, and after I made the ontop image transparent I can see the combined content of both images.
I can add further text to the bottom image and see it, but I can't see text I try to add to the transparent image.
I used the following code to make the top image transparent
image2.picture.Bitmap.TransparentColor:=clWhite;
image2.transparent:=true;
I guess I need to play with the image bitmap, but I can't find a solution that is not using other software.
Can someone help me with this please?

Image not displaying correctly using POST messages.json API

Posting content to Yammer was a feature we'd successfully implemented a while back but now we are getting reports that the image is broken and showing a grey jigsaw. As well as this we noticed Yammer have changed the layout of posts. We originally were using a profile image, which would now look ridiculous with the layout changing to a squarer rectangle with a large image behind it.
This is the image:
https://cli-cdn.release.workstars.net/jantestvr-3ntsv7ypjestvj0e/employee_images/FzAhje2Cf6gdSKiNkMlEGTZQPvHI5Ju0BxDq7.png
This is url that produces the jigsaw:
https://thumbnails.yammer.com/preview?url=https%3A%2F%2Fcli-cdn.release.workstars.net%2Fjantestvr-3ntsv7ypjestvj0e%2Femployee_images%2FFzAhje2Cf6gdSKiNkMlEGTZQPvHI5Ju0BxDq7.png&signature=RJK%2Fo8yt2vv6DeXXtLrKa5%2BWThnUoXdWAHSIYLPNYqI%3D
Has something changed in the way you need to encode the POST data? I can't get anything other than a jigsaw trying things with the url manually. Also, any way to force the original layout of a full width rectangle with a square image floated inside to the left?

I'm trying to clip an image overlay in Google Maps API

I'm trying to clip an image overlay in Google Maps API, however without success. I can clip a HTML image successfully and overlay it on a Google MAP by using the CSS clip property and z-index property, however that's no use, as the image does not adjust to the Google map zoom and movements. i.e. the image is not bound to the Google MAP object in any way, doesn't respond to map changes.
If I assign the Google Map overlay to the cropped image source, it simply uses the original un-cropped source and not the cropped page image element. That's just how the image.src property works.
I successfully added an image overlay for Google MAPS, but there does not seem to be any clipping or cropping function for them. There is text on the image that I don't want to display for this application, but I don't want to crop the original source file image, as it's used for multiple display purposes.
historicalOverlay = new google.maps.GroundOverlay(imageurl,imageBounds);
historicalOverlay.setMap(map);
I need imageurl to point to a clipped version in memory or something like that or the clipped form image element, but not its un-clipped source image. Any ideas ?
The GroundOverlay class in Google Maps javascript API V3 does not provide any support for in-browser clipping/cropping of the image before display.
Because we needed that capability, plus some others like image rotation and non-rectangular images, we wrote a GroundOverlayEX javascript class that supports everything that the Google Earth version of GroundOverlay supports, including browser-side clipping/cropping of the image to-be-displayed.
The javascript class is open-source on Github at: https://github.com/azmikemm/GroundOverlayEX. There is API documentation as well (documentation.txt). All images shown by the GroundOverlayEX class are integral to the map, and will drag with the map, and zoom with the map.
A working functional example of the class in-action (with some clipped/ cropped images) is at: https://sites.google.com/site/issearthatnight/
If you turn off the VIIRS checkbox, and set the transparency down to midway, you'll see the images pretty plainly, and see that some are cropped (all are stored in NASA's servers as rectangles, so images that are square-ish or look like slices have been cropped by the GroundOverlayEX class).

Resources