I would like to capture a zoomable image at a high resolution zoomed at 3x. Do you know of a way I can piece this image together without having to do it manually? Here is the image
After using bhups' solution, tweaking outputxand outputy for a good while, I tried something else.
I went back to the object page (in the above example, here), took the thumbnail image URL (http://www.metmuseum.org/Imageshare/ep/regular/DP145931.jpg), replaced regular with zoom and to my surprise got what I presume is the full image, with less effort:
http://www.metmuseum.org/Imageshare/ep/zoom/DP145931.jpg
You can tweak the URL to get the job DONE. Here is the URl for 3x image. http://media.metmuseum.org/mgen/metzoom/zoom3.ms?img=DP145931.jpg&wrapperid=11&outputx=1200&outputy=1601.067378252168&level=1&x=0&y=0&backcolor=0x00000
outputx and outputy are the output image dimensions. level implies the zoom level. and x and y are the top left corner of the selected rectangle.
Related
I'm trying to replace an image in a Google Slide by a smaller version of it (in terms of bytes).
The smaller image should be displayed exactly the same way than the older.
But when my original image was croped, I cannot reproduce it with the new one.
What I'm doing is simple (I'm using this replace method)
let image = page.getImages()[0];
let newImageUrl = optimize(image.getContentUrl()); // API call to get an optimized image. newImage will have the same width and height
image.replace(newImageUrl, true);
A visual example.
Here is my slide before (pay attention to the "Quick" logo at the bottom right corner)
And here is the result after replacing it (you can see that the bounding box is the same, it takes the same space in the slide, but the image itself is lower)
How can I reproduce the croping that I've initially done in my slide with that button ?
Thanks
Issue:
As mentioned in comments, crop properties are currently read-only, so this cannot be done. Here are possible workarounds: https://stackoverflow.com/a/63256489, https://stackoverflow.com/a/64040404, https://stackoverflow.com/a/67309702.
Feature request:
There's a feature request in Issue Tracker. Anyone interested in this, consider starring it:
Why are Image Crop Properties read only
How to extract the image from this https://www.google.com/maps/#45.8118462,15.9725486,3a,75y/data=!3m7!1e2!3m5!1sAF1QipOH6lgU7bug2ndyW-9-Uq0kgKqcKDtnGei2N5Qo!2e10!6shttps:%2F%2Flh5.googleusercontent.com%2Fp%2FAF1QipOH6lgU7bug2ndyW-9-Uq0kgKqcKDtnGei2N5Qo%3Dw150-h150-k-no-p!7i3024!8i4032
(If the link disappears let me describe how to reproduce the question. Find any shop on Google Maps that has the "shop title image" appearing in the shop details on the left side when you click on that shop. Click on that image to expand it across the whole viewport.)
I found the <canvas> element that I guess contains the image. I tried to do .getContext('2d') on that canvas element, but I keep getting null.
If you are getting null when doing getContext("2d") it's because an other type of context was created already, in this case, a "webgl" one.
To convert that canvas to a new image, you'd normally call canvas.toBlob() (whatever the context type).
And if you need to crop that canvas content, you'd draw it on an other canvas.
But since they did not prevent the WebGL context to throw away its drawing buffer (by passing preserveDrawingBuffer in the getContext call), you'll only get a transparent image back from it.
Anyway none of these methods will retrieve the original image, but they will create a new image entirely (probably of lesser quality, and bigger in size). To retrieve the original image, check the network tab of your dev tools, or if you need to do it programmatically, inject a script that will spoof all fetch, XHR and HTMLImageElement objects in order to log their resource URL. But that becomes dirty.
I'm creating a mobile web application (HTML5/JavaScript/CSS only) that allows a user to take a picture. The picture from the camera is then loaded into a canvas HTML element. The user may rotate their phone when taking a photo so ultimately I want to rotate the output appropriately. Is there a way in a web page only to determine which degree a user has rotated when taking a picture? I'm not simply talking about whether they are in landscape mode. I'm meaning if you hold your phone straight up in portrait mode face it down at your desk (its now parallel with your desk) and then rotate it to landscape. This will not trigger an orientation change, but you will now be holding your phone in a "landscape" position if that makes sense. This will be a common way users will be taking the photos. I want to be able to rotate the image appropriately when uploading it.
Thank you
Is there a way in a web page only to determine which degree a user has rotated when taking a picture?
Yes there is! When photos are taken, they contain metadata - information about the image. This is called EXIF data.
It tells you things like the make of camera, whether the flash went off, and - usefully for you - the orientation of the camera.
If you are using JavaScript to draw the image onto the canvas, I can recommend BlueImp's JavaScript Load Image Library
Once you have loaded the image, you'll be able to do a call like:
var orientation = data.exif.get('Orientation');
That will tell you which way the camera was held when the photo was taken. Depending on the phone, you may also get rotation data, GPS data, compass heading, etc.
I'm a bit confused about what kind of tile I should choose to make my scenario work.
Scenario is as follows: my application supports small and medium tiles. By default in both these modes it shows an app icon on transparent background but user can choose a particular image to be a tile cover. When tile is covered with image I don't want it to flip or move - just a static image with app name on top of it.
I've tried TemplateCycle with app icon as default and user's selected image as an alternative but cycle tile moves these images up and down all the time and I don't want that. I've was considered TempalteIconic but it turned out it only supports images with transparent background so no option for user's image. So what kind of tile should I choose?
Use a normal fliptile but don't set anything(text, image) on the back. It won't flip if you do that.
I have been searching - am thinking what I want to do is not possible but thought I would check.
I have a few canvasses on an HTML page as follows: (these are IDs below)
canvasMain - this is going to display
a large version of an image
canvasThumbnail1 - this is going to
display a thumbnail image
canvasThumbnail2 - same as
above...etc
I have it working where I paint the canvasMain with the contents of the thumbnail. The problem is since the canvas is immediate it is copying the pixels as they are over to the canvasMain from canvasThumbnail. This is resulting in an enlarged pixelated image.
What I want to do is click on one of the canvasThumbnails and be able to grab the Image.src property as a string and then pull that into canvasMain instead of actually copying the pixels over from one canvas to another. Essentially just grab the address (local or say on Flickr) from where I can pull in the image. Pulling an image in to a canvas seems to scale it nicely.
From what I have seen I do not think that Image.src value is accessible through the 2d context. I enumerated through its properties and have only found nested objects or native code returns.
I figured that if I clicked on the canvasThumbnail, and then used (this) to get a reference to that canvas element and then grab the 2dcontext of that canvas I may be able to use a property of that context to get a string that represents the value of the Image.src.
Any ideas?
Thanks
Somehow you painted the image onto canvasThumbnail1, presumably from a (high resolution) Image element.
The canvasThumbnail1, or any canvas for that matter, has no memory on things painted on it. So if you paint a large Image onto a tiny canvasThumbnail, the high-resolution data does not exist on that tiny canvas. To get it you must use the original image again, or else you must paint to a larger canvas from the start.
In other words, instead of painting the thumbnail onto the main, you need to repaint Image element (that you used to make the thumbnail) onto the main.