I have an R markdown document which is created using a shiny app, saved as a HTML. I have inserted a logo in the top right hand corner of the output, which has been done using the following code:
<script>
$(document).ready(function() {
$head = $('#header');
$head.prepend('<img src=\"FILEPATH/logo.png\" style=\"float: right;padding-right:10px;height:125px;width:250px\"/>')
});
</script>
However, when I save the HTML output and share the output, of course the user cannot see the logo since the code is trying to find a file path which will not exist on their computer.
So, my question is - is there a way to include the logo in the output without the use of file paths? Ideally I don't want to upload the image to the web, and change the source to a web address.
You can encode an image file to a data URI with knitr::image_uri. If you want to add it in your document, you can add the html code produced by the following command in your header instead of your script:
htmltools::img(src = knitr::image_uri("FILEPATH/logo.png"),
alt = 'logo',
style = 'float: right;padding-right:10px;height:125px;width:250px')
Related
I am looking for a way to parse the images on a web page. Many posts already exist on the subject, and I was inspired by many of them, in particular :
How Can I Download An Image From A Website In Python
The script presented in this post works very well, but I have encountered a type of image that I don't manage to automate the saving. On the website, inspection of the web page gives me:
<img class="lazy faded" data-src="Uploads/Media/20220315/1582689.jpg" src="Uploads/Media/20220315/1582689.jpg">
And when I parse the page with Beautifulsoup4, I get this (fonts.gstatic.com Source section content) :
<a class="ohidden" data-size="838x1047" href="Uploads/Media/20220315/1582689.jpg" itemprop="contentUrl">
<img class="lazy" data-src="Uploads/Media/20220315/1582689.jpg" />
</a>
The given URL is not a bulk web URL which can be used to download the image from anywhere, but a link to the "Sources" section of the web page (CTRL + MAJ + I on the webpage), where the image is.
When I put my mouse on the src link of the source code of the website, I can get the true bulk url under "Current source". This information is located in the Elements/Properties of the DevTools (CTRL + MAJ + I on the webpage), but I don't know how to automate the saving of the images, either by directly using the link to access the web page sources, or to access the bulk address to download the images. Do you have some idea ?
PS : I found this article about lazy fading images, but my HTLM knowledge isn't enough to find a solution for my problem (https://davidwalsh.name/lazyload-image-fade)
I'm not too familiar with web scraping or the benefits. However, I found this article here that you can reference and I hope it helps!
Reference
However, here is the code and everything you need in one place.
First you have to find the webpage you want to download the images from, which is your decision.
Now we have to get the urls of the images, create an empty list, open it, select them, loop through them, and then append them.
url = ""
link_list[]
response = urllib.request.urlopen(url)
soup = BeautifulSoup(response, "html.parser")
image_list = soup.select('div.boxmeta.clearfix > h2 > a')
for image_link in image_list:
link_url = image_link.attrs['href']
link_list.append(link_url)
This theoretically should look for any href tag linking an image to the website and then append them to that list.
Now we have to get the tags of the image file.
for page_url in link_list:
page_html = urllib.request.urlopen(page_url)
page_soup = BeautifulSoup(page_html, "html.parser")
img_list = page_soup.select('div.seperator > a > img')
This should find all of the div tags that seperate from the primary main div class, look for an a tag and then the img tag.
for img in img_list:
img_url = (img.attrs['src'])
file_name = re.search(".*/(.*png|.*jpg)$", img_url)
save_path = output_folder.joinpath(filename.group(1))
Now we are going to try to download that data using the try except method.
try:
image = requests.get(img_url)
open(save_path, 'wb').write(image.content)
print(save_path)
except ValueError:
print("ValueError!")
I think you are talking about the relative path and absolute path.
Things like Uploads/Media/20220315/1582689.jpg is a relative path.
The main difference between absolute and relative paths is that absolute URLs always include the domain name of the site with http://www. Relative links show the path to the file or refer to the file itself. A relative URL is useful within a site to transfer a user from point to point within the same domain. --- ref.
So in your case try this:
import requests
from bs4 import BeautifulSoup
from PIL import Image
URL = 'YOUR_URL_HERE'
r = requests.get(URL)
soup = BeautifulSoup(r.text, 'html.parser')
for img in soup.find_all("img"):
# Get the image absolute path url
absolute_path = requests.compat.urljoin(URL, img.get('data-src'))
# Download the image
image = Image.open(requests.get(absolute_path, stream=True).raw)
image.save(absolute_path.split('/')[-1].split('?')[0])
I am using a uihtml component inside a uifigure that loads a HTML file in its HTMLSource property. The HTML file just tries to fetch the contents of a text file located in the same folder, and outputs them inside a div component. The body in the HTML looks something like this:
<body>
<div id="viewer"></div>
<script>
fetch("./example.txt")
.then(response => response.text)
.then(textString => {
document.getElementById('viewer').innerHTML = textString;
});
</script>
</body>
The problem is that I always get a "Page Not Found" (the status from the fetch response is 404). The documentation of uihtml says: Common web file types, like JavaScript and CSS, can be referenced from the HTML file you specify for the HTMLSource property, but other web file types might not be supported., so I am not sure if it is even possible to fetch a text/pdf/any other file.
From what I understand, when calling uihtml MATLAB injects an iframe on the webpage displayed by the uifigure. This iframe runs on a local web server, and whenever you append a script tag with a source, the script is also accessed from the web server. For example,
<body>
<div id="viewer"></div>
<script id="script-id" src = "./example.js"></script>
<script>
document.getElementById("viewer").innerHTML = document.getElementById("script-id").src;
</script>
</body>
would display the source of the js file, which corresponds to something like:
https://localhost:31515/static/xxxxxxxx/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/example.js
That same location of the file we could get by appending the undocumented
connector.getBaseUrl
matlab.ui.internal.URLUtils.parseURL('/example.js',0)
I have tried fetching the text file with the full path to that web server location
(https://localhost:31515/static/.../example.txt)
but the 404 error persists.
At this level of HTML/JS is where I start to struggle. It looks like there should be some way to fetch the data of the file since scripts can be loaded, but I can't find a way. Does anybody know how to successfully fetch the file? Do we need a special credential in the fetch request or something like that?
I am trying to generate a TEXT/XML file from a LOCAL HTML file. I know there are a lot of answers to generating a file locally, usually suggesting using ActiveX object or HTML 5.
I'm guessing there is a way to make it work on all browsers (in the end HTML extension is opened by a browser even if it is a LOCAL file) and easily since this is a LOCAL file put in by user himself.
My HTML file will be on client's local machine not accessed via HTTP.
It is basically just a form written in HTML that upon "SAVE" command should be generating an XML file in the local disk (anywhere user decides) and saving form's content in.
Any good way?
One way that I can think of is, the html form elements can be set into class variables and then using the jaxb context you can create an XML file out of it.
Useful Link: http://www.vogella.com/tutorials/JAXB/article.html
What you can do is use base64 data-urls (no support for IE9-) to download the file:
First you need to create a temporary iframe element for your file to download in:
var ifrm = document.createElement('iframe');
ifrm.style.display = 'none';
document.body.appendChild(ifrm);
Then you need to define what you want the contents of the file to download to be, and convert it to a base64 data-url:
var html = '<!DOCTYPE html><html><head><title>Foo</title></head><body>Hello World</body></html>';
htmlurl = btoa(html);
and set it as source for the iframe
ifrm.src = 'data:text/x-html;base64,'+htmlurl;
I created a HTML page.
Now, I try to display all the pictures that are in a specific folder (/folder1) in this HTML page (Note: I don't know the names of these images).
I try to create a loop, which read all this images, and display it in this HTML.
There is an easy way to do that?
You are looking for something which HTML cannot do. You are going to need some sort of backend language, whether that be Rails, PHP, Python, or something else doesn't really matter.
HTML is and always will be only a Markup Language.
Here is a similar post which has code that might help you:
How To Display All Images in Folder
With php you can use function scandir() to retrieve all the files in a directory, and save them as an array.
Then iterate over that array and display any image with something like:
echo '<img src="path/to/folder1/'$files_array[i]'">
where $files_array contains the names of every image file in that directory.
if your images are stored in a server you can read the directory and get the image name them send to the font end.
if you are work in a local file system such as
/dir/index.html
/dir/images/
/dir/images/xxx.png
/dir/images/aaa.png
/dir/images/other image.png
you can rename all images in batch to 1.png 2.png 3.png ...and so on then use javascript in html to
generate the image
var body = document.getElementsByTagName("body")[0];
for (var i = 0; i < 100; ++i) {
var img = document.createElement("img");
img.src = "images/" + i + ".png";
body.appendChild(img);
}
Can we create a hyperlink or an embed tag that will display a specified page/section of a PDF document?
let me know if anybody has any idea
ex:
Open PDF using subsection
I know appending #page=X works, but I've now had some luck appending #subsection.X.Y. For example: http://tug.ctan.org/macros/latex/contrib/beamer/doc/beameruserguide.pdf#subsection.14.1
Just to go to an existing PDF file page you can use
#page=pageNumber
PDF parameter.
Yes it seems to be possible, please see this link http://www.pdfobject.com/examples/index.php and http://www.pdfobject.com/ for more information. This is from the site "PDFObject is an easy-to-use method for dynamically embedding PDF files into HTML documents. It uses JavaScript to generate and inject a standards-friendly "
<script type="text/javascript">
window.onload = function (){
var success = new PDFObject({ url: "http://www.adobe.com/content/dam/Adobe
/en/devnet/acrobat/pdfs/pdf_open_parameters_v9.pdf#page=6&zoom=150,0,216"
}).embed("pdf");
};
</script>
As you can see you can change the URL link to
thefile.pdf#page=YOURDESIREDPAGE
Linking to a destination within PDF in a webpage as found on this page,
Citation start:
"
Linking to a destination is essentially the same principle but involves a few more
steps
and setting up. First up, you'll need to create the destination.
Creating a destination in a PDF using Adobe Acrobat:
Manually navigate through the PDF for the desired location, and magnification.
Move your curser to the right of the PDF, in the navigation pane.
Right click and select destination. This will open the Destinations pane.
Right click, select New Destination enter an appropriate name and select the area that
you want the destination to link to.
NOTE: Make sure that the name does not have any spaces as it makes it easier to link to
afterwards.
You are now ready to link to the destination using a similar syntax as linking to a
specific page, instead of #page write #nameddest.
Append "#nameddest=" and the name of your chosen destination. So, if your PDF has a
named destination, "TOC", that points to a table of contents, then your link code will
look like this:
Link Text
"