The 'src' property of an image is encoded when assigned. Is it possible to avoid it?
Example: http://jsfiddle.net/GqQKv/
var img = new Image();
img.src ='http://example.com/whatever?s=Hampshire 123&co=USA'
console.log('src', img.src); // instead of spaces we have %20
ThanksALot();
Just decode it using decodeURI(uri).
That would be console.log('src', decodeURI(img.src));.
Updated FIDDLE
Related
var text = '‹';
<button>{text}</button>
This doesn't show ‹ but ‹ as the button's text.
This works of course:
<button>‹</button>
How to pass this as a variable?
You could use the {#html ...} tag.
<button>{#html text}</button>
However, you need to be careful with this method if the string contains a user-inputted value.
#html is dangerous and could lead to security vulnerabilities. use this decode function.
const decode = function (html) {
const txt = document.createElement('textarea');
txt.innerHTML = html;
return txt.value;
};
before rendering the text. Here is a complete svelte repl working example.
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.
In actionScript,am trying to change the text area using setSize()here is the code..please help me
var prbDesc_txt:TextArea = new TextArea();
prbDesc_txt.text = "Hello world!";
reportAProblemPopUp.addChild(prbDesc_txt);
reportAProblemPopUp.prbDesc_txt.setSize(100,100);
Here am trying to add the textarea to reportAProblemPopUpmc.
Instead of:
reportAProblemPopUp.prbDesc_txt.setSize(100,100);
remove the reportAProblemPopUp and just reference it directly:
prbDesc_txt.setSize(100,100);
Otherwise you need to use getChildByName() on your reportAProblemPopUp if you want to reference it the way you were thinking of.
How do you store a canvas that contains images using the toDataURL method? Everything works fine for text and drawing, but I don't know how to handle images. Any help would be appreciated. Thanks
I have modified my question as follows:
This works when the image is pulled directly from a .png. However, when I call the Google Charts API, toDataURL doesn't work even though the image renders correctly on the canvas. Google Charts is returning a .png. Anyone have any ideas? Thanks.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8">
function test() {
var c = document.getElementById("drawing-canvas");
var cxt = c.getContext("2d");
// This doesn't work.
//var imgsrc = 'http://chart.apis.google.com/chart?cht=tx&chf=bg,s,ffffff&chco=000000&
chl=a';
// This works
var imgsrc = 'chart.png';
var img = new Image();
img.src = imgsrc;
cxt.drawImage(img,0,0);
}
function wr() {
var cc = document.getElementById("drawing-canvas");
var url = cc.toDataURL();
var newImg = document.createElement("img");
newImg.src = url;
document.body.appendChild(newImg);
}
</script>
</head>
<body onload = "test();">
<canvas id="drawing-canvas" width = "500px" height = "500px" style="background-color:
#ffffff; border: 2px solid #000000;">
Your browser does not support the canvas element.
</canvas>
<input type = "button" value = "go" onclick = "wr();">
</body>
</html>
First of all, your chart didn't even render on the canvas when I tested it. You need to wait for the image to load. Your chart.png image probably loads instantaneously since it's cached, but the one generated by Google Charts API isn't. This is what you should do:
var img = new Image();
img.onload = function()
{
cxt.drawImage(img,0,0);
}
img.src = imgsrc;
Aside from that, you must be getting a SECURITY_ERR in your browser's console. This is because the Canvas security model doesn't allow you to export images coming from an external URL. You should use a server-side language to save the Google Charts image to your server, then load it from there.
The HTML canvas element has a method called toDataURL, that will return a data URL image representing the canvas. You can check the documentation API on the MDN.
Specifically, it says about toDataURL:
toDataURL(in optional DOMString type, in any ...args)
returns DOMString
Returns a data: URL containing a representation of the image in the format specified by type (defaults to PNG).
If the height or width of the canvas is 0, "data:," representing the empty string, is returned.
If the type requested is not image/png, and the returned value starts with data:image/png, then the requested type is not supported.
Chrome supports the image/webp type.
If the requested type is image/jpeg or image/webp, then the second argument, if it is between 0.0 and 1.0, is treated as indicating image quality; if the second argument is anything else, the default value for image quality is used. Other arguments are ignored.
And provides and example on how to use it:
function test() {
var canvas = document.getElementById("canvas");
var url = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = url;
document.body.appendChild(newImg);
}
In this example, we use the dataURL as the source attribute of an img element, but you can do whatever you want you it (like storing it somewhere, or sending it to the server with an ajax call).
Note that most of the methods involved in drawing on canvas are methods of drawing context (obtained by a call to getContext), while this method is one of the canvas element.
What is the best way to convert a tlf markup to HTML? I want only standar HTML without the old font tag. I think I saw a utility created by someone for this, but I can remember where it is. any ideas?
Tks.
http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3_Flex/WSc3ff6d0ea7785946579a18b01205e1c5646-7fef.html
var ptext:String = "Hello, World";
var flow:TextFlow = TextConverter.importToFlow(ptext, TextConverter.PLAIN_TEXT_FORMAT);
var out:XML = TextConverter.export(flow, TextConverter.TEXT_LAYOUT_FORMAT, ConversionType.XML_TYPE );
but use TextConverter.TEXT_FIELD_HTML_FORMAT instead of TextConverter.PLAIN_TEXT_FORMAT