I have some images in a folder with the .JPG extension. I want to change the image extension to .PNG programmatically. My earlier post is here: https://stackoverflow.com/questions/15428521/read-a-file-extension-and-change-that-extension.
$.ajax({
type: "GET",
url: "aa.jpg",
dataType: "snapshot",
success: function (snapshot)
{
try
{
var src = $(this).attr("url");
$(src).attr('src',$(this).attr('url').replace('.jpg','png'));
}
catch(ex)
{
alert(ex);
}
}
});
After reading both your question I realise that you want to rename files on the client.
This cannot be done using jQuery alone. Normal javascript engines do not allow access to filesystems on client side.
You need something a little more powerful - on windows that would be an ActiveX object. If you're on another OS, or a browser which does not support ActiveX, I don't know how to help you.
Here you can find an example.
Related
I am developing a startpage where users can add links to the page by using a formular. They can add name, url, description and upload an image.
I want to automate the process of uploading an image, the image should be captured automatically. My script should take a screenshot of the website which the user entered in url. I know I can take screenshots of html elements by using html2canvas.
Approach 1
My first approach was to load the external website to an iframe, but this does not work because some pages are restricting this, e.g. even the iframe tutorial on w3schools.com does not work and I get Refused to display 'https://www.w3schools.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
HTML
<div id="capture" style="padding: 10px; color: black;">
<iframe src="https://www.w3schools.com"></iframe>
</div>
Approach 2
My next approach was to make a call to my webserver, which loads the target website and returns the html to the client. This works, but the target site is not getting rendered properly, e.g. images are not loading. (see screenshot below)
HTML
<div id="capture" style="padding: 10px; color: black;"></div>
JS
var testURL = "http://www.google.de";
$.ajax({
url: "http://server/ajax.php",
method: "POST",
data: { url: testURL},
success: function(response) {
$("#capture").html(response);
console.log(response);
html2canvas(document.querySelector("#capture")).then(
canvas => {
document.body.appendChild(canvas);
}
);
}
});
PHP
if (!empty($_POST['url'])) {
$url = filter_input(INPUT_POST, "url");
}
$c = curl_init($url);
curl_setopt($c, CURLOPT_RETURNTRANSFER, true);
//curl_setopt(... other options you want...)
$html = curl_exec($c);
if (curl_error($c))
die(curl_error($c));
// Get the status code
$status = curl_getinfo($c, CURLINFO_HTTP_CODE);
curl_close($c);
echo $html;
Is it possible to achieve this?
Update
I managed to load some pictures by changing my ajax, but they are not rendered by html2canvas.??
var testURL = "http://www.google.de";
$.ajax({
url: "http://server/ajax.php",
method: "POST",
data: { url: testURL},
success: function(response) {
response = response.replace(/href="\//g, 'href="'+testURL +"/");
response = response.replace(/src="\//g, 'src="'+testURL +"/");
response = response.replace(/content="\//g, 'content="'+testURL +"/");
$("#capture").html(response);
console.log(response);
html2canvas(document.querySelector("#capture")).then(
canvas => {
document.body.appendChild(canvas);
}
);
}
});
Result
Result Canvas
I love php, but for screenshots I found that using phantomjs provide the best results
Example file screenshot.js
var page = require('webpage').create();
page.open('https://stackoverflow.com/', function() {
page.render('out.png');
phantom.exit();
});
Then from the shell:
phantomjs screenshot.js
Or from php:
exec("phantomjs screenshot.js &");
The goal here is to generate the js file from php.
Result in a file called out.png in the same folder. This is a full height page screenshot.
Example output
We can also take good captures with Firefox from the command line. This require X anyway.
firefox -screenshot test.png http://www.google.de --window-size=1280,1000
Example output
Not in pure php. Nowadays major number of sites generates content dynamically with js. It can be rendered only by browsers, but good news - there is something called phantomjs - browser without UI. It can do job for You, even they have working example in their tutorials which I succesfully implemented few years ago with small knowledge of javascript.
There is alternative library called a nightmarejs - I know this only from friends opinion which says that it's simpler than phantom, but I won't guarantee to You that it won't be a nightmare - personally I hadn't use it.
It is possible, but if you want an screenshot you need something like a browser that render the page for you. The iframe approach go in that way. But iframe is the page itself. If you want a .jpg , .png or something like that, the best way in my opinion is using wkhtmltoimage. https://wkhtmltopdf.org/.
The idea is that you install Qt WebKit rendering engine in your server, just as you install a browser in your server, this render the page and save the final result in a file. When some user submit a url, you pass it as argument to wkhtmltopdf then you could have an image of that url. The basic use could be somethig like
wkhtmltoimage http://www.example1.com /var/www/pages/example1.jpg
you should run that statement in bash, from php could be:
<?php
exec('wkhtmltoimage http://www.example1.com /var/www/pages/example1.jpg');
?>
Keep in mind that wkhtmltoimage execute css, javascript.., everything. Just like browser.
I have some problem with MS Edge 20.10240.16384.0 (the newest versions has the same error).
I'm trying to download file with JS (clear JS, I have no opportunity to use any libraries). Here is the way I'm doing this:
window.open(url);
Where url variable is an URL to file which I want to download. Opening that URL instantly causes file download. The problem is that the downloaded file has no extension and it's name looks like
'=_UTF-8_B_dGVzdEZpbGVOYW1lLV9kc2FkLnBkZg==_='
The original file name is 'test.pdf' and my method works perfect with Chrome, Firefox and IE11.
Are there any solutions?
Thanks.
Took me a good few hours and found out that if file name has '£' character, the file gets download as txt with random characters as the file name.
Added code in the API to replace '£' with 'GBP' for the file name.
File download works perfectly fine now.
Weird thing is that I check all characters against Path.InvalidPathChar() list provided with System.IO.File class. Yet '£' throws an error. And that's also why I couldn't get the issue right away as I know '£' is an allowed character.
File download tested with ASP.Net MVC WebApi.
Both IE and Edge keep failing but Chrome and Mozilla works without an issue.
Somehow to fix that error in MS Edge. We can do something stupid like this.
I don't know about the your server's programming language. So I simply post you a flow-chart about it for you to implement it.
Here's a client code:
(I am sorry that I used a library (jQuery))
var uid = "12093ujdskf3";
var url;
$.ajax({
dataType: "json",
url: "http://www.example.com/download.jsp",
data: {
uid: uid
},
error: function(){
url = null;
},
success: function(data){
url = data.url;
}
});
if (url == null){
alert("Error occurred!");
return;
}
window.open(url);
I have created html5 based app in Titanium for ipad. Using Titanium I have stored a file named demo.txt in
/Users/anonymous/Library/Developer/CoreSimulator/Devices/FE1CFXXX0AC-D5BD-9615-C58D80B5A9C6/data/Containers/Data/Application/2D25XXXX-4687-B28A-1EA7B7EA3013/Documents/
in same application itself. Now I need to want to access content of demo.txt in my index.html. Anyone having idea regarding this please help me out.
You can use similar technique to read a file:
var pagesDetailFile = Ti.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, "demo.txt");
alert(pagesDetailFile.read()); // Read the file
pagesDetailFile = null; // remember to release the file
You should read the documentation carefully for available functions.
You will have to use the techniques described at https://appcelerator.github.io/appc-docs/platform/latest/#!/guide/Communication_Between_WebViews_and_Titanium to fire an event in the WebView HTML which you'd pick up in Titanium JS, get the file and then use evalJS or fireEvent to send it back to the WebView HTML.
I used jquery in order to read data from the simulator and it works for devices too.
var filePath = "/Users/anonymous/Library/Developer/CoreSimulator/Devices/FE1CFXXX0AC-D5BD-9615-C58D80B5A9C6/data/Containers/Data/Application/2D25XXXX-4687-B28A-1EA7B7EA3013/Documents/admin/content.txt";
$.ajax({
url: filePath,
context: document.body,
async: false,
success: function(response){
Ti.API.info("FILE CONTENT " + response);
},
error: function(data){
alert('does not exist');
}
});
filePath is actual path in which we are storing data.
I'm working with Play Framework (using the port 9000). When I use Ajax indicating the URL to a txt I try to indicate it in the following way:
...
<script>
var fileContent;
$.ajax({
url : "http://localhost:9000/text.txt",
dataType: "text",
...
</script>
...
The text file "text.txt" is on the same folder as the html file that calls it. However, when I try to access it, I just can't in this way. I did set up Apache yesterday to test it and I did try typing
http://localhost/text.txt
in the web browser and it loads, but when I do that with Play, it does not allow me. Any ideas? Thanks!
I am developing a simple Mobile App that displays currency rates from an XML file. Now, the problem is that I read the XML from my server so I have to put the full URL in .ajax but it dosen't seem to work with external URLs. Can someone tell me how can I fix this or how to replace the code so it will work?
$(document).ready(function() {
$.ajax({
type: "GET",
url: "http://www.domain.com/currencies.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('Currency').each(function(){
var Name = $(this).find('Name').text();
var ValueUSD = $(this).find('ValueUSD').text();
var ValueEUR = $(this).find('ValueEUR').text();
var ExValueUSD = $(this).find('ExValueUSD').text();
var ExValueEUR = $(this).find('ExValueEUR').text();
$('#content').append('<div class="currencyBox"><div class="currency">'+Name+'</div><div class="tab1"><div class="half">'+ValueUSD+'</div><div class="half">'+ValueEUR+'</div></div><div class="tab2"><div class="half">'+ExValueUSD+'</div><div class="half">'+ExValueEUR+'</div></div></div>');
});
}
});
});
</script>
Look at jquery doc about jsonp. There is possibility to do cross site request in html5 especially, however most tools (firebug, noscript, adblock) and some browsers on default are bloking such requests. So I would stick to jsonp as most reliable source.
Ajax Doesnot work with Cross-Domain due to same origin policy. Try JSONP in such case.