Replace all Imgur URL with JavaScript - javascript

My blog stores images at Imgur, but it loads too slowly. Using JavaScript I want to replace all URLs of the form
https://i.imgur.com/xxxxxx.png
to
https://example.net/imgur/xxxxxx.png

You don't need any Javascript to do this, just create a folder in your directory where your blog site's files are and download the images and put them in that folder and it should work.

You could use a regex replacement:
var url = "https://i.imgur.com/image.png";
var output = url.replace(/https:\/\/i.imgur.com\/(\S+)\.png/g, "https://example.net/imgur/$1.png");
console.log(url);
console.log(output);

Related

Use javascript variable as file name to download file with href

I have a javascript code that extracts filename as a variable from the current html file. The filename, for example, is "new.html" filename variable is successfully used to append href where I need to open same file strored in another folder. Using the same code, I need to append this variable to a folder path with href tag to download a file with href tag. The file name is extracted from .html (example new) and added to .xls file (example new.xls)
var filename=location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
console.log(filename);
document.getElementById("htag1").href= "Foldername/"+filename;
var object=filename.slice(0,-5);
var xls=".xls";
var xlsfile=object+xls;
$(".xlsfile").text(xlsfile);
console.log(xlsfile);
document.getElementById("d1tag1").href= "Foldername/"+xlsfile;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
#working
#not working
####working download code####
But this is giving me download error with no file getting downloaded
but it is pointing to the right path. Should I use another way for download feature? Before this I had entered the file path statically which seemed to work.
Any help would be appreciated! Thank you!
Try this way, i'm sure now it will work ^^
var filename=location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
console.log(filename);
document.getElementById("htag1").href= "Foldername/"+filename;
var object=filename.split(".")[0];
var xls=".xls";
var xlsfile=object+xls;
$(".xlsfile").text(xlsfile);
console.log(xlsfile);
document.getElementById("d1tag1").href= "Foldername/"+xlsfile;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
#working
#not working
####working download code####

Get the Image URLs from Top.Images object

I'm working with a website that generates lots of images that I want to save to disk. To do so I need to get a list of URLs containing all the images.
The above picture was taking from the Application tab of Google Chrome's debugging tools. Each of the 'green' files is a 'stored image' or rather, a referenced image URL.
How can I access this list from JavaScript console?
If it is not possible to access this folder/object from javascript, would it be possible to:
Query some database on disk that might contain the files.
Access the files via the Internet Explorer ActiveX Object?
var resources = window.performance.getEntriesByType("resource");
resources.forEach(function (resource) {
console.log(resource.name);
});
The above will list all of the files specified.
var resources = window.performance.getEntriesByType("resource");
resources.forEach(function (resource) {
if (resource.name.indexOf(".png") > -1 || resource.name.indexOf(".jpg")> -1)
console.log(resource.name);
});
As #Sancarn said with my extras line this function will writes all the images that have .png or .jpg as an extension. try it and let me know.

How would I find a html files parent directory name?

I need to know a html files parent directory so I can access a file in it named the same as the directory. I just need the directory name as a string.
You can try something like
window.location.pathname
But again depends on what you are trying to achieve, show some code.
Background
As #NewUser says, use window.location.pathname if you want only the path. Example: on this page, that gives:
/questions/25717173/how-would-i-find-a-html-files-parent-directory-name
You indicated that you are dealing with an HTML file, though, which implies a file name and file ending (.htm, .html, etc.). So, to get the full URL, minus the file name, you can try using .replace(/[^\/]+$/, ''), like this:
var url = 'http://www.example.com/foo/bar/baz.htm';
alert(url.replace(/[^\/]+$/, ''));
// gives http://www.example.com/foo/bar/
Putting It All Together
To do it without hard-coding the URL:
var path = window.location.toString().replace(/[^\/]+$/, '');
alert(path);

Window location one level up

This is my scenario:
I have my web page in folder:
http://www.example.com/example/index.html
I have media files in folder (one level up):
http://www.example.com/media/
and this files are linked in index.html like so: '../song1.mp3'
So when I read window.location.href from my web page I get this:
http://www.example.com/example/
But my media files are in location http://www.example.com/media/
Now I want to construct a download path for this media, but if I join window.location.href and media url I get this:
http://www.example.com/example/../song1.mp3
and I need to get this:
http://www.example.com/media/song1.mp3
what is the easiest way to manage this?
I am using javascript.
How about this:
var filename = "../song1.mp3",
domain = "http://example.com/", // may be static or made by some black magic
url = domain + "media/" + filename.split("/").pop();
So you just split your path with the ../-part, get the last element (would be "song1.mp3") and put it together to http://example.com/media/song1.mp3
Here your have a live example.

Reading image capture files in PhoneGap

I'm working on a PhoneGap application that captures images using the camera and, later, uploads them. There are two modes of operation for camera in PhoneGap: raw base64 encoded data or a file URI.
The docs themselves say:
Note: The image quality of pictures taken using the camera on newer
devices is quite good. Encoding such images using Base64 has caused
memory issues on some of these devices (iPhone 4, BlackBerry Torch
9800). Therefore, using FILE_URI as the 'Camera.destinationType' is
highly recommended.
So I'm keen to use FILE_URI option. This works great and you can even show the images in IMG tags. The URL looks like this:
file://localhost/var/mobile/Applications/4FE4642B-944C-449BB-9BD6-1E442E47C7CE/tmp/photo_047.jpg
However, at some point later I want to read the contents of the file to upload to a server. I was going to do this using the FileReader type. This doesn't work and I think it's because I can't access the file at the URL above.
The error code I get back from readDataUrl is 1 > FileError.NOT_FOUND_ERR = 1;
Any ideas how I can get to the file? I tried just accessing the last part of the path (photo_047.jpg) based on another sample I saw but no luck.
I'm just getting started with PhoneGap, and given the age of this question you may have found an answer already, but I'll give it a try anyway.
First, would you be able to use the built-in FileTransfer object? It takes a file: URI as an argument.
If FileTransfer won't work for you, and you need to read the file data yourself, you'll need the PhoneGap File objects, like FileReader , as you said. But most of those expect a plain pathname -- not a URI -- to specify the file to work with. The reason you're getting NOT_FOUND_ERR is because it's trying to open a file named file:/localhost/var....
Here's a quick one-liner to extract the path part from your URI:
var path = /file:\/\/.*?(\/.*)/.exec(fileuri)[1];
Hope this helps!
The answer from jgarbers was of help to me but it did not solve the problem. I realized the camera stores photos in Temp folder instead of Document folder. Setting my local file system to temporary allowed it to find the correct location for the camera images.
window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, ...
...
window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, ...
...
var path = /file://.?(/.)/.exec(fileuri)[1];
Ref. above jgarbers and Rik answers (solution has been tested successfully on iOs 7)
you can user the file transfer plugin for uploading any file to the server.
//// pass your file uri to the mediafie param
function uploadFile(mediaFile) {
var ft = new FileTransfer();
path = mediaFile.fullPath;
name = mediaFile.name;
////your service method url
var objUrl = http://example.com;
ft.upload(path,
objUrl,
function (result) {
alert("Success");
},
function (error) {
alert('Error uploading file ' + path + ': ' + error.code);
},
{ fileName: name });
}

Categories