Plenty of examples of using HTML5 to preview an image selected in file field but I can't find any examples with a remove/reset link - after selecting image and writing image to canvas is it possible to reset field AND reset the image or effectively hide it?
if you are referring to the html5imageupload by STBeets from here then you have to access the html5imageupload object through the function of a callback. For instance, if you are applying this plugin to a #formuploader div:
$('#formuploader').html5imageupload
({
onAfterProcessImage : function(obj)
{
obj.reset();
}
});
You can do this with any of the callbacks available
Related
I have setup a WASM project using Rust and a game engine called Bevy to create graphics within a Svelte app. However, when I run the init() function generated by wasm-pack, it creates a canvas element for the graphics to be rendered into. Is there any way to make it render to a canvas I have created or to style the canvas it generates?
You should be able to specify the canvas bevy should render to by setting the WindowDescriptor's canvas field
The docs say "If set, this selector will be used to find a matching html canvas element, rather than creating a new one. Uses the CSS selector format."
When you create the WindowDescriptor add the canvas selector as a field.
let window_descriptor = WindowDescriptor {
canvas: "#mycanvas",
..default()
};
For images in my webpage, instead of just specifying some image url, I need to load the image data from my own API as a binary data, and then set the src as data/jpeg;base64,..... i.e, I probably need a customized function to load the image content.
However I also want to do the loading lazily. So the ways I can think of are:
set src as empty initially, and listen to various mouse events myself or use Intersection Observer API to trigger my customized function to actually load and set src
find some way to override image's loading function? so that I could still use the native lazy loading provided by chrome?
Is option 2 possible? If so, how to override?
Thanks!
I have couple of html elements (div/span etc.) I want to be able my HTML5 Canvas to read that html and render it as it is. Later on I will convert it into bytes with the help of canvas.toDataURL() and save as an image
I am not looking for plug-in based solutions and this is specifically targeted to IE9/10
Appreciate any help towards this !!
You can perhaps use this solution:
https://github.com/niklasvh/html2canvas
html2canvas( [ document.body ], {
onrendered: function(canvas) {
/* canvas is the actual canvas element,
to append it to the page call for example
document.body.appendChild( canvas );
*/
}
});
Note: If images are loaded from non-origin (and doesn't have accept header set) it won't show up.
Optionally you can use your server as a proxy to fetch the images and serve them to client:
<img src="http://myserver.com/getexternalimage?http....
How can I listen to the events play/stop/pause of a HTML5 video?
I tried with the following code:
$("video").on('play',function(){
//my code here
});
but it does not work.
Alternatively I would be fine also intercept the click that stop and start the video (in fact I would prefer), but even this code not works:
$('video').on('click', function(event) {
//my code here
});
I think because often above the video element is placed a div with associated events start and stop, but I do not know how to select via jQuery or Javascript:
P.S. This code should work on pages that are composed dynamically / not generated by me, so I can not refer the elements indicating their ID or a specific class.
UPDATE
I did not realize that the page on which I was testing had a video inside an iframe.
The syntax is best suited to my needs:
doc.querySelector("video").addEventListener('play', function(e) {
//my code here
}, true);
See here:
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
So... :
$("video")[0].onplay = function () {
// Do play stuff here
};
Hope that helps!
Your first attempt should work. But you need to make sure that jQuery is actually finding video elements. You say that the page is generated dynamically, so perhaps it's possible that your code is running before the video elements are added. This would also be the case if your script is higher up in the document than the video elements (e.g., in the <head>).
Try placing the following code immediately before the code you have there and check the output:
console.log($("video"));
If the output is an empty array, then you aren't finding any video elements. Try placing your script at the very end of the page or inside a DOMContentLoaded event. Or, if another script is generating the video elements, make sure your script runs after that one.
A few other notes on your question:
There is no stop event. Here's a list of media events.
I don't think the click event is what you want. That will fire no matter where on the video the user clicks: play button, volume control, etc.
The video being placed inside a div shouldn't have any effect on these events. I'm not sure why you'd have start and end events on a div, so maybe I'm not following.
Give this a try!
//Direct
<video id="videoThis" src="blahhh.mp4" onended="yourFunction()"></videoThis>
-or-
//JavaScript (HTML5)
document.querySelector("#videoThis").addEventListener("ended",yourFunction,false);
-or-
//jQuery
$("#videoThis").bind("ended",yourFunction);
Sometime if we embed widgets and when the DOM is fully loaded (showed by jquery's $(document).ready()
said it so), it still needs time for widgets to show (or load) from its servers (e.g. www.widgetbox.com). How to give a loader image for each widgets in that time lag? Any idea?
In the html, put a 'loading' image in place of the widget, then remove or hide the image when the widget is loaded.
The correct place to do this would be in the window load event.
window.onload = function () {
// hide the 'loading' image
}