I have written a CGI script that creates an image dynamically using GET data. To include this image in my webpage, I am using the following code:
<img src="image.py?text=xxxxxxxxxxxxxx">
The problem is that I expect in the future the "text" field will get very long and the URL will become too large. From Googling around there doesn't seem to be a fixed limit on URL length (ie. depends on the browser, server, proxy, etc.) Is there a better way to do this?
If it matters, I am working with Django and Python and I cannot use any client-side scripting (ie. JavaScript).
Cheers,
Ben
Store the text somewhere (e.g. a database) and then pass through the primary key.
This will get you an Image as the result of a POST -- you may not like it
Put an iFrame where you want the image and size it and remove scrollbars
Set the src to a form with hidden inputs set to your post parameters and the action set to the URL that will generate the image
submit the form automatically with JavaScript in the body.onload of the iFrame's HTML
Then, either:
Serve back an content-type set to an image and stream the image bytes
or:
store the post parameters somewhere and generate a small id
serve back HTML with an img tag using the id in the url -- on the server look up the post parameters
or:
generate a page with an image tag with an embedded image
http://danielmclaren.net/2008/03/embedding-base64-image-data-into-a-webpage
Putting together what has already been said, how about creating two pages. First page sends a POST request when the form is submitted (lets say to create_img.py) with a text=xxxxxxx... parameter. Then create_img.py takes the text parameter and creates an image with it and inserts it (or a filesystem reference) into the db, then when rendering the second page, generate img tags like <img src="render_img.py?row_id=0122">. At this point, render_img.py simply queries the db for the given image. Before creating the image you can check to see if its already in the database therefore reusing/recycling previous images with the same text parameter.
img's use GET. You'll have to come up with another mechanism. How about calling the same functionality in image.py and saving the file as a temp file which you ref in the img tag? Or how about saving the value of text in a db row during the rendering of this img tag and using the row_id as what you pass into the image.py script?
You may be able to mitigate the problem by compressing the text in the get parameter.
From the link below it looks like you'll be fine for a while ;)
http://www.boutell.com/newfaq/misc/urllength.html
If you're using django, maybe you can do this via a template tag instead?
Something like:
<img src="{% create_image "This is the text that will be displayed" %}">
The create_image function would create the image with a dummy/random/generated filename, and return the path.
This avoids having to GET or POST to the script, and the images will have manageable filenames.
I can see some potential issues with this approach, I'm just tossing the idea out there ;)
OK, I'm a bit late to the party, but you could use a mix of MHTML (for IE7 and below) and the data URI scheme (for all other modern browsers). It does require a bit of work on both client and server but you can ultimately end up with
newimg.src = 'blah';
The write-up on how to do this is at http://gingerbbm.com/?p=127.
Related
first time poster here.
I am just getting into python and coding in general and I am looking into the requests and BeutifulSoup libraries. I am trying to grab image url’s from google images. When inspecting the site in chrome i can find the “div” and the correct img src url. But when I open the HTML that “requests” gives me I can find the same “div” but the img src url is something completely different and only leads to a black page if used.
Img of the HTML requests get
Img of the HTML found in chrome's inspect tool
What I wonder, and want to understand is:
why are these HTML's different
How do I get the img src that is found with the inspect tool with requests?
Hope the question makes sense and thank you in advance for any help!
Maybe differences between the the response HTML and the code in chrome inspector stems for updates to the page when JS changes it . for example when you use innerHTML() to edit div element so the code you add will add to DOM stack so as the code in the inspector but it would have no influence on the response.
You may search the http:// in the begging and the .png or .jpg or any other image format in the end.
Simply put, your code retrieves a single HTML page, and lets you access it, as it was retrieved. The browser, on the other hand, retrieves that HTML, but then lets the scripts embedded in (or linked from) it run, and these scripts often make significant modifications to the HTML (also known as DOM - Document Object Model). The browser's inspector inspects the fully modified DOM.
I'm currently using summernote in my admin panel where I can put text and images and in DB it will save the formatted content by applying some html tags <b>, <i>, etc.
but when I render that content using json api to android, it doesn't use html formatting correctly.
now let me tell you my actual case scenario. I'm creating an application similar to Quora. its a simple app where users can post question and users can answer. in their question detail or answer they can attach images as well.
now for me here order of image does matter(similar to Quora again), I mean when user attach some image after some text it should be save in db in that order. I can't save text at one place and images in another place, in that case i wont be able to recognize the actual position of text and images. I mean where should I put image1 in this whole text, after line1? line5? line7?.
Django-summernote solved the problem about image positioning but not the formatting. is there any better library or approach to maintain image positioning and text formatting to support web and mobile application(through JSON api).
PS: from here https://www.djangopackages.com/grids/g/wysiwyg/
django-summernote seems to be the best
I am pretty new to Django so I am creating a project to learn more about how it works. Right now I have a model that contains a URL field. I want to automatically generate a thumbnail from this url field by taking an appropriate image from the webite like facebook or reddit does. I'm guessing that I should store this image in an image field. What would be a good way to select an ideal image from the website and how can I accomplish this?
EDIT- I'm trying to take actual images from the website rather than a picture of the website
First off you can check if the site uses any Facebook open graph tags - namely <meta property="og:image" content="http://..."/>.
You'll first need to parse the html content for img src urls with something like lxml or BeautifulSoup. Then, you can feed one of those img src urls into sorl-thumbnail or easy-thumbnails as Edmon suggests.
One option, which is not specific to Django, is to take a snapshot of a page using webkit2png
and then use Sorl or Easy Thumbnails to generate image url.
Sorl - https://github.com/sorl/sorl-thumbnail
Easy Thumbnails - https://github.com/SmileyChris/easy-thumbnails
I have a form where the user uploads two images, and based on them I generate about 10 other images ( using PIL ). The thing is, I want to show an HTML page that contains all the generated images, but I would like not to have to store them on server side. Is this possible?
You could use the Data URI scheme. The examples section on that Wikipedia article has some nice things to start with. What you need then, is to convert the binary image data to base64 so you can include it on your page. Fortunately, there are scripts available for this already.
Browser support seems okay, all major browser have no problem with it. For IE, it is supported from IE8 upwards (with IE8 having a limitation of 32KiB for the URI size).
You need to design your URLs correctly and have a view for an URL pointing to an image. In that view then you send the generated image. The Django website has an example for a PDF.
https://docs.djangoproject.com/en/1.3/howto/outputting-pdf/
In your (static?) HTML page you have a reference then like
<img src="/dyn_images/foo.png"/>
and an URL rule watching for that.
I have a page with an Open Graph image tag:
<meta property="og:image" content="http://childhumor2.homeip.net:9009/_ah/img/RYCF7Ty7wODp9R-N_QIWYA===s200"/>
The image is a GAE blob and the URL comes from calling get_serving_url. The URL works fine normally.
Now, if someone likes this page, the thumbnail image that is shown in the newsfeed is broken. Only a blank 1x1 image is returned to the browser.
Inspecting the FB page, the generated HTML is:
<img src="http://external.ak.fbcdn.net/safe_image.php?d=6b635a7f80252e93c6b28e2dbe4ad440&w=90&h=90&url=http%3A%2F%2Fchildhumor2.homeip.net%3A9009%2F_ah%2Fimg%2FRYCF7Ty7wODp9R-N_QIWYA%3D%3D%3Ds200" class="img">
When viewing the liking user's news feed for the first time, I see FB hit my server for the image:
INFO 2010-11-14 21:33:17,701 dev_appserver.py:3283] "GET /_ah/img/RYCF7Ty7wODp9R-N_QIWYA%3D%3D%3Ds200 HTTP/1.1" 500 -
It is obvious that there is a URL encoding problem with the equal signs in the URL but I have no idea who is at fault here.
Should FB be unescaping %3D before calling back to my server for the image?
Is GAE not properly handling an encoded URL?
Should I be encoding the URL in the Open Graph tag somehow? (I tried urllib.quote-ing it with the same results.)
To make things more confusing, the Facebook URL Linter retrieves the image properly. Also if doing a FB share on the page, the thumbnail preview will be shown correctly. This leads me to believe this is a bug with the safe_image.php script FB is proxying/caching the image with.
It is probably the case that Facebook should be unquoting the value so that it matches the original og:image you listed, and you should write a bug for that (as Nathan suggested).
However, technically speaking %3D and = have the same meaning in the path section of a URL and should be treated equally so that might also be bug worthy on the GAE side of things. In this case you probably want to urllib.unquote() the path when handled on GAE. (perhaps you could simply redirect to the unescaped version)
If the URL linter says everything is working correctly, then you are most likely correct that it is a bug with Facebook. I would recommend searching through their existing bugs to see if you can find one that exists, and if not post a new bug. There are currently about 4,300 platform bugs open so it is certainly not unheard of that something is broken. Facebook Bugs: http://bugs.developers.facebook.net/
As a workaround, don't use the Google Image Serving Service. Instead write a handler to retrieve the blob from the datastore, transform it, and stream it back to the client. This allows you to construct a simpler URL that will not be munged by Facebook.
Example from GAE Docs:
class Thumbnailer(webapp.RequestHandler):
def get(self):
blob_key = self.request.get("blob_key")
if blob_key:
blob_info = blobstore.get(blob_key)
if blob_info:
img = images.Image(blob_key=blob_key)
img.resize(width=80, height=100)
img.im_feeling_lucky()
thumbnail = img.execute_transforms(output_encoding=images.JPEG)
self.response.headers['Content-Type'] = 'image/jpeg'
self.response.out.write(thumbnail)
return
# Either "blob_key" wasn't provided, or there was no value with that ID
# in the Blobstore.
self.error(404)