embedding generated img inside django template - django

how would I embedded generated image inside django template?
something like
return render_to_response('graph.html', { 'img': get_graph() })
I don't want this - because it just send image
http.HttpResponse(get_graph(), mimetype="image/png")

I wanted to embed a generated matplotlib image in a django page without making two trips to the django server (one to get the template, one to generate the image). I put the following in my template for the image
<img alt="embedded" src="data:image/png;base64,{{inline_png}}"/>
Then in the view method:
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure
import cStringIO as StringIO
import base64
num_signed_off = random.randint(0, 10)
num_reviewed = random.randint(0, 50)
num_unreviewed = random.randint(0, 50)
fig = Figure()
ax = fig.add_subplot(111, aspect='equal', axis_bgcolor='b')
ax.pie([num_signed_off, num_reviewed, num_unreviewed],
labels=['Signed Off', 'Reviewed', 'Unreviewed'],
colors=['b', 'r', 'g'],
)
ax.set_title('My Overall Stats')
ax.set_axis_bgcolor('r')
canvas=FigureCanvas(fig)
outstr = StringIO.StringIO()
canvas.print_png(outstr)
ret['inline_png'] = base64.b64encode(outstr.getvalue())
outstr.close()
return render(request, "my_view.html", ret)
The only problem with this is that it doesn't work in IE7 or IE8 - it works with IE9 and newer, thought, and of course with all the standards-based web browsers.

You can base64-encode the image data and use a data URI.

You can map a URL to one of your view functions that returns an HttpResponse with image data and use this URL as the src for your <img> element e.g.
urls.py
from django.conf.urls.defaults import *
urlpatterns = patterns('',
(r'^image/', 'views.get_image'),
)
views.py
from django.http import HttpResponse
def get_image(request):
image_data = get_graph() # assuming this returns PNG data
return HttpResponse(image_data, mimetype="image/png")
index.html
<img src="image"/>

Related

pdfkit django in digitalocean

pdfkit works in the local machine everything works successfully displays as pdf, but in digitalocean sends to the server error 500, why?
views.py
from django.shortcuts import render, redirect, get_object_or_404
from django.http import HttpResponse
from django.template.loader import get_template
import pdfkit
from .models import Buses
def pdf(request, id):
bus = Buses.objects.get(id=id)
template = get_template('buses/pdf.html')
html = template.render({'bus': bus})
options = {
'page-size': 'Letter',
'encoding': "UTF-8",
}
pdf = pdfkit.from_string(html, False, options)
response = HttpResponse(pdf, content_type='application/pdf')
response['Content-Disposition'] = 'attachment; filename="{}_{}.pdf"'.format(bus.company, bus.name)
return response
If your template references other files, you may need to set 'enable-local-file-access': True in your options.
See: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/4460
I am not sure but your problem could be the location of wkhtmltopdf
It is always a better option to specify the wkhtmltopdf location. So on your digital ocean server - start by installing wkhtmltopdf - if you dont have it yet.
This is a great tutorial to use for any version of Ubuntu - https://computingforgeeks.com/install-wkhtmltopdf-on-ubuntu-debian-linux/
Then on your command line:
which wkhtmltopdf
Note the location, your code will then look like this:
from django.shortcuts import render, redirect, get_object_or_404
from django.http import HttpResponse
from django.template.loader import get_template
import pdfkit
from .models import Buses
def pdf(request, id):
bus = Buses.objects.get(id=id)
template = get_template('buses/pdf.html')
html = template.render({'bus': bus})
options = {
'page-size': 'Letter',
'encoding': "UTF-8",
}
config = pdfkit.configuration(wkhtmltopdf='/usr/local/bin/wkhtmltopdf') #use your actual location here
pdf = pdfkit.from_string(html, False, configuration=config, options=options)
response = HttpResponse(pdf, content_type='application/pdf')
response['Content-Disposition'] = 'attachment; filename="{}_{}.pdf"'.format(bus.company, bus.name)
return response

Can I print just the content of a html template in django?

I am using Django with python to create a web application, I am a beginner in this. I hope that you can help me.
I want to print this page by clicking a button.
Now, I am just trying to generate the pdf first.
I want just to print the content, like that
I tried these functions.
#views.py
from django.views.generic.detail import DetailView
from MagasinProject.views import PdfMixin
from MagasinProject.utils import generate_pdf, render_to_pdf_response, pdf_decorator
from django.contrib.auth.models import User
from django.shortcuts import render
def test_view(request):
resp = HttpResponse(content_type='application/pdf')
result = generate_pdf('demande/demande.html', file_object=resp)
return result
#urls.py
from django.urls import path
from . import views
from django.conf.urls import url
urlpatterns=[
path('demande',views.index, name='demande'),
url(r'^test_view$', views.test_view),
]
This is what I got
You can print the HTML page with a print button like this (see w3schools):
<button onclick="window.print()">Print this page</button>

