What is a reliable way to use data URIs for images? I know IE6/7 don't support them, so will this work?
I use data URIs for images by default
If browser is IE6/7 it shows the image (not as data but actual image) using javascript
include the image (not as data) in <noscript>.
My question is: will the image be fetched in <noscript> even if the browser supports javascript and data URIs?
If you do want to go down this road (and I personally would not bother), you could do it...
// Parse user agent and figure out if this browser supports data
// URIs - e.g. `supportDataUri()`. Also, store the image path
// somewhere - I'll assume for convenience an attribute called `data-image-src`
if ( ! supportDataUri()) {
var images = document.getElementsByTagName('img');
for (var i = 0, imagesLength = images.length; i < imagesLength; i++) {
var imgSrc = images[i].getAttribute('data-image-src');
images[i].src = imgSrc;
}
}
Related
From https://stackoverflow.com/a/21227589/130910:
var stream = videoTag.captureStream()
But I don't want to have to create the tag.
I want to do this because my stream may be from a webcam or a video, and when it's a webcam, I am setting the videoTag.srcObject to the result of navigator.mediaDevices.getUserMedia(...). So it makes the API clunky.
I want to do:
const stream = getStreamFromLocalVideoOrWebcam()
videoTag.src = stream
Is this possible? What is the best approach?
I want to do this because my stream may be from a webcam or a video
I'll take that to mean you have a MediaStream (from getUserMedia/webcam), or a URL (pointing at a video).
If you actually have a MediaStream, you should be setting the srcObject, as you are now. If you have a URL, you should be using the src property instead. So, the design of the return value of your function getStreamFromLocalVideoOrWebcam() is flawed.
You could always do something like this instead:
function setVideoSource(videoEl) {
if (... something ...) {
videoEl.src = someVideoUrl;
} else {
videoEl.srcObject = navigator.mediaDevices.getUserMedia(...);
}
}
const videoEl = document.createElement('video');
setVideoSource(videoEl);
I'm having trouble with implementing a svg-file on a website: Every file displays fine if it has no filters set in Inkscape. Exporting to .png works fine for every file but when I'm trying to display a file with a filter all parts of the svg-file with filter are not displayed.
Example of file without filter (sorry for the links, but it seems I aint got enough reputation points to post images...):
and with filter set:
As you can see, the "upper part" is not displayed because of a (shadow-)filter.
So, is it possible to display svg-files with filters or do I have to use css-effects for example for shadow effects?
Many thanks
EDIT:
Here is my HTML:
<img class="svg" src="img/favlabel3.svg">
Javascript I use for svg:
jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
The most likely explanation is that the Inkscape filters are using a feature not supported in web browsers, probably BackgroundImage (which allows a filter on one element to combine with elements behind it -- no browsers currently support it).
The specs do not offer any fallback options for filters, or any specific error handling guidelines. Most browsers respond to errors in a filter by making the filtered graphic disappear, as you can see if you try the example SVG from the specs. (Compare with the correctly rendered version as a PNG.)
You'll need to figure out an alternative way to create the filter effect without using the background image.
I am trying to get dataUrl from <canvas> element using canvas.toDataURL(). By default, it returns image/png, but some browsers support the image/jpeg filetype.
How can i detect if a browser supports image/jpeg?
You just specify that you want JPEG like this:
var quality = 0.8;
var dataUri = canvas.toDataURL('image/jpeg', quality); // quality is optional
If your dataUri now contains the same string JPEG is supported. Otherwise the string will be image/png.
if (dataUri.match('image/jpeg')) {
// support jpeg
}
That being said, I don't think there is any browser which do not support the jpeg format. A test like this is better suited for more uncommon formats in various degrees such as webp, bitmap etc.
For a general test you could do:
function hasSupport(mime) {
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 1;
var uri = canvas.toDataURL(mime);
return (uri.match(mime) !== null);
}
Per the HTML5 spec at https://www.w3.org/TR/html5/scripting-1.html#the-canvas-element:
When trying to use types other than "image/png", authors can check if
the image was really returned in the requested format by checking to
see if the returned string starts with one of the exact strings
"data:image/png," or "data:image/png;". If it does, the image is PNG,
and thus the requested type was not supported. (The one exception to
this is if the canvas has either no height or no width, in which case
the result might simply be "data:,".)
Therefore you can check like this:
var type = 'image/jpeg';
var data = canvas.toDataUrl(type);
if ( /^data:image\/png[,;]/.test(data) ) {
type='image/png';
} else if ( /^data:,/.test(data) ) {
type = null;
}
Im trying to make a script using JSFL but I have the following problem...
To understand what Im trying to do, first I used a script to export all images in the library, because I need to make a process to all PNG files.
Now I want to reinsert the images on the library.
If I create a new item I lose all references and that's not useful and I have duplicated items.
What I need to do is re-import the image for each item.
I mean, the same I do when a right-click on the library item->properties->Import...
I was trying to use this script but it doesn't work. Anyone can help me?
var folderURI = fl.browseForFolderURL('Select folder where all images should be exported as *.PNG');
var doc = fl.getDocumentDOM();
if(doc)
{
fl.outputPanel.trace("Start");
var library = doc.library;
var allLibItems = library.items;
var item;
var itemName;
for (var i = 0; i<allLibItems.length; ++i)
{
item = allLibItems[i];//only images will be processed
if(item.itemType == "bitmap")
{
itemName = item.name.slice(item.name.lastIndexOf("/")+1,item.name.lastIndexOf("."));
//Find proccesed image on the directory selected before
//and replace the sourceFilePath (I think this is what I need to use a new image but is not working)
item.sourceFilePath = folderURI + "/" + itemName +".png"
//This returns 'false'
fl.outputPanel.trace(library.updateItem(item.name));
//item.sourceFilePath has the old value, I don't understand why it was not changed
fl.outputPanel.trace(folderURI + "/" + itemName +".png" + " = " + item.sourceFilePath);
}
}
}
Finally, I unzipped the FLA file, it's like a zip and I have all images inside, so it's easy to replace them.
The problem that I had first was that images didnt change because in Flash you have an option to compress images when you create the swf, that's why I didnt see any change on the final result. (right click on the image inside the library -> Properties -> Compression)
I used JSFL to iterate all images (like the example above) and set Compression: "Lossless" instead of "Photo (JPG)".
Obviously this is only a good solution for me because Im using an external tool to compress images with a really great resolution and low size.
You can use JSFL to iterate all images and set Compression: "Photo (JPG)" to all images, with the quality that you want, but probably the result will be different.
Regards
try this
doc.importFile(currentFileURI, true, false, false);
doc.library.selectItem(currentFileName);
doc.library.moveToFolder(libraryPath, currentFileName, true);
but if item exists, FLASH show warning dialog
There's something strange and wired with the "image path" when using it in html page from IsolatedStorage.
I want to create an html-page, that will be used by app's webBrowser object. So I create an html page in IsolatedStorage and then use this page with webBroswser.Navigate.
Everything works fine except the images.
1) If I create an html page and images at the root of IsolatedStorage, everything works fine, the code <img src="image.png"> works and I can see the image at page page.
2) However, the way of saving pages and images at root is not a good idea in my opinion as I already have a number of directories, used by app there, so, I create a new directory "Html" and save all pages there.
Now, when I open this page I can't see my image. I've tried several variations of src links and still can't find an answer.
What'll be the correct link in <img src=..."> tag, if the hierarchy is:
IsolatedStorage-->Html(folder)-->index.html(file)
(1) IsolatedStorage-->Html(folder)-->image.png(file)
(2) IsolatedStorage-->Html(folder)-->Images(folder)-->image.png(file)
Actually, I thought it would be something like <img src="image.png"> for (1), but I tried several similar versions and none of them worked.
Well, that seems a bit strange:
This method will save the picture to the IsolatedStorage, but won't allow to use it in html img tag:
using (IsolatedStorageFile isopicsFile = IsolatedStorageFile.GetUserStoreForApplication())
{
if (isopicsFile.FileExists(Constants.HtmlFolderName + "launch.png") == false)
{
Stream yourFilepath = Application.GetResourceStream(new Uri("/someUri/launch.png", UriKind.Relative)).Stream;
BitmapImage b = new BitmapImage();
b.SetSource(yourFilepath);
WriteableBitmap wb = new WriteableBitmap(b);
using (var isoFileStream = isopicsFile.CreateFile(Constants.HtmlFolderName + "launch.png"))
{
var width = wb.PixelWidth;
var height = wb.PixelHeight;
// Theoretically, there may be the problem, as the file extention is png, not jpg
System.Windows.Media.Imaging.Extensions.SaveJpeg(wb, isoFileStream, width, height, 0, 100);
}
}
}
And this one will save the picture and will allow to use it with html tags:
string f = "somePath/launch.png";
StreamResourceInfo sr = Application.GetResourceStream(new Uri(f, UriKind.Relative));
using (BinaryReader br = new BinaryReader(sr.Stream))
{
byte[] data = br.ReadBytes((int)sr.Stream.Length);
string fileName = "launch.png";
string filePath = Constants.HtmlFolderName + fileName;
using (IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication())
{
if (isoStore.FileExists(filePath))
{
isoStore.DeleteFile(filePath);
}
using (BinaryWriter bw = new BinaryWriter(isoStore.CreateFile(filePath)))
{
bw.Write(data);
bw.Close();
}
}
}
Also, in second case, the picture properties must be set to Content + Always Copy.