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).
Related
I am downloading a number of images to my local drive then adding them to a spreadsheet using insert_image(). The images are correctly oriented in Windows Explorer and other image viewing apps. However when I add an image (portrait) to the spreadsheet it becomes rotated to landscape. Landscape images do not appear to be rotated.
I also have a URL link for each image. When I click the image it opens up in a viewer in the correct orientation. It appears as if the insert_image is not respecting the image orientation. The EXIF information does not contain orientation.
Is there a way to specify image orientation, or rotate the image before inserting?
Thanks in advance,
Ian
Thanks for your help. That does seem to be the behaviour. xlsxwriter insert images in the ‘raw’ orientation of the image.
I was trying to insert images which have exif information, where all image are captured in the same orientation - in supported viewers exif flag is used in to rotate the image to the way the camera was oriented when taking the photo. I have solved the problem by applying the rotation to the image before inserting it into excel using xlsxwriter.
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 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?
I have a squared formed image. I need to add perspective view to it and then make an animation that will restore image back to square view. This actions must work at least in all newest versions of browsers and without Flash.
I have tried to do this as follows:
Using RaphaelJS I can only clip image (create path and set fill to image url), not add perspective.
Canvas works as svg and vml in RaphaelJS... I can't add perspective with it's help.
CSS3 3D animation method rotateX adds perspective, but it is supported only by Chrome and Safary.
There is no way to add perspective to image using built in tools.
The only possible solution, I have found is using SVG add clip path to image - it doesn't add perspective view, but it's the best possible solution.
As I understand - we can use Canvas to add perspective, but you must write your own javascript algorithm to transform plain image to perspective view.
First of all I will explain my situation so you can know my problem a little better. I'm making a HTML5 app. I have a canvas, and using a color picker you can change the color of the canvas. Now i have a picture which I want to put on the canvas but that pictures color needs to be changed using a color picker. So i need to replace, lets say, black color on that picture and put it on the canvas so it dosnt screw up the background.
So that will look like this:
1st color picker- changes the color of the canvas
2nd color picker - replaces the black color on the image with the one in the color picker and puts it on the canvas
Now my problem is how to replace the color on the image without reloading the page.
My only condition is no using silverlight, flash, java or any other similar tehnology that need 3rd party software to be installed on the device.
Thanks in advance.
If you dont understand my query fully, feel free to ask.
My approach with a JS only solution could be:
Loading the image inside a canvas element. Look at the MDC canvas tutorial
Trigger the user click on the canvas and get the pixel color (see links below to know how to get the color of a pixel) and look at this answer to get the mouse position
Substitute all the colors in the canvas with the one the user pick. For some examples about pixel manipulation:
Pushing pixel with canvas at Mozilla Hacks
http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/
This JS at mezzoblue apply heavy filter to an image
After some canvas experiment I notice that mostly in all the browser the pixel manipulation with canvas could be very slow also with small images. So another experiment to do could be to get the pixel color and then:
pass the color information to a PHP (or another server side script) with an AJAX call
do the color manipulation with an image library like GD or imagemagik
return back your image with the Ajax response
reload your canvas with the modified version of the image