Get image source from an HTML page - javascript

I have a page on a website that is just an image tag. When the page is loaded, it makes an API call and changes the source of the image depending what picture is available that day. For example, after an API call has been made (with an example picture):
<head>
<body>
<img src="http://www.tizag.com/pics/htmlT/sunset.gif"/>
</body>
</head>
My goal is to be able to use the URL of the page with just the image as the source of an image on any other page. Other sites would then be able to use the URL of the page with the image.
In other words, how would I take the source of the image on the page above and use it is the source of an image on a different page?

I'm not sure that I completely understand Your issue, but can't You just use the same source URL on other pages?
Maybe You want to have reference to that image so when You want to change this image on all pages You wouldn't have to do this on all pages but just one. Then it would be simpler to just replace file.
I think you should use javascript script that would be verifying which image should be displayed.

Can't you just use the same API to get the source on the other site?
If you can't:
First, get the XML from the image-only-site and parse it as DOM elements.
Next, get the img element's source.
$.ajax({
url: 'your-url', success: function(data) {
var xmlString = data, parser = new DOMParser(),
doc = parser.parseFromString(xmlString, "text/xml");
var src = doc.firstChild.src;
}
});

Related

DataTransfer an image from same page gives URL but image from different page gives file

EDIT
The source of this problem is the behavior of the Edge browser, as identified by Sami. Firefox does the same thing, but Chrome works fine.
Original Question
I have a drop container for users to drag and drop an image to set an <input type="file"> with the image.
If the image is being dragged and dropped from a different page, the image is recognized as a file. However, if the image is dragged and dropped from the same page with the drop container, it is recognized as a URL.
Why isn't the image being recognized as a file when it is dragged and dropped from the same page as the drop container?
Here is the fiddle with the drop container and image file. When you drag the image file on this page into the drop container, it is recognized as a URL although I want it to be recognized as a file.
https://jsfiddle.net/nadf9c82/1/
Next, try dragging the image on this fiddle https://jsfiddle.net/7sqb5r0f/1/ into the drop container on the other fiddle and you will see it is recognized as a file, which is what I want.
Why do images on the same page as the drop container evaluate as URLs and not files? Is there a fix to make them recognized as files and not URLs?
Here is the code for reference
<div class="dropContainer" id="dropContainer">Drop Here</div>
<div id="imagetwo">
<img src="http://a.mktgcdn.com/p/khxNbcdQcr1HQKNgk9cPNUyWUprmZ5Dryx9P5MAV0SE/2669x3840.jpg" />
</div>
<script>
dropContainer.ondrop = function(evt) {
//evt.preventDefault();
if(evt.dataTransfer.files[0]){
console.log("is a file");
const dT = new DataTransfer();
dT.items.add(evt.dataTransfer.files[0]);
fileInput.files = dT.files;
}else{
// Try dataTransfer url second
var dataTransferUrl = evt.dataTransfer.getData('url');
if(dataTransferUrl){
console.log('is a url, not a file');
console.log(dataTransferUrl);
}
}
};
</script>
I think you can do it, but it won't work in Fiddle due to The page at 'https://jsfiddle.net/' was loaded over HTTPS, but requested an insecure resource ... the content must be served over HTTPS due to your HTTP request
Here's what I think, whenever you drop the image, it'll receive an URL instead of the file like you want. Then just make it into a file.
It's called convert your URL image to File object, if my way is not working, it's the keyword for you to have a look more, I hope it'll give you some ways to work around since I'm not good at this, too.
Replace this code of mine into your Try dataTransfer URL second part, but be warned that it'll fire an error on Fiddle due to HTTP request. So I've to replace the HTTP with HTTPS, but it'll get you the CORS Block, so if you have the extension to unblock CORS, it'll work, for development or testing purposes, of course.
let url = evt.dataTransfer.getData('url');
const urlArray = Array.from(url)
urlArray.splice(4, 0, 's')
const urlFinal = urlArray.join('')
fetch(urlFinal)
.then(async (res) => {
const contentType = await res.headers.get('Content-Type')
const blob = await response.blob()
const file = new File([blob], "image.jpeg", { contentType })
})
}
When I drop an image to Drop Here box, it'll create an Object File, so it'll count as a file instead of an URL, I think that's what you want, hope I can help you somehow.
Take an URL as an Object File after Dragging Image and Drop it into Drop Here Box

How to send just uploaded image to php without store it?

