I'm trying to generate a link into my javascript generated image.
<div id="wrapper"></div>
<script type="text/javascript">
var divWrapper = document.getElementById('wrapper');
var image = document.createElement('img');
image.src = 'image.png';
image.height = 100;
image.width = 50;
image.style.position = "absolute";
image.style.left = 60 + "px";
image.style.top = 32 + "px";
document.write("<a href="index.php">); //HERE MIGHT BE THE MISTAKE
divWrapper.appendChild(image);
</script>`
Can anyone help me with that? Thanks in advance
Don't use document.write(). Create a new a element like you created the image and append the image to the anchor element and the anchor element to the wrapper.
//define elements
var divWrapper = document.getElementById('wrapper');
var image = document.createElement('img');
var a = document.createElement('a');
//set image attributes
image.src = 'image.png';
image.height = 100;
image.width = 50;
image.style.position = "absolute";
image.style.left = 60 + "px";
image.style.top = 32 + "px";
//set anchor attributes
a.href = "index.php";
//Append the elements
a.appendChild(image);
divWrapper.appendChild(a);
<div id="wrapper"></div>
Also the quotation is wrong in document.write("<a href="index.php">); this should have been document.write("<a href=\"index.php\">"); because you need to escape double quotes if you use them inside a string defined with double quotes.
Related
I have a project which consists of a HTML, JS and CSS file.
When I open the project in my browser I have an input field (url input), a button and a canvas.
After I insert the URL of an image in the input field and click the button, I want the canvas to resize according to the width and height of the image. Of course, I also want the image to be displayed in the canvas.
Note: Later I want to add a functionality where someone can resize the image with a slider. This means that I really have to save the width of the image in a variable.
So, my main problem is that I don't know how to get the width of that image.
The last thing I tried is the following:
$('#btn_load').click(function () {
input_url = $('#input_url');
var url = input_url.val();
var img_width = url.width;
...
});
Would be glad about some help here, since I tried a lot of stuff in the last hours :)
EDIT:
I now also tried the following:
var inputURL, imgWidth;
inputURL = $('#input_url');
$('#btn_load').click(function () {
var url = inputURL.val();
var img = new Image();
img.src = url;
img.onload = function () {
imgWidth = img.width;
};
canvas.css({
'background-image': 'url(' + url + ')',
//'background-size': 'cover',
});
//This is just to check the width value
inputURL.val(imgWidth + url);
});
But still doesn't work.
This will get the img width and height in the global variables 'imgHeight' and 'imgWidth' It will also display the image on the screen, width a slider to make it bigger or smaller,
the min and max value of the input type range are dynamically set to the original width and height divider by 2 or for the maximum multiplied by 2.
Javascript:
var imgHeight;
var imgWidth;
var img = new Image();
function LoadImage() {
input_url = $('#input_url');
img.src = input_url.val();
//img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
img.onload = function() {
imgHeight = this.height;
imgWidth = this.width;
//alert(imgHeight + " : " + imgWidth);
//Now set the image to html
document.getElementById("imgID").src=img.src;
//Now set the dimensions.
$("#imgID").css({'height' : imgHeight+'px', 'width' : imgWidth+'px'});
//Now set the range min to imgwidth / 2. and the max to imgwidth * 2
document.getElementById("range").min = imgWidth / 2;
document.getElementById("range").max = imgWidth * 2;
document.getElementById("range").value = imgWidth;
}
}
function ChangeImageSize(value) {
//Calculate new height so the image doesn't get stretched.
newHeight = value / imgWidth * imgHeight;
//Set the new width and height
$("#imgID").css({'height' : newHeight+'px', 'width' : value+'px'});
}
HTML
<button onclick="LoadImage()">click me</button>
<input type="range" id="range" oninput="ChangeImageSize(this.value)">
<input type="text" id="input_url">
<img id="imgID">
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js" > </script>
<script>
function loadUrl() {
//You can get the value of your url_input and use it instead.
var url = "https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a"; //You can take it from your input_url
$("#img-size").attr("src", url);
};
function imageLoaded(sender){
alert($(sender).width() + 'x' + $(sender).height());
}
</script>
</head>
<body>
<img src="" id="img-size" onload="imageLoaded(this);">
<input type="button" onclick="loadUrl();" id="btn_load" value="Load" />
</body>
</html>
You should load the imag to get its natural width and height :
var img = new Image();
img.src = $('#input_url').val();
img.onload = function () {
imageWidth= img.naturalWidth;
imageHeight = img.naturalHeight;
...
}
Im trying to write text on a div that comes from this code:
var resume = document.createElement("div");
resume.style.position = "fixed";
resume.style.height = 0.1*canvas.height + "px";
resume.style.width = 0.4*canvas.width + "px";
resume.style.bottom = 0.75*canvas.height + "px";
resume.style.left = 0.3*canvas.width + "px";
resume.style.backgroundColor = "Black";
resume.style.opacity = "0.8";
resume.textAlign = "center";
resume.color = "White";
resume.p = "efege";
document.body.appendChild(resume);
and is situated on this canvas
var canvas = document.getElementById("Canvy");
var b = canvas.getContext("2d");
b.canvas.width = window.innerWidth;
b.canvas.height = window.innerHeight;
document.body.appendChild(canvas);
why isn't my text showing up?
How would I get text to appear using resume.(some command here)?
I Figured Out I just needed to create another element and appendChild it to the Div.
In case anyone wanted to know.
Heres the code
var x = document.createElement("SPAN");
resume.appendChild(x);
x.textContent = "anytext";
I have a problem when trying to get a picture from my static files, but from a javascript finction.
Here is my code for javascript:
<script type="text/javascript">
var url_1 = '{% static "assets/img/stolovi/2.jpg" %}';
function addimage1() {
var img = document.createElement("img");
img.src = url_1;
img.height = 50;
img.width = 50;
img.draggable = true;
//optionally set a css class on the image
var class_name = "foo";
img.setAttribute("class", class_name);
document.getElementById("myDiagramDiv").appendChild(img);
//document.body.appendChild(img);
$(img).draggable({containment:'#myDiagramDiv'});
}
</script>
How can I get that picture in my addimage1 function and set it as img.src?
My Script tag is inside a html tag, I don't know if that is important.
So for the most part your code is working just fine. I think you may have a problem with the library you are trying to use. Here is a similar working example.
https://jsfiddle.net/chrshawkes/4eaqpdsn/
<div id="myImage">
</div>
<script>
var url_1 = 'https://www.gravatar.com/avatar/1d42ea6e005a4160211f7b1957ce0a09/?default=&s=64';
function addimage1() {
var img = document.createElement("img");
img.src = url_1;
img.height = 50;
img.width = 50;
//optionally set a css class on the image
var class_name = "foo";
img.setAttribute("class", class_name);
document.getElementById("myImage").appendChild(img);
}
addimage1();
</script>
I'm adding an image snapshot of a webcam to a div using jquery (2.1.3)
Why does this not work:
var image = new Image();
image.src = "data:image/jpg;base64," + data;
image.width = "320px";
image.height = "240px";
$("#video").html(image);
The image tag has sizes 0 for w and h;
This does work
var image = $("<img>", {
"src": "data:image/jpg;base64," + data,
"width": "640px", "height": "480px"});
$("#video").html(image);
The issue is that a pure HTML Image element takes numbers as its width and height, not dimensions, so remove the "px":
var image = new Image();
image.src = "https://www.google.co.uk/images/srpr/logo11w.png";
image.width = "320";
image.height = "240";
$("#video").html(image);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="video"></div>
JQuery is smarter and converts the width and height properties to set style="width:320px; height:240px", i.e. using css, which is preferred as width and height attributes are deprecated.
What is wrong with this code? Why is my imagemap not working?
function createimg()
{
var img = new Image();
img.src='link/to/image';
img.alt='Next image'; img.id = 'span1'; img.style.zIndex = 10;
img.style.position = 'absolute';
img.style.display='block';
img.style.top = '130px';
img.style.padding='10px';
img.style.left='440px';
img.usemap='#testmap';
img.className ='dynamicSpan';
document.body.appendChild(img);
var mymap = document.createElement('map');
mymap.name = 'testmap';
document.body.appendChild(mymap);
var areatag = document.createElement('area');
areatag.shape = 'rect';
areatag.coords = '900,200,1100,1000' ;
areatag.href = 'http://www.google.com';
mymap.appendChild(areatag);
document.body.appendChild(areatag);
return img;
}
UPDATE:
I reconstructed my code like this, but it is still not functional:
function createimg()
{
var img = new Image();
img.src='link/to/image';
img.alt='Next image';
img.id = 'span1';
img.style.zIndex = 10;
img.style.position = 'absolute';
img.style.display='block';
img.style.top = '130px';
img.style.padding='10px';
img.style.left='440px';
img.usemap='#testmap';
img.className ='dynamicSpan';
var mymap = document.createElement('map');
mymap.name = 'testmap';
mymap.id = 'testmap';
var areatag = document.createElement('area');
areatag.shape = 'rect';
areatag.coords = '0,0,500,500' ;
areatag.href = 'http://www.google.com';
areatag.target = '_blank';
//append area to map
mymap.appendChild(areatag);
// append map to document
document.body.appendChild(mymap);
//append image to document
document.body.appendChild(img);
return img;
}
here's the solution:
you should use
img.setAttribute("usemap", '#testmap')
instead of:
img.usemap = "#testmap"
You have created element instance "mymap", but didn't added (not appended) it to the document, as you did it for "img" (appendChild).
document.createElement(name) creates an instance of element, but not appends it to the document.
it may be that the order in which you do things is not good.
i think you should:
create img element (+set its attrs)
create map element (+set its attrs)
create area element (+...)
append area to map
append map to document
append image to document
In addition to Viktor's answer:
img.usemap='#testmap';
...
mymap.name = 'testmap';
You will probably need to give mymap an id of "testmap"