I have been trying to export my Dygraph images using the code:
<html>
<head>
<script type="text/javascript"
src="dygraph-combined.js"></script>
<script type="text/javascript"
src="dygraph-extra.js"></script>
</head>
<body>
<div id="graphdiv2"
style="width:500px; height:300px;"></div>
<script type="text/javascript">
g2 = new Dygraph(
document.getElementById("graphdiv2"),
"temp.csv", // path to CSV file
{} // options
);
var img = document.getElementById('demoimg')
Dygraph.Export.asPNG(g2, demoimg);
</script>
</body>
</html>
The actual image on my aspx-page is OK, but when I right-click on the image and try to view it, it's bland. I have tried to change the parameters in var img and Dygraph.Export lines but heven't been successful. So, what am I missing?
The image space for the PNG image has not been created. If you add <img id="demoimg" style="width:500px; height:300px;"/>
after graphdiv2, the exported image will appear in that image space. When you right click on that, you will be able to view the image.
Related
this is my js code
const imgSrcs = [
'C:\Users\obito\OneDrive\Desktop\To-Students\4.jpg',
'C:\Users\obito\OneDrive\Desktop\To-Students\5.jpg',
'C:\Users\obito\OneDrive\Desktop\To-Students\6.jpg'
];
const img = document.querySelector('img');
img.src =imgSrcs[Math.floor(Math.random() * imgSrcs.length)];
and this is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript: DOM</title>
<link rel="stylesheet" href="css5.css">
<script defer src="ex5.js"></script>
</head>
<body>
<figure id="header">
<img src="#" alt="#">
</figure>
</body>
</html>
i am trying to make this page everytime you reload it a random picture from the array pops up
this only worked for me if i try to link an image through a website url or somthing
but when i try to get images from my pc and use the folderpath to reach the image this never works
and i keep getting this msg in the console
tar5.html:1 Not allowed to load local resource: file:///C:/UsersobitoOneDriveDesktopTo-Students%06.jpg
any idea why this is happening?
Use relative path. If your html is in folder To-Students and your images in To-Students/images then use const imgSrcs = ['images/4.jpg', 'images/5.jpg', 'image/6.jpg']
remove the defer on your script and have
window.addEventListener("load",function() {
const img = document.querySelector('img');
img.src =imgSrcs[Math.floor(Math.random() * imgSrcs.length)];
})
I think It's because the javascript cannot access to C (because it needs that administrator accept the javascript)
I am trying to convert a div containing some img tags to a png. After some search, it looks like the best way is to use the html2canvas library.
The problem is that it is not working for me and I don't understand why.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css">
<script src="lib/js/Blob.js"></script>
<script src="lib/js/canvas-to-blob.min.js"></script>
<script src="lib/js/FileSaver.js"></script>
<script src="lib/js/html2canvas.js"></script>
<script src="lib/js/jquery.min.js"></script>
<script src="lib/js/underscore-min.js"></script>
<title>Tests Only</title>
</head>
<body>
<div id="navigationButtons">
</div>
<div id="sourceScreen" style="width:200px">
<img id="lol" src="tier-icons/base_icons/bronze.png" />
</div>
<div id="targetScreen">
</div>
<script = "text/javascript">
jQuery('#navigationButtons').append('<button type="button" id="makeScreenshot">Screenshot</button>');
jQuery('#makeScreenshot').click(makeScreenshot);
function makeScreenshot(){
html2canvas(jQuery('#sourceScreen'), {
onrendered: function(canvas) {
jQuery('#targetScreen').html(canvas);
}
});
}
</script>
</body>
</html>
Here is a jsFiddle of my code:
https://jsfiddle.net/2vv79ehy/1/
I am trying to get it work with 1 img tag first on this example, the goal is to display the canvas under the real image.
I know there is a problem with cross-domain resources with this library but when I do the test with my real code, the image is hosted on my computer.
Does anyone know how to do it or if there is another way (would be great if it could bypass cross-domain problems too)?
Your JSFiddle works, except for the cross-domain problem. I've played around trying to find a quick hack around it, but the best I could come up with is just drawing onto the canvas that you're given in your onrendered event and I haven't really played with positioning and the z-order would be impossible to implement this way, but maybe this edit to your makeScreenshot function helps you find a solution that works for you:
function makeScreenshot(){
html2canvas(jQuery('#sourceScreen'), {
onrendered: function(canvas) {
var img = jQuery("#cat");
var ctx = canvas.getContext("2d");
var originalPosition = { left: 0, top: 18 };
ctx.drawImage(img[0],originalPosition.left,originalPosition.top);
jQuery('#targetScreen').html(canvas);
}
});
}
I need to change an image with jQuery when I click on image of my webpage I need that the page show me a prompt, alert... or similar where I put the new path of the new image.
Anyone have any idea?
I show my code where I change paragraphs and headers with Jquery, I need similar but for images.
$("#probando").contents().find("#cabecera1").click(function () {
var nuevoTexto = prompt("Introduzca el nuevo contenido");
$("#probando").contents().find("#cabecera1").text(nuevoTexto);
});
The image that needs changed is in an frame.
<iframe id="probando" src="prueba2.html" scrolling="auto" height="700" width="750" marginheight="0" marginwidth="0" name="probando"></iframe>
Something I don't understand :
You have to click on an image which is in a frame, and when you do, a prompt appears to write a new path for the image. When the prompts submitted, the image changes of src, is that it ?
In that case, you can directly write the code on the frame's included page.
$().ready(function() {
$('#imageId').click(function() {
var newPath = prompt('Please enter new path for image :');
$(this).attr('src',newPath);
});
});
If it's not the case, please explain what's the structure and what is where =)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<title>iframehide</title>
<script type="text/javascript">
$(function() {
var f = $('#foo')
f.load(function() {
f.contents().find('div').hide();
})
})
</script>
</head>
<body>
<iframe id="foo" src="iframehide-frame.html" /></iframe>
</body>
</html>
I've created an SVG using Raphael that I want to capture and convert to PNG and then display in the open window. I have looked at some other stack overflow answers like this one. I implemented ollieg's answer to that question. Here's an example of what I'm doing:
<html>
<head>
<script src="NBA_test/lib/raphael-min.js"></script>
</head>
<body>
<div id="canvas"></div><br>
<script language="JavaScript">
var test=Raphael("canvas",50,50);
var rect=test.rect(0,0,50,50);
rect.attr({fill: '#fff000'})
window.onload = function() {
var canvas = document.getElementById("canvas");
window.location = canvas.toDataURL("image/png");
}
</script>
</body>
</html>
This should draw a yellow rectangle and output it as a png. The console confirms that the SVG is being captured correctly in the canvas var. However, the toDataURL line throws an error: "TypeError: 'null' is not an object (evaluating 'canvas.toDataURL')" I know my example is a little different in the sense that I don't have an actual canvas tag in my html, just the div that is going to get the canvas. Given that the canvas is being captured correctly, however, I don't understand why the second line throws that error.
Using canvg per the suggestion above and raphael.export.js, I have solved my problem (kind of). My minimal example now works as below:
<html>
<head>
<script src="lib/raphael-min.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<script src="lib/raphael.export.js"></script>
</head>
<body>
<div id="raph_canvas"></div><br>
<canvas id="html_canvas" width="50px" height="50px"></canvas>
<script language="JavaScript">
var test=Raphael("raph_canvas",50,50);
var rect=test.rect(0,0,50,50);
rect.attr({fill: '#fff000', 'fill-opacity':1, 'stroke-width':1})
window.onload = function() {
var canvas_svg = test.toSVG();
canvg('html_canvas',canvas_svg);
var canvas_html = document.getElementById("html_canvas");
window.location = canvas_html.toDataURL("image/png");
}
</script>
</body>
</html>
The problem now is that my actual app, which is a little more complex, doesn't work, but I will maybe post a separate question about that.
I'm trying to replicate this visualization here http://redotheweb.com/CodeFlower/ using my own json data. However the visualization is not showing up and I suspect it's because I have misplaced this block of code
var myFlower = new CodeFlower("#visualization", 300, 200);
myflower.update(jsonData);
which updates the visualization based on the content in the jsonData file. The full code is as follows:
<html>
<head> </head>
<body>
<div class = "content">
<div class = "container">
<p class = "lead"> </p>
<div id = "visualization">
<svg width = "270" height = "270">
var myFlower = new CodeFlower("#visualization", 300, 200);
myflower.update(jsonData);
</svg>
</div>
</div>
</div>
<script type = "text/java
<script type="text/javascript" src="javascripts/d3/d3.js"></script>
<script type="text/javascript" src="javascripts/d3/d3.geom.js"></script>
<script type="text/javascript" src="javascripts/d3/d3.layout.js"></script>
<script type="text/javascript" src="javascripts/CodeFlower.js"></script>
<script type="text/javascript" src="javascripts/dataConverter.js"></script>
<script type="text/javascript"> </script>
</body>
Please help. Thank you.
Your code is not quite correct. I think you can dispense with the SVG element, and move your CodeFlower initialization code to the empty script tag. Try this instead:
<html>
<head> </head>
<body>
<div class = "content">
<div class = "container">
<p class = "lead"> </p>
<div id = "visualization">
<!-- this empty div is what gets used by CodeFlower -->
</div>
</div>
</div>
<script type="text/javascript" src="d3.js"></script>
<script type="text/javascript" src="d3.geom.js"></script>
<script type="text/javascript" src="d3.layout.js"></script>
<script type="text/javascript" src="CodeFlower.js"></script>
<script type="text/javascript" src="dataConverter.js"></script>
<script type="text/javascript">
var myFlower = new CodeFlower("#visualization", 300, 200);
myFlower.update(jsonData);
</script>
</body>
</html>
According to the documentation:
Usage
To create a CodeFlower, include the CodeFlower.js file together
with d3.js, just like in this page. Create a new CodeFlower instance
using a CSS selector (of the div where the flower should be inserted),
and the width and height of the desired visualization. Then, bind JSON
data to the flower using CodeFlower.update(), and you're done.
CodeFlower creates the SVG element itself, inside the DIV that you provide. From the CodeFlower source code:
this.svg = d3.select(selector).append("svg:svg")
.attr('width', w)
.attr('height', h);
So adding your own SVG tag for CodeFlower is superfluous.
EDIT:
Make sure you have a valid jsonData variable: var jsonData = { /* json data here */ };
Here is a working fiddle: http://jsfiddle.net/2DUy9/1/
The block of code you're talking about is javascript, so it needs to be within script tags -- you've got a nice empty one at the end of your code. As is, your "code" is just being read as plain text. If it was inside a regular HTML element, the code would be displayed as text on the webpage, but text inside an SVG tag isn't even understood as plain text, since SVG is supposed to contain graphics.
Within the script you have to then indicate which SVG element you want to add the graph to. Just putting some code in the middle of your HTML doesn't make the results of the code go there -- even if it was put inside a script tag. However, the code you are borrowing is looking for the <div id="visualization"></div> tags, and should draw it there once you get your script formatted as #Colin recommended -- but only if your little bit of script comes after the script tag that imports the CodeFlower script. Otherwise, you'll just get an error in the console and nothing on the screen.
I'm afraid you're going to have to take some time to figure out what all the different parts of the program do before you can effectively adapt them to your needs.
The Mozilla Development Network has some good intro guides:
On HTML markup
On Javascript
For D3, the best intro for beginners without coding experience is the work of Scott Murray:
http://alignedleft.com/tutorials/d3/