Hi I'll introducing my problem directly with the use case: I'm working on a sort of configurator and I have a web page (let's call it page1) where the user can upload an image. The image is showed normally in an img tag. When the user has uploaded the image he can go forward on the next page (let's call it page2). Now, on this page2 I want to show the image uploaded by user without storing the image. This is what I've tried 'till now:
Before to do this I've inserted in the json the src attribute of the image directly. But the browser gave me te error that the GET request is too long or something like that. So, I've found as solution to convert the image with base64:
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
function sendSelectedProducts()
{
var logo = document.getElementsByName('logo-container')[0];
var base64 = getBase64Image(logo);
console.log(base64);
var json_string = '{"img": "' + base64 + '" }';
console.log(json_string);
window.location.replace('riepilogo.php?prodotti=' + json_string);
}
So, what I'm doing with this code is to send a Json with a base64-converted image. On the PHP-side this is the code that tries to convert back the image:
function base64ToImage($base64_string, $output_file) {
$file = fopen($output_file, "wb");
$data = explode(',', $base64_string);
fwrite($file, base64_decode($base64_decode));
fclose($file);
return $output_file;
}
echo '<p>'.$img.'</p>';
echo '<a class="cart-image" href="#"><img src="'.base64ToImage($img, 'logo_file.jpg').'" alt="logo"></a>'?>
This code doesn't work and I'm looking for solution that does not store the image on the server. How can I do?
You don't need to decode the image from base64, just do this:
echo '<a class="cart-image" href="#"><img src="data:'.$img.'" alt="logo"></a>'?>
where $img is the image in base64 format. For more info see: How to display Base64 images in HTML?
You can save the selected file (for example in a window var or local storage) and render the image in the next page using canvas.
See following example, please:
function saveImage(img) {
window.file = img.files[0];
}
function loadImage() {
let ctx = document.getElementById('canvas').getContext('2d');
let url = URL.createObjectURL(window.file);
let img = new Image();
img.onload = function() {
ctx.drawImage(img, 20, 20);
}
img.src = url;
}
<input type="file" id="imgFile" onchange="saveImage(this);" />
<button onclick="loadImage()">Load image</button>
<canvas width="400" height="300" id="canvas"/>
You should put saveImage in the first page and loadImage in the second page.
I hope it was clear. Bye.
You need to know how HTTP works to understand why what you're doing is not going to work.
HTTP is the way browsers and Web servers (which can run PHP code) communicate.
One important thing to keep in mind here is that between any two Web pages there is no state to share for the Web server -- this is why HTTP is often called a stateless protocol. That's a good thing -- it saves on a lot of unneeded complexity for the Web server (and PHP).
I would not recommend attempting to circumvent the stateless nature of HTTP with things like window.localStorage (or sessionStorage for that matter) -- what if the user has loaded several instances of the same Web page on your website? How are you going to know which objects in your storage correspond to which upload workflow(s)?
I've seen many people try to do that, and it always breaks eventually.
There are several good ways to solve the "stateless" problem in your case -- how can a file uploaded with one Web page, be accessible to another, and yet making the file also available to the Web server?
In this answer I want to cover a so-called single Web page application solution, where you simply do away with two Web pages and instead have one Web page that does everything! This way you keep the state on the client but also in a clean manner that aligns well with how HTTP actually works:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form enctype="multipart/form-data" method="post" action="http://httpbin.org/post">
<label for="file-input">Select an image file</label>
<input accept="image/*" id="file-input" name="image" type="file">
<label for="file-selection-preview-image">Selected image</label>
<img id="file-selection-preview-image"><!-- this element will display selected image. -->
<input type="submit">
<script>
const form = document.currentScript.parentElement, file_input = form.elements.image;
file_input.addEventListener("change", function(ev) { /// Whenever the selection changes
const files = ev.target.files;
console.assert(files.length == 1); /// Assert that there is only one file selected
console.assert(files[0].type.startsWith("image/")); /// Assert that the selected file is an image
const image = form.querySelector("img");
if(image.src) URL.revokeObjectURL(image.src); /// The kind of URLs we are dealing with refer to in-memory objects, so we have to dispose of them when we no longer need them -- the user agent does not do this for us automatically.
image.src = URL.createObjectURL(files[0]); /// Display selected file with the `img` element
});
/// User agent is free to retain file selection even after the Web page has been re-loaded, so if there is [a selection], we fire a "change" event manually so that the handler defined above may reflect this as it ordinarily would.
if(file_input.files.length) file_input.dispatchEvent(new Event("change", { bubbles: true }));
</script>
</form>
</body>
</html>
The above HTML document is set up with a simple form (which will let you upload files to your Web server even without JavaScript enabled). It contains a file input control that lets you actually select files (a single image file, since the input element does not contain the multiple attribute and specifies image/* for the accept attribute).
However, it also contains an img element which a script uses to load and display the selected image file with, immediately upon selection. I understand from your question that this may satisfy your requirement of accessing the selected file. The file is a Blob so you can do what you want with it, including drawing it in a canvas and modifying it otherwise. Here I just display it as an image.
The interesting property of the Web page is that while preview of the selected image only works through JavaScript, the form will still submit the selected file even without JavaScript. The user agent will post form data (image) to a convenient test server (at http://httpbin.com/post), which just happens to echo back your uploaded content in the form of a JSON file. With own service, you can handle the data yourself.
This solves the problem of multiple Web pages needing to share access to selected file, which would, if implemented properly, at least require uploading the file first and then accessing it from a URL the upload establishes on your Web server. Not necessarily more complicated than the solution in this answer, in fact arguably less complicated because it's how it has been done before JavaScript started allowing the kind of things I make use of in the document pasted above. But I would argue that this answer that covers a so-called single-page Web application, should fit you fine in this day and age.
That said, I consider a pure PHP solution to be interesting as well, and can pen up another answer should anyone wish to see one.

how to display content instead of download as a file when firing GET Request?

I have a webpage which will display API response in tabular format. I developed this using Angular Js, Sevlets, Java- Rest Assured framework.
Each record in the table has a link to a log file which is an url coming as rest api response.
When I give it as an anchor tag and when I click it from the UI a file is getting downloaded instead of openning in a popup window.
My question here is how can I get the data from url instead of download it as file when user clicks on the link.
<td> <a ng-href="{{item.outputuri}}" target="_blank">Click Log
</a>
</td>
I have read several posts and got to know that we need to set content disposition at server side. But Its not possible so I want to handle it from Client side.
Thanks in advance.
Instead of trying to going to a separate url, how about displaying the content directly on the same page? You can display the content by dynamically creating an IFRAME element and inserting into host directly on your page.
The displayContent method below requests the url and then passes the content to createIframe. That method will create the IFRAME element and write the content to it. I added the base element to the content to make sure any relative links are rendered correctly.
this.displayContent = function(url) {
$http.get(url).then(res => this.createIfram(url, res.data, this.hostElem);
}
this.createIframe = function(baseUrl, content, appendToElem) {
var iframe = document.createElement('iframe');
iframe.className = 'content';
appendToElem.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write('<base href="' + baseUrl + '" />');
iframe.contentWindow.document.write(content);
iframe.contentWindow.document.close();
// do some other processing on the document
}

return the first image src of a page with Js?

I'm writing a Google Chrome extension and I want to show the first image of a webpage (for instance: a blog) in the popup.htm. So far I know how to implement the favicon so I was trying to work backwards and edit the favicon into the first image of the page. The problem is the favicon was so simple! All I had to write for a given variable was
function favicon(a)
{
return "chrome.../" +a;
}
Now, I can find the img.src of a background page. But I'm not sure how to find one of a unique page (submitted by the user). I've googled every way my vocabulary permits and so far have come up with this...
function getLavicon(a)
{
/*
find first image on page requested
get url of first image
return url
*/
return $(localStorage.getItem(a)).find('img').first().attr('src');
}
It returns a blank image. Let me know if screenshots are necessary.
Why use jQuery for this ? You can get the first image url on the page by using the following code:
var firstImage = document.getElementsByTagName("img")[0];
console.log(firstImage.src) // This will print out the source of the image on the console
Now you can use the source of the first image whenever you want just by using firstImage.src
Pretty sweet and clean huh ? :)