how to show pdf from server in a Django view?

I am trying to show/read pdfs from server , but getting erros. Below I have attached my view.py . Please help me to solve it
views.py
from django.shortcuts import render
from django.http import HttpResponse
from .models import PDF
def pdf_view(request):
a = PDF.objects.get(id=id)
with open('a.pdf', 'rb') as pdf:
response = HttpResponse(pdf.read(), contenttype='application/pdf')
response['Content-Disposition'] = 'filename=a.pdf'
return response
pdf.closed
you can use use Django templates to show/read pdf on sever. create 'templates' folder inside your django project. inside it create a html file which contain link of you pdf.

Django: embedding image in template

I need an image to be displayed within my webpage. The image is stored within a variable in views.py.
Most solutions such as the one below use HttpResponse to output images but I want the image to be embedded within my html template.
from django.http import HttpResponse
def my_image(request):
image_data = open("/path/to/my/image.png", "rb").read()
PS. I am getting the image by using matplotlib to create the image. So I cannot use a static folder. Example code given below (credit:this)
import sys
from django.http import HttpResponse
import matplotlib as mpl
mpl.use('Agg') # Required to redirect locally
import matplotlib.pyplot as plt
import numpy as np
from numpy.random import rand
try:
# Python 2
import cStringIO
except ImportError:
# Python 3
import io
def get_image(request):
"""
This is an example script from the Matplotlib website, just to show
a working sample >>>
"""
N = 50
x = np.random.rand(N)
y = np.random.rand(N)
colors = np.random.rand(N)
area = np.pi * (15 * np.random.rand(N))**2 # 0 to 15 point radiuses
plt.scatter(x, y, s=area, c=colors, alpha=0.5)
"""
Now the redirect into the cStringIO or BytesIO object >>>
"""
if cStringIO in sys.modules:
f = cStringIO.StringIO() # Python 2
else:
f = io.BytesIO() # Python 3
plt.savefig(f, format="png", facecolor=(0.95,0.95,0.95))
plt.clf()
"""
Add the contents of the StringIO or BytesIO object to the response, matching the
mime type with the plot format (in this case, PNG) and return >>>
"""
return HttpResponse(f.getvalue(), content_type="image/png")
return HttpResponse(image_data, content_type="image/png")
Save the image in the media directory and then use ajax to update the div
something like
def get_image(request):
"""
This is an example script from the Matplotlib website, just to show
a working sample >>>
"""
N = 50
x = np.random.rand(N)
y = np.random.rand(N)
colors = np.random.rand(N)
area = np.pi * (15 * np.random.rand(N))**2 # 0 to 15 point radiuses
plt.scatter(x, y, s=area, c=colors, alpha=0.5)
filepath = os.path.join(settings.MEDIA_PATH,'/name_of_the_file.png')
plt.savefig(filepath, facecolor=(0.95,0.95,0.95))
plt.clf()
return HttpResponse(filepath)
then go to the function with ajax request
$.ajax({ type: "POST",
url: 'THE URL TO THE FUNCTION',
data: {
csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(),
},
success: function(response){
$('#your_div_id').html("<img src=\""+responce+"\"></img>")
}
});

how to output horizontal barchart to django site page

I tried an examle in a django views.py:
import numpy as np
import matplotlib.pyplot as plt
N=3
Data = (1,2,9)
ind = np.arrange(N)
width = 0.35
p1 = plt.bar(ind, Data, width, color='r')
what i dont know - how to direc this to the page in django site.
Shall i use plt.show() or try to create buffer for png object?
sorry for this ...
This is what you are looking for :
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
import matplotlib.pyplot as plt
import django
def plot(request):
plt.plot()
canvas = FigureCanvas(plt.figure(1))
response=django.http.HttpResponse(content_type='image/png')
canvas.print_png(response)
return response
I have no tested that, but could work. You have to use the backend_agg for printing a canvas as png format, to be handle as a mimetype image/png file.
The better approach seems to be write a view to output the chars.
The view would be this:
import numpy as np
import matplotlib.pyplot as plt
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure
from django.http import HttpResponse
def bar_chart(request):
if request.GET.get('data', False):
data = (1,2,9)
else:
if type(request.GET['data']) == list():
data = request.GET['data']
chart = plt.bar(np.arange(3), data, 0.35, color='r')
canvas = FigureCanvas(chart)
response = HttpResponse(content_type='image/png')
canvas.print_png(response)
return response
# inside urls.py
#
# url(r'^charts/bar_chart.png$', 'myapp.views.charts.simple', name="bar_chart"),
And in your templates you can use this way:
<h1>My Bar Char</h1>
<img src="{% url bar_chart %}?data=[10,20,40,50,30,50]" />
This will render:
<h1>My Bar Char</h1>
<img src="/charts/bar_chart.png?data=[10,20,40,50,30,50]" />
I hope you can test it and complete this answer.