I'm trying to show some badge images I made for a RANK APP I've been working for. It's 10 images that should be shown specific for each driver.
I'm not an expert on coding, but I keep searching and studying ways to solve the problem I've been through.
I firstly tried to send base64 images from the API to the browser, using this code:
<!-- language: python -->
for img in imglist: #loop for creating a list of base64 images from a list of image dir.
imgcode = base64.encodestring(open(imgdir + img,"rb").read())
imgcodelist.append(imgcode)
for driver in sortdriverList: #loop for taking drivers points and turn it into RANK img
if (driver['Races'] < 21):
driver['Rank'] = str(imgcodelist[9])
[...]
The second loop is longer than that, stil what I've shown to you above makes any driver that wasn't participating in more than 21 races, be part of a 'NON CLASSIFIED' badge.
I used AngularJS to try to show the base64 image using the code below.
'<html>'
<td><img src="data:image/png;base64,{{ '{{driver.Rank}}'}}"></td>
[driver.Rank] should be the base64 code string. When I run the app, the image is not shown, instead I see the very code of the image inside the table =/
Then I tried to turn [driver.Rank] into a dir string for "img src=", using the codes below.
<!-- language: python -->
imglist = ["notclassified.png", etc...]
imgdir = "static/images/"
for item in sortdriverList:
if (item['Races'] < 21):
item['Points'] = imgdir + imglist[9]
and in my HTML I changed the img src to:
'<html>'
<img src= {{ '{{driver.Rank}}' }}>
and now it shows the directory of the images.
I've been searching for CSS ways to make it possible.
I coudn't find a solution yet.
It's hard to tell what's going on since only segments are pasted, but I'm guessing it has to do with how you are escaping the code. Maybe you could paste the generated code in chrome.
Sometimes seeing a working example helps.
angular.module('App', [])
.controller('DriverCtrl', DriverCtrl);
function DriverCtrl($scope) {
// base64 encode 1x1 black pixel
this.Rank = 'R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
}
<div ng-app="App">
<div ng-controller="DriverCtrl as driver">
<div>Rank: {{driver.Rank}}</div>
<span>Image:</span>
<img ng-src="data:image/png;base64,{{driver.Rank}}">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
Related
I am trying to understand the html2image package. But it does not seem to find my locally stored images.
I use the following code:
from html2image import Html2Image
hti = Html2Image()
html_str ="""
<!DOCTYPE html>
<html>
<body>
<img src="example.jpg">
</body>
</html>
"""
css_str = """
body {
margin: 0;
background: black;
}
"""
hti.screenshot(html_str=html_str, css_str=css_str, save_as="test.png")
Here "example.jpg" is an image of a flower saved in the same folder as the python script.
The html_str copied into another file can be displayed by a browser without any problem.
But when running the above python script, I end up with a mostly black image with corrupted file symbol in the upper left corner.
Is there a way to fix this? Or does html2image not support the img tag?
Not sure if the best way, but I think you need to calculate the project path on the system from Python, and then serve the asset ahead of that URI. Assuming you can import os, here is how you would get current Python project directory:
ROOT_DIR = os.path.dirname(os.path.abspath(__file__)) # This is your Project Root
Once this is made, ROOT_DIR goes in the <img src='foo'> tag, then html2image should render, as the browser reads the system paths.
I'm looking to display a blob stored in a MySQL table within an HTML, using python-flask. But i am getting the broken image icon on the webpage when i run the code. The string data renders just fine, but not the blob. The web developer tool is indicating a 404 error when attempt to grab the blob resource, but i can't seem to make much of it. Looking for some help.
My Python code is:
#EMR.route("/apple")
def apple_luv():
t0 = gold.query.filter_by(patient_id=101).first()
tx = t0
return render_template("apple.html", t1=tx)
and HTML is shown below (FYI: tried a few syntaxes with the img tag since i was unsure)
<body>
{{t1.patient_fname}} | {{t1.patient_lname}} | {{t1.patient_addr}}
<br><br><br>
<img src="{{t1.patient_pic}}" />
<br><br><br>
<img src={{t1.patient_pic}} />
<br><br><br>
<img src="{{t1.patient_pic}}" >
<br><br><br>
<img src={{t1.patient_pic}} >
</body>
See the attachments for what my data looks like in MySQL DB, and the webpage outcome as well.
return render_template('homepage.html',imgName=filenameD)
PYTHON
<img src= {{ name }} alt="something" style="width:500px;height:600px;">
HTML
im trying to change the image on my website based on the data I pass to it with python flask but the image does not show up, im using something called jinja?
The image is not shown because you are referencing a non-existent variable in your template. Change your <img> tag to
<img src="{{ imgName }}" alt="something" style="width:500px;height:600px;">
and make sure that filenameD contains the path to your image and not only its name i.e. it should be something like /static/image.png.
Also, always surround your attribute values with "" to prevent XSS attacks, see Flask's security docs.
Try this:
Python
return render_template('homepage.html',name=filename)
HTML
<img src = "{{url_for('static', filename=name) }}" alt="something" style="width:500px;height:600px;">
Your image must be located inside 'static' folder and named as usually ('myimg.png', etc)
I'm working with an IP camera. I can use a URL such as this one to grab a static image off the camera:
http://Username:Password#IP_of_Camera:Port/streaming/channels/1/picture
What I want to do is have python/flask download the image from that URL when the client loads the page, and embed the image into the page using an img tag.
If I have a template that looks something like this:
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="{{ image }}">
</body>
</html>
how do I replace the {{ image }} with the downloaded image?
Would I use urllib/requests to download the image to flask's static folder, replace {{ image }} with something like {{ url_for('static', filename="temp_image.png") }}, and then delete the image from the static folder when the page loads? Would I download it someplace else instead (other than the static folder)? Or is there some other way to do it that keeps the image in memory?
PS. I know it's possible to replace {{ image }} with that URL directly, but that reveals the username/password/IP/port of the camera to the client.
I would add a masking route on flask that fetches and serves the image directly.
Lets say domain.com/image/user1/cam1
Your server would typically make a http request to the camera and once it receives a response, you can straight up serve it as a Response object with appropriate mimetype.
In this case, the image you fetched from camera resides in your RAM.
#app.route('image/<userID>/<camID>')
def fun(userID,camID):
# fetch the picture from appropriate cam
pic = requests.get('http://'+
'Username:Password'+ # dynamically replace user id / password/ auth
'#IP_of_Camera:Port'+ #dynamically replace port / IP
'/streaming/channels/1/picture')
# do processing of pic here..
return Response(pic,mimetype="image/png")
However, if this image needs to be served over and over again, then you might wanna cache it. In which case, I would pick something closer to your approach.
If you want to stream the camera images, it is a whole different ballgame.
import requests
url = "http://Username:Password#IP_of_Camera:Port/streaming/channels/1/picture"
response = requests.get(url)
if response.status_code == 200:
f = open("/your/static/dir/temp.png", 'wb')
f.write(response.content)
f.close()
{{ url_for('static' filename="temp.png") }}
Not sure why you would need to delete it, but I guess you could if you thought that was required
I'm trying to save a chart by converting SVG to PNG with a Python script.
So I start storing the svg data in a variable with :
var svgdata = Ext.draw.engine.SvgExporter.generate(chart.surface);
When I do alert(svgdata), I can see that this output is correct.
But when I send it to the server like this :
Ext.draw.engine.ImageExporter.defaultUrl = "data/svg_to_png.py?svgdata="+svgdata;
The svgdata that has been sent looks like this :
<?xml version=
I'm new to extjs, please help me on this one. What is the right way to send svg data to my python script and render a png image ?
This is my python script :
import cairo
import cgi
import rsvg
print "Content-type: image/png\n\n"
arguments = cgi.FieldStorage()
img = cairo.ImageSurface(cairo.FORMAT_ARGB32, 640,480)
ctx = cairo.Context(img)
handler= rsvg.Handle(None, str(arguments["svgdata"]))
handler.render_cairo(ctx)
img.write_to_png("svg.png")
HELP ME PLEASE!
<div style="display:none;">
<iframe id="file_download_iframe" src="blank.html"></iframe>
</div>
You will need a blank html page on your server for this to work properly in all browsers. Basically the blank.html page is an empty page to satisfy that the ifram always has a page in it.
Then you need a basic form hidden somewhere too:
<div style="display:none;">
<form
id = "file_download_iframe_form"
name = "file_download_iframe_form"
target = "file_download_iframe"
method = "post"
action = "data/svg_to_png.py"
>
<input type="hidden" id="svgdata" name="svgdata"/>
</form>
</div>
Then have a javascript function like this:
function getImage(svgdata){
var form = document.getElementById("file_download_iframe_form");
document.getElementById("svgdata").value = svgdata;
form.submit();
};