access word doc from javascript?

I have tried to load (embed) the .doc file into the html page using object tag. And it doesn't show the word toolbar. My requirement is to allow the user to print the doc from print option in word.
Is there a possible way in javascript to enable the word toolbars??
And I have tried another approach using the ActiveXObject.. but this method opens the document in winword.exe.. is there a way to embed the .doc file through javascript..?
EDIT:
I was looking for other possibilities, but nothing works
Anybody got an idea about the list of params available for the Word ActiveX?
Maybe that could contain the property to enable toolbars on load..
I used the below code to load .doc content to ActiveX Word Document control
var objWord = new ActiveXObject("Word.Application");
objWord.Visible=false;
var Doc=new ActiveXObject("Word.Document");
Doc=objWord.Documents.Add("c:\\test.doc", true);
Is there a way to render the DOC element directly into HTML.. like putting this element in iframe or whatever??
I was assigning the iframe source property directly to the doc file, like this
<iframe id="sam" src="c:\\test.doc">
this loads the doc into browser, but this prompt to open a downloader window.
I'd really appreciate any hint that lead me to some direction.
<HTML>
<HEAD>
<TITLE>MSWORD App through JavaScript</TITLE>
</HEAD>
<BODY>
<script>
var w=new ActiveXObject('Word.Application');
var docText;
var obj;
if (w != null)
{
w.Visible = true; // you can change here visible or not
obj=w.Documents.Open("C:\\A.doc");
docText = obj.Content;
w.Selection.TypeText("Hello");
w.Documents.Save();
document.write(docText);//Print on webpage
/*The Above Code Opens existing Document
set w.Visible=false
*/
/*Below code will create doc file and add data to it and will close*/
w.Documents.Add();
w.Selection.TypeText("Writing This Message ....");
w.Documents.Save("c:\\doc_From_javaScript.doc");
w.Quit();
/*Don't forget
set w.Visible=false */
}
As far as I know there's no way to force this to be opened in a browser. Simply because the server will send the mime type of a word document, from that point on it is up to the client to decide what to do with it and a majority are set to download. There are however some registry tweaks that you can do on a client machine to force the client machine to view word documents inside of internet explorer.

Categories