Is it possible to render photo spheres stored in Google Cloud Services? I have uploaded a photo sphere that works without issue when hosting from a local server, but not when stored in a bucket on the Google Cloud Platform (GCP). I am using the image as a sky element in an a-frame scene, but it doesn't render when the source is the GCP url and built in a Google Apps-Script Web App for testing. I also tested the sky element using a photo sphere from Flikr as the source and it had no problems. Does the metadata not get read properly when serving from GCP? Any help would be greatly appreciated!
<a-assets>
<!-- Images. -->
<img id="skyTexture" src="https://farm5.staticflickr.com/4734/24508950177_b7b09a1f30_k.jpg">
</a-assets>
<a-sky src="#skyTexture"></a-sky>
<a-assets>
<!-- Images. -->
<img id="skyTexture" src="https://storage.googleapis.com/pano-images/cwm-vcfacility/PANO_20171019_130509_0.jpg">
</a-assets>
<a-sky src="#skyTexture"></a-sky>
If you work with images from resource other than your own app, make sure to include crossorigin="anonymous" in your img tag, the error should disappear.
<img id="skyTexture" crossorigin="anonymous" src="https://storage.googleapis.com/pano-images/cwm-vcfacility/PANO_20171019_130509_0.jpg">
It still won't work as you intend though. I don't know much about google storage, but I'd read the docs. If it works similarly to Amazon S3, then you'd have to enable your app to get access to the resource. In S3 it's done with XML rules.
Last tips for working with images:
make sure they don't exceed 4096 x 2048 size
make sure the size is power of two
If you don't follow this, it will be resized for you every time on page load - it takes time, so why not do it once.
Related
I intend to add a thumbnail for the video link that I have shared from a self hosted website. How can I get a thumbnail for the video content that is served using a signed url from Google Cloud Storage Bucket.
def get_signed_url(thumbnail):
blob = bucket.get_blob(thumbnail.path)
signed_url = blob.generate_signed_url(expiration_time)
logging.info(signed_url)
return signed_url
How should I serve this thumbnail using the html?
Additionally, what will happen if the expiration_time is already met prior to the timestamp that the user has already received the link in Whatsapp ?
Google Cloud Storage does not generate thumbnails for any objects. You would need to generate these thumbnails, upload them to Google Cloud Storage, and then reference them yourself
There are multiples approaches for this, I.e. You can use the Pillow library for Python to generate your images.
Regarding to the expiration time, your question is unclear to me. The expiration time value is agnostic of the usage of the URL. If you generate an URL for 15 minutes after this time the URL will be rotated and you will need to send a new URL to your user
FFMpeg on Google Cloud Function is supported by default, and using following ffmpeg functions will provideo both a still image (png) and a motion image (webm or gif):
ffmpeg.input(video_url, ss=0).filter('scale', png_width, -1).output(out_filesystem_filename, vframes=1).overwrite_output().run()
ffmpeg.input(video_url, ss=0).filter('scale', motion_width, -1).filter('fps', fps=6, round='up').output(out_filesystem_motion_filename, vframes=vframes, loop=0).overwrite_output().run()
I need a CDN of images where I can resize the image from URL parameter. So for instance if I wanted a 400px wide version I would use www.cdn.com/image-400 and if I wanted a 200px version it would be www.cdn.com/image-200
From looking at this blog post it seems Google Cloud can do this:
https://medium.com/google-cloud/uploading-resizing-and-serving-images-with-google-cloud-platform-ca9631a2c556
Im having trouble understanding the article however and i wonder if its out of date. One of links to Google's documentation says you should use instead use Google Cloud Storage https://cloud.google.com/appengine/docs/standard/python/blobstore/
I came across these 2 SO questions but they seem to give opposite answers:
Get resized images from Google cloud storage
Resize image in Google Cloud Storage
Can Google Cloud resize images based on the url? If so, then how can you do this? I have a bucket set up in Google Cloud Storage, can you use images from a bucket like this?
First of all yes, it is possible, but as the first SO answer you shared it is not directly implemented and as you noticed the process it is not as straightforward as adding =sxx to an URL of a bucket.
Therefore writing https://storage.googleapis.com/bucketname/file.jpg=sxx does NOT work.
In order to create a URL capable to support this features you have to make use of Images API for Java, in particular the getServingUrl() method (there is also the GO or Python version of it) that will generate a new URL with the very same shape of the URL contained in the article you shared.
Once you retrieved the URL making use of the API you will be able to get the resized images, quoting directly from the official documentation you will be able to add:
=sxx where xx is an integer from 0–2560 representing the length, in pixels, of the image's longest side. For example, adding =s32 resizes the image so its longest dimension is 32 pixels.
=sxx-c where xx is an integer fro
m 0–2560 representing the cropped image size in pixels, and -c tells the system to crop the image.
Any idea where can I remove the image fetch limit? Because I have images in a Magento site that is hosted in Amazon S3. If I change the image url to S3, it fetches the images including all the thumbnails, but eventually, blocks the thumbnails, and only fetches the main image.
But if I host the image in my other server (Not Amazon S3), it doesn't have any limit. It will fetch all the images again and again, regardless of how many times I refresh it.
Here are examples:
www.shoptv.com.ph/active-posture.html - Image hosted in S3
dev.shoptv.com.ph/active-posture.html - Image hosted in Dreamhost
As you can see, the thumbnails are all present in DH, but in S3, it doesn't show up. But if you use the direct permalink of the images, it actually shows. For example:
Amazon S3:
http://s3.shoptv.com.ph/images/601938/601938-1.jpg
http://s3.shoptv.com.ph/images/601938/601938-2.jpg
http://s3.shoptv.com.ph/images/601938/601938-3.jpg
http://s3.shoptv.com.ph/images/601938/601938-4.jpg
Dreamhost:
http://dostscholars.org/images/601938/601938-1.jpg
http://dostscholars.org/images/601938/601938-2.jpg
http://dostscholars.org/images/601938/601938-3.jpg
http://dostscholars.org/images/601938/601938-4.jpg
All the images are present. But if you host it in S3, and include it in your media.phtml in Magento, it just won't show.
I suspect that it has something to do with my Amazon S3 settings, maybe a limit somewhere in the S3 dashboard that I can't find.
There is no image limit in Amazon S3.
Your problem is caused by the fact that the www.shoptv.com.ph/active-posture.html page is missing this HTML code (which I got from dev.shoptv.com.ph/active-posture.html):
<div class="more-views">
<h2>More Views</h2>
<ul class="product-image-thumbs">
It isn't displaying the images because there is no HTML telling the web browser to display the images!
I want to display an image from a database. I'm using data type BLOB for that image.
I've already tried #CharsetEncode(viewPoint.ppp_icons, "ASCII")#, but it didn't work.
<cfimage action="writeToBrowser" source="#imageBlob#">
http://livedocs.adobe.com/coldfusion/8/htmldocs/Tags_i_02.html
OR... Use Data URI scheme (w/ limited browser support).
<img src="data:image/png;base64,#toBase64(imageBlob)#" />
<cfcontent reset="Yes" type="image/gif" variable="#QueryName.BlobColumn#" />
EDIT: To clarify, you would place this code in a separate template. Which you would place the call for in the src attribute of your img tag. You would pass the primary key of the database table and the new template would lookup and grab the blob column to be outputted.
I believe it would be better to keep all blob data in separate requests, because if you were trying to display many files on a page it would be best to let the page load up first rather than have the page load time wait until all blob data could be downloaded from the sql server to the coldfusion server. Reducing initial page load times is of crucial importance to usability.
As an addendum, if these files are going to be accessed frequently, then it will also be best to have the file be cache on the web server and have the separate template redirect to the cached file.
I'd like to track the views/impressions of images on web pages, but still allow the images to be embedded in HTML, like in the "img src="http://mysite.com/upload/myimage.jpg"/" element.
I know in Windows I can write a handler for ".jpg" so the URL will actually trigger a handling function instead of loading the images from disk. Is it possible to do that in python/django on Ubuntu server? Can web browser still cache the jpg files if it is not a straight file path?
It looks to me that this is how google picasaweb handles the image file name. I'd like to get some ideas on how to implement that.
Thanks!
-Yi
If you want images to not be cached, just append a timestamp to them. This example is in PHP, but you get the idea:
<img src=<?php echo '"../images/myimage.gif?'.time().'"'; /* Append time so image is not cached */ ?>
Then you can analyze your logs to track views, etc.