How to save indirectly loaded images from webpages - javascript

I know that most of the media in web pages are temporarily stored to a temp folder or browser cache. Some are directly embedded in web pages so that we can see the source and can save them. But how to save images loaded using any other method?
You can see what I am talking about here. Is there any solution to save images from this site's gallery?

Yes there is a way to save the images by using the followings
1) Mozilla Firefox
2) Firebug
open the net console in it and select the tab named images
in that u can see all the images and save the images
for your reference, I attached a image.
then copy the location by right click and paste the location
and get the image.
~~~~~~ Happy Coding ~~~~~~~~~~~

Generally, js can't hold the image itself. but the Attribute src, a string instead. And js cannot handle the file on client, you can't modify, move, or copy files. So if you want to keep the images, you can send a http header like if-Modified-Since on server side with php or java, then the browser will not load the image again.
May this will help you. Good Luck!

You could try to use a offline browser.
They save whole webpages and deeping on software they catch more or less.
Offline Browsers

Related

How to save uploaded image in any particular folder

I am new to web dev and currently building a very basic page using Html/CSS and JS where users can upload the image and I can download it in my local system. But by default images are getting downloaded in the 'download' section of my desktop and I want to save them to any specific folder. How can I add this functionality?
You can't.
You do not have access to other peoples file managers as that would be a major security risk.
Uhh... You can't manipulate the download folder from frontend. It may be a security risk.
This cannot be done by Javascript (otherwise we could all produce websites which saved files all over a user's local PC).
As the end user in this case you can go into your browser and tell it which folder to save downloads in by default. (And remember to change it back if you want any other downloads to go elsewhere).
Here for example is what I find on Edge on Windows10 when going into Settings>Downloads:

Manual file caching in JavaScript

I have an HTML based project that works with media from other websites, which embeds images / songs / videos using their direct links. The system works perfectly so far, but I wish to make a change: As a lot of assets are accessed repeatedly by viewers, it would seem more optimal to cache them in a controlled way, so whenever certain media pops up you don't need to fetch it from the origin server each time. I never did this before so I don't know if and how it can be done.
To use an oversimplification: I have an embedded photo called "image.png" inside an image element, which will show up whenever I open the site. Currently it's simply defined as:
<img scr="https://foo.bar/image.png">
Works perfectly! However I want to make sure that when my site is accessed, you don't need to fetch that image from foo.bar each time: You will keep it in a local directory after downloading it once, from which the script can fetch and work with the file independently. For Firefox for instance, this subdirectory would be inside your ~/.mozilla/firefox/my_profile directory. Ideally it can be defined using a fixed name, so no matter which URL the website is opened from it uses the same cache path instead of each mirror of the project generating its own.
First, my script must tell the browser to download https://foo.bar/image.png and store it into this cache subdirectory. After that, it would need to generate a link to embed it directly from that subdirectory, so the URL I use would now be something of the following form:
<img scr="file://path_to_cache/image.png">
How do I do those two things, in a way that's compatible across popular web browsers? As a bonus, it would be useful to know if I can limit the size of this cache directory, so once it reaches say 100 MB the oldest items will be removed to stay under that size.
You could alternately add caching to your server's .htaccess file.
This site explains how: https://www.siteground.com/kb/leverage-browser-caching/
However this does not cache the image on the user's machine, it is cached on the server for quicker response.
You could use service workers to cache images on the user's machine.
https://developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker
Hope this helps.

PhoneGap show downloaded image in iframe

I have a PhoneGap application in which I need to download certain images for offline usage and show those inside an iframe. Is this possible and do I need something like CorHTTPD (https://github.com/floatinghotpot/cordova-httpd) to serve the assets locally?
I have been trying to store the files on file system but when I try to show those (even without being inside iframe), those doesn't show. They seem to be loaded (can be seen in network console in remote debugging), though, but (of course) without any headers.
After spending more and more time on this and settings GapDebug correctly to remote debug my application, I was finally able to solve my problem by giving
{responseType: "arraybuffer"}
to AngularJS's $http.get method as config parameter as described here. Now I am able to get the images to ArrayBuffer correctly and from there to base64 encode them to be added inside HTML stored offline. Suitable solution for my case at least..

Upload a <img> to server without going through canvas?

It would concern images which have their src pointing to other domains or as file://. (user pasting html code into tinymce)
Basically:
I have to do this client side (can't download from server)
I only need to support firefox
I'm using javascript and html5 and if possible plupload
I'm worried that canvas only returns raw pixel data and that the original compression of the image gets lost.
It just seems wrong to make a second copy in memory and then convert it to data:// to upload a file the browser already has in memory. (by the way base64 data is usually a lot bigger than binary)
I am hoping it would be possible to tell firefox to upload a file from it's memory cache or use the FileReader or Blob functionality.
edit: if this is correct, it won't even work cross-domain with canvas.
As far as I understand it, this is impossible due to security limitations preventing javascript from accessing any data that has come from another domain.
It looks like I would have to write a firefox addon in order to enable this. Not quite the same level of service if users have to install an addon though.
**you can use other domains using don not use src image filed use upload manger to this
you can use other way by put .** <img src = '/*url*/' ></img>

How to open local images from browser and display them at the center of the page?

I want my browser to open my local images and to place them at the center of my browser. The only way I could think of is by coding an HTML+CSS file, but I don't want to use PHP or ASP.NET cause I don't want to run a server. So javascript is a solution to this.
So, is there a way for an HTML+Javascript file to display a list of my local files, and after clicking at the image I want, the image name to be saved to a variable in order to display this image to my html with img src using the css style I want?
Thanks in advance!
This is only possible with some kind of special file system that is based on XML (I've seen this once)
You need to create a XML index file (or some other format you can get with XMLHTTP Web Requests and parse with JavaScript) that contains all information about the images (System location, maybe some kind of ID, alt/title attributes etc.)
Then you load that file with a XMLHTTP Request, parse the data and print it as HTML with correct links to the images.
JavaScript itself can't read the file system, it can request single files only
Accessing local filesystem from Javascript inside a browser is a pretty taboo thing mostly. See this related question.

Categories