Image which is stored as a blob in Datastore in a html page

Question

I am trying to make a Web Application based on Google App Engine in python. A part of it deals with displaying the poster of Movie hosted at IMDb. I have the link to the poster. For ex. http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1._SX94_SY140_.jpg

Then I tried to put it in an HTML page as:

<a href="https://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3.jpg">
<img src="https://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3.jpg">
</a>

See the example here :

The image isn;t shown and on clicking it, a page opens saying:

Referral Denied

You don't have permission to access "https://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3.jpg" on this server.

Reference #24.84d81002.1393249598.981ca7

On going through this question, I came to know that IMDb does not allow referrals to any other sites. The solution was to get the image yourself, save it and then serve it yourself. For doing that, I followed this link.

I made a datastore object storing various informations of the movie as well as the poster which was fetched using urlfetch api. relevant parts of the code are

from google.appengine.ext import db
from google.appengine.api import urlfetch

class Movie(db.Model):
    title = db.StringProperty()
    poster = db.BlobProperty(default=None)

coverurl = "https://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3.jpg"
movie = Movie()
posterimg = urlfetch.fetch(coverurl).content
movie.cover = db.Blob(posterimg)
movie.put()

Now, for rendering the html page, I got the movie object from datastore as

m = Movie.gql("WHERE title = :1", title).get()
img = m.posterimg

and the html page was rendered as

imghtml = ' <img src="' + img + '"> </a>'

An error was expected and was recieved as:

UnicodeDecodeError: 'ascii' codec can't decode byte 0xff in position 0: ordinal not in range(128)

What is the way out of this? How can I include an Image which is stored as a blob in Datastore in a html image?

I hope you don't mean that you steal the images from their website without permission. — Andrei Volgin, Feb 24 '14 at 17:41
would it count as stealing if they themselves allow access to us ? — venky, Feb 24 '14 at 18:33
Access is not the same as copying. You are breaking the copyright law if you copy images without an owner's permission. — Andrei Volgin, Feb 24 '14 at 19:07

score 2 · Answer 1 · edited Feb 24 '14 at 15:14

2

The serving dynamic images is an old link. Today we have Google High Performance Image serving. How to use this:

Upload an image to the blobstore
Using the App engine image service, get a serving url:
Put his serving url in your HTML

example: serving_url = images.get_serving_url(blob_key, size=None, secure_url=True)

Docs: https://developers.google.com/appengine/docs/python/blobstore/#Python_Uploading_a_blob

Example serving url: https://lh6.ggpht.com/lOghqU2JrYk8M-Aoio8WjMM6mstgZcTP0VzJk79HteVLhnwZy0kqbgVGQZYP8YsoqVNzsu0EBysX16qMJe7H2BsOAr4j=s70

edited Feb 24 '14 at 15:14

Lipis

21,388
20
94
121

answered Feb 24 '14 at 14:41

voscausa

11,253
2
39
67

How do i get the blob_key for the image? I am uploading the image to the datastore, not the Blobstore. Is there a way to link the datastore entries to blobstore entries? – venky Feb 24 '14 at 14:42
If you upload a blob, you receive the blobkey. The blobkey is part of the blobinfo. So you can use blobinfo instance and key(). – voscausa Feb 24 '14 at 14:45

score 1 · Accepted Answer · answered Feb 24 '14 at 16:42

upload image to blobstore using the app engine helpers, get the serving_url in the same handler, save the serving_url with your image object, refer to the image url in your html template

e.g.

from google.appengine.ext.webapp import blobstore_handlers
from google.appengine.api.images import get_serving_url

class Handler(blobstore_handlers.BlobstoreUploadHandler):
    def post(self):
        upload_files = self.get_uploads('file')
        blob_info = upload_files[0]
        img = MyImageObject()
        img.image_name = blob_info.filename
        img.image_url = get_serving_url(blob_info.key())
        img.put()

then in the template

<img src="{{img.image_url}}">

to get original size of image you will need to append =s0 to end of url, append =sXX to resize, see "URL Modifications" section here https://developers.google.com/appengine/docs/python/images/functions

score 0 · Answer 3 · answered Feb 24 '14 at 14:46

0

Try this

echo '<img src="data:image/jpeg;base64,' . base64_encode( $row['imageContent'] ) . '" />';

answered Feb 24 '14 at 14:46

Johnny

414
3
12

I can't understand the syntax presented by you. excuse my ignorance. What is > . base64_encode( $row['imageContent'] ) . ? – venky Feb 24 '14 at 14:52

Image which is stored as a blob in Datastore in a html page

3 Answers3

Linked