I want to scale inline SVG document in html. I have code like this:
var svg_width = svg.attr('width');
var svg_height = svg.attr('height');
function resize(width, height) {
svg.attr('width', width).attr('height', height);
var group = svg.find('#resize_group');
if (!group.length) {
group = svg.children().not('metadata, defs').wrapAll('<g/>').
parent().attr('id', 'resize_group');
}
var matrix = svg[0].createSVGMatrix();
//var matrix = group[0].getCTM();
matrix.a = width/svg_width;
matrix.d = width/svg_height;
group.attr('transform', matrix.asString());
}
SVGMatrix.prototype.asString = function() {
return 'matrix(' + this.a + ' ' + this.b + ' ' + this.c + ' ' + this.d +
' ' + this.e + ' ' + this.f + ')';
};
NOTE: I need to transform the elements inside svg because otherwise the image is trimmed.
but when I call resize function whole svg disappear. I've save svg to file and open it in Inkscape and it look normal (it's scaled). Why the svg disappear? (I tested on Firefox, Chrome and Opera)
I found quick hack, to replace svg with text of the svg to force redraw.
$.fn.xml = function() {
return (new XMLSerializer()).serializeToString(this[0]);
};
$.fn.SVGRedraw = function() {
return $(this.xml()).replaceAll(this);
};
Related
I want to randomize the background image when the user clicks a button.
Here's what I have.
Every time the button at the bottom right is cliked, I want to randomize the background image from a set array of externally hosted images.
How can I achieve that? (Without PHP, if possible.)
Try this method:
<script type="text/javascript">
function randomImg1() {
var myImages1 = new Array ();
myImages1[1] = "img/who/1.jpg";
myImages1[2] = "img/who/2.jpg";
myImages1[3] = "img/who/3.jpg";
var rnd = Math.floor( Math.random() * myImages1.length );
if( rnd == 0 ) {
rnd =1;
}
html_code = '<img class="who" src="' + myImages1[rnd] + '" />";
document.write(html_code);
}
</script>
You can also check out this
// EDIT -- By Pipskweak
instead of
html_code = '<img class="who" src="' + myImages1[rnd] + '" />";
document.write(html_code);
we could do this;
document.getElementsByTagName("body")[0].setAttribute('style','background-image: url(' + myImages1[rnd] + ')');
after all, background image was mentioned.
I'm using FileTransfer plugin to download an image from a remote server.
The image is stored in "storage/emulated/0/" - using the following code:
function downloadFile(fileDownloadName){
//console.log('downloadFile');
window.requestFileSystem(
LocalFileSystem.PERSISTENT,
0,
function(fileSystem){
//console.log('onRequestFileSystemSuccess');
fileSystem.root.getFile(
'dummy.html',
{create: true, exclusive: false},
function(fileEntry){
//console.log('onGetFileSuccess!');
var path = fileEntry.toURI().replace('dummy.html', '');
var fileTransfer = new FileTransfer();
fileEntry.remove();
fileTransfer.download(
'https://www.myserver.com/imagens/' + fileDownloadName,
path + fileDownloadName,
function(file) {
//console.log('download complete: ' + file.toURI());
return path + fileDownloadName;
},
function(error) {
console.log('download error source ' + error.source);
console.log('download error target ' + error.target);
console.log('upload error code: ' + error.code);
}
);
},
fail
);
},
fail
);
}
So, I'm pointing the path + fileDownloadName to SRC of my image, but the image does not appear.
var location = path + fileDownloadName;
window.resolveLocalFileSystemURL(location, function(oFile) {
oFile.file(function(readyFile) {
var reader= new FileReader();
reader.onloadend= function(evt) {
$(".circle-perfil").css('background-image', 'url(' + evt.target.result + ')');
};
reader.readAsDataURL(readyFile);
});
Is there something wrong I'm doing? Should I have to store the image in another folder? If yes, how to do it?
If you are using img tag then set its image as:
$(".circle-perfil").css('background', 'url(' + evt.target.result + ')');
or
$(".circle-perfil").css('content', 'url(' + evt.target.result + ')');
In case of div or span
$(".circle-perfil").css('background-image', 'url(' + evt.target.result + ')');
I had set it like:
var image = document.getElementById('cameraPic');
image.src = 'path/of/image file';
I'm looking for HTML5 chart that can show value at cursor point like this
http://www.tradeviewforex.com/forex-blog/tip-14-how-to-use-the-crosshair-on-metatrader-4
I found StockChartX can do this
http://developer.modulusfe.com/stockchartx_html5/
(click Draw -> Annotation)
but I can effort this price :P
Thanks for answer!
Ps. Sorry for my bad english.
Something similar can be done with the Annotation tool in TeeChart HTML5. See the example here
Also, you can format a tool tip, if that is the need.
tip = new Tee.ToolTip(Chart1);
Chart1.tools.add(tip);
tip.format.font.style = "11px Verdana";
tip.render = "canvas";
tip.onshow = function (tool, series, index) {
scaling = 2;
poindex = index;
}
tip.onhide = function () {
scaling = 0;
poindex = -1;
}
tip.ongettext = function (tool, text) {
var txt = tool.currentSeries.title + ":\n" + "Value: " + text + tool.currentSeries.units + "\n" + jsonDataArray[0].evDataTime[tool.currentIndex] + " (ms)";
model.MouseOverY(text + tool.currentSeries.units);
model.MouseOverX(jsonDataArray[0].evDataTime[tool.currentIndex] + " (ms)");
model.SelectedSeries(tool.currentSeries.title);
return txt;
}
My ultimate goal is to save rendered presentation MathML to a .PNG file. Knowing just enough about programming to be dangerous :-) there may be a better way to do this...I am drawing the equation on a canvas element, then trying to save the canvas element as a .PNG. I started with code found here -- https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas -- and modified as follows:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style="border:2px solid black;" width="200" height="200">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1998/Math/MathML' style='fontsize:40px'>" +
"<math>" +
"<mtable>" +
"<mtr>" +
"<mtd columnalign='right'>" +
"<mn>2</mn>" +
"<mi>x</mi>" +
"<mo>+</mo>" +
"<mn>3</mn>" +
"<mo>−</mo>" +
"<mn>3</mn>" +
"</mtd>" +
"<mtd columnalign='center'> " +
"<mo>=</mo>" +
"</mtd>" +
"<mtd columnalign='left'> " +
"<mn>9</mn>" +
"<mo>−</mo>" +
"<mn>3</mn>" +
"</mtd>" +
"</mtr>" +
"</mtable>" +
"</math>" +
"</div>" +
"</foreignObject>" +
"</svg>";
var svg = new (self.BlobBuilder || self.MozBlobBuilder || self.WebKitBlobBuilder);
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
svg.append(data);
var url = DOMURL.createObjectURL(svg.getBlob("image/svg+xml;charset=utf-8"));
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
};
img.src = url;
window.open(canvas.toDataURL('image/png'));
</script>
</body>
</html>
If I comment out the window.open I can see the MathML in the canvas element, but the .PNG generated by the toDataURL is just transparent (no math equations). What am I missing? Thanks in advance...
Right off the bat the issue I see is that you defer the rendering of the canvas until the image loads, but you call window.open in the code without making sure its loaded. You would need to do something like the following
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
// now the image has been drawn for sure *before* opening the window
window.open(canvas.toDataURL('image/png'));
};
img.src = url;
I am displaying the different marker on the map , the problem is that sometimes (specially when I reset the web server) the map is loaded properly and it even shows the shadow of the points but the markers are not shown/visible on the map.However on the subsequent calls the markers are shown properly (perhaps cached , but not sure). This behavior is consistent in all browsers namely IE 6/7/8 , Chrome , Firfox 3.5.6.
The javascript shown below creates the marker. On the sideline, as markers can be of different sizes, I need to first determine there width and size (other wise they look deformed).
var imgTemp = new Image();
imgTemp.name = "img_" + i.toString();
imgTemp.src = groupMarkerUrl; //url to the actual image
point = new GLatLng(parseFloat(latitude), parseFloat(longitude));
var icon = new GIcon(G_DEFAULT_ICON);
icon.image = groupMarkerUrl;
icon.iconSize = new GSize(imgTemp.width, imgTemp.height); //Width x Height
icon.iconAnchor = new GPoint(14, 15);
icon.infoWindowAnchor = new GPoint(5, 1);
marker = new GMarker(point, icon);
map.setCenter(point, 13);
//build the information box
var htmlContent = "<div style=\"color:#000000\"><span style=\"font-weight:bold;\">" + title + "</span><br/>";
if (address != "") {
htmlContent += address + " ";
}
if (zipcode != "") {
htmlContent += "<br/>" + zipcode + ", ";
}
if (city != "") {
htmlContent += city;
}
if (telephone != "") {
htmlContent += "<br/>Tel : " + telephone;
}
if (fax != "") {
htmlContent += "<br/>Fax : " + fax;
}
htmlContent += "</div>";
map.addOverlay(marker);
markerKeys.push(stamp);
markers[stamp] = marker;
//Add legends with group markers one for each group
if (null == legends[groupId]) {
legends[groupId] = groupMarkerUrl;
var nbsp = document.createTextNode(" ");
var image = document.createElement("img");
image.setAttribute("src", groupMarkerUrl);
image.setAttribute("style", "margin-left:10px !important; border:\"0\";");
pushpinPnlConsole.appendChild(nbsp);
pushpinPnlConsole.appendChild(image);
pushpinPnlConsole.setAttribute("style", "display:block");
}
eval("GEvent.addListener(markers[stamp] , \"click\", function(){markers['" + stamp + "'].openInfoWindowHtml(windowHtmls['" + stamp + "']);});");
windowHtmls[stamp] = htmlContent;
opticianTBody.appendChild(row);
Thanks.
Your problem is that
imgTemp.src = groupMarkerUrl; //url to the actual image
takes some time to complete. Since you use imgTemp.width and imgTemp.height without waiting for the image to load, those values are likely to be zero. The API will plot your icons at zero size.
In browsers other than MSIE, you can omit the icon.iconSize (and not copy the details from G_DEFAULT_ICON as mentioned by mopoke) and the marker will default to the image size if the image has arrived by the time the marker gets displayed. In MSIE, for PNG images, the API uses the AplphaImageLoader which defaults to size zero if a size is not specified.
The workround is to preload your images properly, by placing this code inline, so that it gets executed before the onload event
var imgTemp = new Image();
imgTemp.name = "img_" + i.toString();
imgTemp.src = groupMarkerUrl; //url to the actual image
And placing your icon creation code in an onload function, so that it doesn't get executed until after all the images loaded by the inline code have been completely fetched.
Not sure why you're using G_DEFAULT_ICON in your constructor.
To do a custom icon, use something like:
var icon = new GIcon();
icon.image = groupMarkerUrl;
//...
After you reset the server and you try and load the image referenced in groupMarkerUrl, do you see it correctly?