I have Jcrop on a video source, <img src ="http://ip_address/stream">
The html page displays the container with the video inside, but it is a still image. Once I click on the image, it updates. Once I click/drag to crop the video area, the area within the crop selection shows the video updating.
How do I get it so that the video stream is constantly updating before, and while, making a crop selection?
EDIT:
using the Inspect Element tools, on Network Monitor, the Status Code for the page that continuously updates the video regardless of having made a selection is: 200 OK
whereas the Status Code for the page with the video that does not update unless clicked is: 304 Not Modified
In order to force a refresh of the image every (say) 1 second you need to:
Use a javascript setInterval
Cachebust the image source if the filename isn't changing
for instance the following code
<img id="vidimg" src="Assets/img.jpg">
<script>
setInterval(function(){
document.getElementById("vidimg").src="Assets/img.jpg" +
"?cachebuster=" + Math.round(new Date().getTime() / 1000).toString() },
1000);
</script>
the setInterval(... ,1000); causes the function within to repeat every 1000 milliseconds (once a second) - you may want to adjust this depending on the download speed/refresh rate of the image source you are using. The function can be inline, as I have done here, or if there is more complex logic involved you can make it a named function and reference that instead.
the document.getElementById("vidimg").src="Assets/img.jpg" simply reloads the image source - on its own this may cause the browser to attempt to be smart if the image appears to be the same as what is already cached, so you need to add a random parameter to the filename in order to force it to re-fetch from the server, hence the + "?cachebuster=" + Math.round(new Date().getTime() / 1000).toString() which just adds a parameter based on the current time.
If your source doesn't have a filename (as in the example in your question) then adding the cachebuster should still work.
As I don't have access to a source like the one you describe I've not been able to test this, but in theory it should work. Alternatively can you not use a <video src ="http://ip_address/stream"> to access it?
Related
First, this is the live website in question: https://severnlodge.com/about-us/webcam/
This is the juryrigged script we are using:
var t = 60 // interval in seconds
image1 = "https://severnlodge.com/wp-content/webcam/webcam.jpg" //name of the image
function Start() {
tmp = new Date();
tmp = "?"+tmp.getTime()
document.images["refresh1"].src = image1+tmp
setTimeout("Start()", t*1000)
}
Start();
<header('Cache-Control: max-age=0, must-revalidate')>
<img src="https://severnlodge.com/wp-content/webcam/webcam.jpg" alt="Severn Lodge Webcam - T-dock" width="100%" name="refresh1"/>
We have a client who has two webcams that upload an image (webcam.jpg or webcam2.jpg) every 60 seconds. The images are about 150kb each and override the prior image upon being uploaded. We are trying to produce a page that displays these two images and refreshes both images roughly every 60 seconds.
Now this mostly works. Except for sometimes when it loads either webcam.jpg or webcam2.jpg it will display a broken image link or a partial image. I assume this is because the refresh is trying to load the image before it's fully updated? I am not a coder, but I have been tasked with trying to figure this out...
So is there a type of code to make sure the file is "completely uploaded" before it tries to load? Or a way where if the image breaks, it tries again immediately?
Please excuse my lack of knowledge, this type of thing is normally out of my wheelhouse.
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 ? :)
I am using KineticJS to create a web application which is a standalone application using html5, css and javascript.
I have the following piece of code to convert the present canvas into an imageURI.
function save()
{
stage.toDataURL({
callback: function(imageURL) {
window.open(imageURL);
},
mimeType: 'image/png',
quality: 1,
height: 480,
width: 640
});
}
The save() is triggered using a button's onclick property.
I have two issues to be solved :-
I want to be able to open a "Save As" dialog box when I click on this save button.
Rename the file, instead of "download.png" to present date time as the file name. For e.g., "020420130306PM.png" ( Date 02/04/2013 Time 0306 )
My stage size is 958 X 598 and I want to save the file as a 640 X 480. The height and width attributes in toDataURL function only crop off top 640 X 480 pixels of the canvas. How do I compress the entire stage ( 958 X 598 ) into a ( 640 X 480 ) and save it.
My present solution is the one stated in KineticJS tutorial which is click on the save button, new page opens up with canvas image, right click the image, save as image, rename file from download.png to 020420130306PM.png and click save.
I solved the third part using setScale method and it worked perfectly fine.
I solved the second part which is renaming the file, however, I am restricted to chrome browser, and without the ability to save it anywhere else other than the default downloads folder.
There exists a download attribute in <a> tags. If download = "myfilename.png"then the file will be downloaded as myfilename.png
First of all, to force the browser to download the file, you should modify the imageURI.
var newImageURL = imageURL.replace("data:image/png;base64","data:image/octet-stream;base64");
Now, to add and modify attributes just use jQuery attr() function along with click(). For e.g.,
$('#saveAnchor').attr('download',filename);
$('#saveAnchor').attr('href',newImageURL);
And now trigger a fake click on the anchor link using $('#saveAnchor')[0].click();
So basically when the save() is called, all the above occur in the callback function.
But I would still like know if there is any possible method of being able to save the image using "Save As" dialog box without the use of PHP or AJAX.
I am loading 10 GroundOverlays onto a GoogleMap and would like to show the progress associated with loading the images.
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(42.80059,-115.253806),
new google.maps.LatLng(47.481725,-110.227471));
var layer1 = new google.maps.GroundOverlay("overlays/layer1.png",imageBounds);
layer1.setOpacity(.5);
layer1.setMap(map);
How can I detect when the actual image of each overlay has loaded or the % loaded? I'd like to add a progress bar or something to show the user that overlays are loading as it can take 5 seconds or so.
If you have one single image as a groundoverlay, I'd do the following:
Create an img tag through javascript
Set its src to overlays/layer1.png
display a waiting box
Add an onload event to it, on which load it as a gmaps overlay and close the waiting box.
Progress... that's a bit more browser specific. But loading is easy, so:
function loadOverlay(){
var img = new Image();
var img_url = "overlays/layer1.png"
img.src= img_url;
$('#wait_for_overlay').show();
img.onLoad = function(){
$('#wait_for_overlay').hide();
var layer1 = new google.maps.GroundOverlay(img_url,imageBounds);
layer1.setOpacity(.5);
layer1.setMap(map);
}
};
Reason why this will work:
Creating an img object and setting its 'src' attribute will make the browser start to download the requested file as soon as the javascript function doing this has finished.
The browser will put this image into its local cache, then call the onLoad function to see what should happen with it.
The callback actually does nothing to the img variable (perhaps it should, make sure it doesn't get wiped out as per closure rules, do a NOP with it if this is buggy), but instead calls the google-maps function.
The google-maps function will request the image at the exact same url, at which the browser will look up its cache table, and bring the image back immediately from cache.
This trick is nasty, but in fact, the google maps engine will do the exact same onLoad thingy in the background (as this is how map engines work).
I hope this satisfies your question... no progress bar, just a loading indicator... Perhaps you could do progress bar by requesting it with XHR and checking progress, I'm not sure, but the trick will be the same: do a faux request, in order to make it arrive to the cache.
I doubt you can do it. You may request for new functions added to the GroundOverlay class in order for the users to have more access and control over the loaded image. I'd like to have those kind of functions for my projects too.
As of 10 years later, 2021 Dec. I can confirm that #Aadaam 's idea works great !
Try my example:
click the example link, try zoom map or pan,
it load image as groundOverlay, the progressing bar show on left panel bottom.
new Image()
is HTML img object, document is here
img_object.onload
is all lowercase, if you write
.onLoad
will give you error.
https://transparentgov.net:3200/googlemaps12/default?layer_id=0&layer=SilverRock_MasterPlan_29Nov2016_s200-images.jpg¢er_lat=33.65789936781538¢er_long=-116.25862990762825¢er_zoom=15&url=https%3A%2F%2Fgis.la-quinta.org%2Farcgis%2Frest%2Fservices%2FCommunity_and_economic%2FSilver_Rock_Master_Plan%2FMapServer&panto=0&overlayOpacity=8&overlayType=overlayType_image
In one webpage, I have a big image to load and other contents. Sometimes the image takes longer time to load and I would like to track that. Is there any means by which I can get notified using Javascript when browser completely renders the image?
EDIT
I use the following code to load the image.
<table border="0" style="background-image: url(http://abc.com/abc.jpg);" id="imageDisp">
</table>
SOME More UPDATE
Is there any simple way to know how long the image took to render? Using the javascript I am getting a notification that the image is loaded now, is there a way to know when the image load started? So that the elapsed time can be calculated?
You can hook on the load event of the <img> element. E.g.
<img src="http://upload.wikimedia.org/wikipedia/commons/3/31/Atlantic_hurricane_tracks.jpg"
onload="alert('finished!');">
Jsfiddle demo.
Update:
Then create new Image() instead (the average browser is smart enough not to request the same image twice and multiple references will point to the same image request):
<script>
var img = new Image();
img.src = 'http://upload.wikimedia.org/wikipedia/commons/3/31/Atlantic_hurricane_tracks.jpg';
img.onload = function() {
alert('finished!');
}
</script>
Another jsfiddle demo (don't forget to clear browser cache, the same image might be already cached :) ).