I'm working with evernote api on iOS, and want to translate enml to html. How to translate en-media to img? for example:
en-media:
<en-media type="image/jpeg" width="1200" hash="317ba2d234cd395150f2789cd574c722" height="1600" />
img:
<img src="imagePath"/>
I use core data to save information on iOS. So I can't give the local path of img file to "src = ". How to deal with this problem?
The simplest way is embedding image data using Data URI:
Find a Evernote Resource associated with this hash code.
Build the following Data URI (sorry for Java syntax, I'm not very familiar with Objective C):
String imgUrl = "data:" + resource.getMime() + ";base64," + java.util.prefs.Base64.byteArrayToBase64(resource.getData().getBody());
Create HTML img tag using imgUrl from (2).
Note: the following solution will allow you to display the image outside of the note's content.
On this page, you'll find the following url template:
https://host.evernote.com/shard/shardId/res/GUID
First compile the url from some variables, then point the html image src = the url.
In ruby, you might compile the url with a method similar to this one:
def resource_url
"https://#{EVERNOTE_HOST}/shard/#{self.note.notebook.user.evernote_shard_id}/res/#{self.evernote_id}"
end
...where self references the resource, EVERNOTE_HOST is equivalent to the host url (i.e. sandbox.evernote.com), evernote_shard_id is the user's shardId, and evernote_id is the user's guid.
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])
C# restapi client was used to create envelope with document
doc.DocumentBase64 = System.Convert.ToBase64String(fileBytes);
doc.Name = "TestFile.htm";
For embedding image in htm document i have unsuccessfully used these options
Option1 img src data:image/png;base64
Option 2 img src data:image/svg+xml;
Reference for option 2 https://css-tricks.com/probably-dont-base64-svg/
I guess with option 1 ,there is issue of double encoding as base64 .
Request help. Thanks in advance
You can create an mhtml style of html and upload it as an html file. It can include images.
See https://en.m.wikipedia.org/wiki/MHTML
I'm using asset pipeline in Grails 2.5.x. I'm put the img folder which contains images into asset folder.
However in js file, I cannot use <assets:image tag in the image path.
For example:
controlHTML: '<img src="../img/up.png" style="width:40px; height:40px" />'
I can get to the path but in web inspect element, the path is incorrect: 'localhost:9090/CardReg/img/up.png'
Error when I put
controlHTML: '<img src="<asset:image src='../img/up.png'/>" style="width:40px; height:40px" />'
Any ideas?
Any solutions will be appreciated. Thanks you.
Grails tags are not usable from within a .js context. Only from within a .gsp
I would recommend putting
<asset:script>
var contextPath = "${request.contextPath}";
</asset:script>
In your main gsp layout file, and then from your js you can reference images via
var myImage = contextPath + "/assets/myImage.jpg"
I also recommend practicing smart javascript, so you might want to put any of these layout variables declared into an object to act as a namespace.
Also make sure that the script block is the very first script imported.
We want to develop a widget to upload images to containers. This is a very well documented task:
1.- Object Storage Tutorial
2.- Fireware-Wiki
3.- OpenStack Object Storage Docs (Swift)
With all this you can manage to get (download), upload, delete files in a container. This is relatively clear.
On the other hand, we want to develop another widget to display images stored in a container. I think in something like this to show them:
<img src="public_object_url"/>
But I do not know how to do that. Where I get this public URL? Is there a public URL? Is it get in some step during the uploading process?
I am a bit lost how to do that. Any help would be highly appreciated.
Thanks in advance.
EDIT 1
We get blocked displaying images once they are downloaded.
A look inside "img" tags shows this:
what is the string returned by URL.createObjectURL(). If we look inside this link, the browser displays this:
We have decoded the string coming in the property "value" and the image is there!
To get the image from the object storage server we used a very similar code that the one used in the operator Álvaro recommended.
objectstorage.getFile( containerName,
reports[i].urlImagen,{
token: token,
onSuccess: onGetFileSuccess.bind(null, i),
onFailure: onGetFileFailure
});
function onGetFileSuccess(index, picture){
downloadedPicsCont--;
reports[index].urlImagen = URL.createObjectURL(picture);
if(!(downloadedPicsCont > 0)){
MashupPlatform.wiring.pushEvent('reports_output', JSON.stringify(reports));
}
}
The picture variable has the following structure, which seems to be ok too.
What is it happening?
EDIT 2
Finally, we found the reason. We were downloading images that were created directly from the cloud and not with objectStorageAPI. In you upload images from the cloud, when you download them you get them inside cdmi objects so the URL.createObjectURL doesn't not work as expected. In the other hand, if you upload them using objectStorageAPI, when downloading them, they come in raw format, so the method works correctly.
As far as I know, FIWARE Object Storage needs authentication, so there are no such public URL. But... you can download the image using your credentials and then use the URL.createObjectURL method for getting an URL usable in the src attribute of the img element.
It's a bit old, but you can use this operator as reference.
I saved some files via MongoDBs gridFS into my database.
I know how to retrieve files just with php in my browser:
header('Content-type: '.$object->file['filetype']);
echo $object->getBytes();
That works perfectly fine. But I now wan't to put the image in a context.
e.g.
<img><?php echo $object->getBytes(); ?></img>
If I put the code
echo $object->getBytes();
in a htmlpage, I just get the image like this:
����JFIFHH��C !"$"$��C���Y"�� ��O!"12AQaq�BR��#b��3Cr��$S����4���%cs�5&��DT�������&!1A"Q2q�#Ba��?�( �#�EUDDUU�#��(�?2� ��.h#k���.��d�M���(��=�]��Nk��E�gZz�GI�Вr���~+x������<{YZSm�n�N I�DAmDU������G���U:���H�6J̺'!lV�������D:H2��S��7��U;����7����������n��wV$�ʞ�i|��wP����?Qx۾�/�K'�:=���i�E�0)�E��4OU�G�W��`t] �������.�j��='�/�:9�V����봺a_}2����a_�D��J[r�J���f�6�B<���ѿc���=8�Q��1!("��B���⅝4<#��L���K�Iy�"���?�6�6�a7�k����%�F6�y��� v��
and so on...
does anybody know how I can embedd an image into a website???
Thanks
You should add a new PHP page that returns the image (with appropriate content-type and content-length headers) like your first sample above. Say that page is called "image.php". In your "main" page, then, you should construct an image tag like:
<img src="/path/to/image.php?..."/>
Where "..." is replaced with some query string to look up and serve the image you want (the string representation of the GridFS file's ObjectId in the _id field might do well here, or some other unique identifier).
If you're looking for in-doc images you could try
<img src="data:image/png;base64,����JFIFHH��C !"$"$��C���Y..." />
But dcrosta's method may be preferred depending on your overall intent.
You'll have to plug in the correct image type and encoding (or re-encode).