I am new to HTML and javascripts. I hope someone can help me with my issue.
I am generating a code and passing the value to a textbox, then convert that value to a image. I need to execute the two function on page load is it possible? I hope someone can help. Thanks a lot!
Here is my code:
function SecurityCode() {
//Generate security code and assign to 'text'
document.getElementById('text').value = GeneratedCode;
}
function TexttoImage(){
// found this code here , thanks Stackoverflow!
var tCtx = document.getElementById('textCanvas').getContext('2d'),
imageElem = document.getElementById('image');
document.getElementById('text').addEventListener('onload', function (){
tCtx.canvas.width = tCtx.measureText(this.value).width;
tCtx.fillText(this.value, 0, 10);
imageElem.src = tCtx.canvas.toDataURL();
console.log(imageElem.src);
}, false);
}
<body onload='TexttoImage();'>
<canvas id='textCanvas' width='65' height='42'></canvas>
<img id='image' width='65' height='42'>
<input type='text' id='text' >
</body>
You can make an init function who regroup all functions than you whan to charge on load
function SecurityCode() {
//Generate security code and assign to 'text'
document.getElementById('text').value = GeneratedCode;
}
function TexttoImage(){
// found this code here , thanks Stackoverflow!
var tCtx = document.getElementById('textCanvas').getContext('2d'),
imageElem = document.getElementById('image');
document.getElementById('text').addEventListener('onload', function (){
tCtx.canvas.width = tCtx.measureText(this.value).width;
tCtx.fillText(this.value, 0, 10);
imageElem.src = tCtx.canvas.toDataURL();
console.log(imageElem.src);
}, false);
}
function initFormOnLoad(){
SecurityCode();
TexttoImage();
}
And in your form
<body onload='initFormOnLoad();'>
<canvas id='textCanvas' width='65' height='42'></canvas>
<img id='image' width='65' height='42'>
<input type='text' id='text' >
</body>
The onload attribute takes a string of JavaScript code, so you can simply put the two functions together!
onload="TexttoImage(); SecurityCode()"
You can try using jquery to ease your problem, you will need to include the below to your html page
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
HTML -
<body>
<canvas id='textCanvas' width='65' height='42'>
<img id='image' width='65' height='42' /></canvas>
<input type='text' id='text' />
</body>
javascript -
function SecurityCode() {
//Generate security code and assign to 'text'
document.getElementById('text').value = "hello1"; //GeneratedCode;
}
function TexttoImage() {
// found this code here , thanks Stackoverflow!
var tCtx = document.getElementById('textCanvas').getContext('2d');
imageElem = document.getElementById('image');
tCtx.canvas.width = tCtx.measureText(document.getElementById('text').value).width;
tCtx.fillText(document.getElementById('text').value, 0, 10);
imageElem.src = tCtx.canvas.toDataURL();
}
$(function() { // nearly equivalent to body.onload but a better option to use
SecurityCode();
TexttoImage();
})
Have a look at jsfiddle for working code.
Related
I am trying to create an Image Swap with Javascript. Can anyone point me in the direction of where my coding error is in JavaScript? Am I using the getElementByID incorrectly? Any help or direction is much appreciated!
<title>Photo Gallery</title>
</head>
<header>
<h1>Gallery</h1>
<div>
<img alt="images" src="Skelton_ImageSwap/images/Lilly.jpg"
style="height: 350px; width: 350px" id="Lilly">
</div>
</header>
<body>
<img src="Skelton_ImageSwap/images/Lilly.jpg" alt ="images" id ='Lilly' onclick.changeImage()>
<img src ="Skelton_ImageSwap/images/Lotus.jpg" alt = "images" id='Lotus' onclick.changeImage()>
<img src="Skelton_ImageSwap/images/Roses.jpg" alt="images" id='Roses'onclick.changeImage()>
<img src="Skelton_ImageSwap/images/Tulip.jpg" alt="images" id='Tulip'onclick.changeImage()>
</body>
<script>
function changePicture()
{
if (image.getElementByID.onclick.changePicture == "Lilly")
{
image.src = "Skelton_ImageSwap/image/Lilly.jpg";
}
if (image.getElementByID.onclick.changePicture == "Orchid")
{
image.src = "Skelton_ImageSwap/image/Orchid.jpg";
}
if (image.getElementByID.onclick.image == "Roses")
{
image.src = "Skelton_ImageSwap/image/Roses.jpg";
}
else
{
image.src = "Skelton_ImageSwap/image/Tulip.jpg";
}
}
</script>
On your img tags the onclick function is not wrote correctly should look like
onClick="changeImage()"
Also "changeImage" is not a function you wrote a function called "changePicture" so it should really look like
onClick="changePicture()"
Now in your changePicture function there are a few issues specifically the getElementById function is not being used correctly also you got the name wrong on it you capitalized the 'D' at the end which shouldn't be, I would recommend changing the id on your header tag img from 'Lilly' to 'preview' since element id's need to be unique and you've already used 'Lilly' as an id than replace your script tag with this
<script>
document.getElementById("Lilly").addEventListener("click", function(){
document.getElementById("preview").src = "Skelton_ImageSwap/image/Lilly.jpg"
});
document.getElementById("Lotus").addEventListener("click", function(){
document.getElementById("preview").src = "Skelton_ImageSwap/image/Lotus.jpg"
});
document.getElementById("Roses").addEventListener("click", function(){
document.getElementById("preview").src = "Skelton_ImageSwap/image/Roses.jpg"
});
document.getElementById("Tulip").addEventListener("click", function(){
document.getElementById("preview").src = "Skelton_ImageSwap/image/Tulip.jpg"
});
</script>
I am new with HTML and JavaScript. I am trying to load image using onload event through JavaScript.
My code is as below:
<script>
function createImage() {
('testimonialhulk').src='photo.jpg';
</script>
and the HTML is
<body onload="createImage()">
<div class="testimonialhulk">
</div>
</body>
</html>
I have to display image in div tag.
This works in my jsfiddle
<body onload="createImage();">
<div id="testimonialhulk">
Hello
</div>
</body>
Js:
function createImage()
{
var myElement = document.getElementById("testimonialhulk");
myElement.style.backgroundImage = "url('https://placehold.it/350x150')";
}
JS fiddle
https://jsfiddle.net/wuskc68d/1/
Try this
function createImage() {
var par = document.getElementsByClassName("testimonialhulk")[0];
var img = document.createElement('img');
img.src = 'put path here';
par.appendChild(img);
}
or use <div id="testimonialhulk">
document.getElementById('testimonialhulk')
.innerHTML = '<img src="imageName.png" />';
I have the following code -
<html>
<head>
<script>
function myFunction()
{
var x = document.getElementById("myFile");
alert(x.value);
document.getElementById("picture").src=x.value;
}
</script>
</head>
<body>
<input type="file" id="myFile"><br>
<button onclick="myFunction()">Render this</button>
<img id="picture" src="C:\Users\Shin\Desktop\410.svg">
</body>
</html>
Initailly its showing the image, after I select another file and click the button, it shows me the path in the alert box perfectly but, it doesnt render the new pic and its showing a red cross at the place what you see in image when the src is incorrect. I used chrome browser.
try this...
<html>
<head>
<script>
function myFunction()
{
var input = document.getElementById("myFile");
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
var img = document.getElementById("picture");
img.src = event.target.result;
}
}
</script>
</head>
<body>
<input type="file" id="myFile"><br>
<button onclick="myFunction()">Render this</button>
<img id="picture" src="C:\Users\rajpc\Pictures\1390.jpg">
</body>
</html>
this would definitely work....
Change your img src as desired..
I hope this should help you....
you'll need URL.createObjectURL for that:
url=URL.createObjectURL(x[0]);
To read a local file you would need to use the FileReader Api.
function myFunction() {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("picture").src = reader.result;
};
reader.readAsDataURL(document.getElementById("myFile").files[0]);
};
I have this code in my web. This page takes multiple image files as input and displays them before uploading them to server.
<html>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<body>
<header>
<h1>File API - FileReader</h1>
</header>
<label for="files">Select multiple files: </label>
<input id="files" type="file" multiple/>
<div id='10' style=" width:100px; height:50px; background-color:#006633" onclick="submit_rr(event)">Click</div>
<output id="result" />
</body>
<script language="javascript" type="text/javascript" >
function submit_rr(event){
$('#files').click();
}
$("#files").change(function(){
show_selected(this);
});
function show_selected(input){
for(i = 0;i< input.files.length; i++) {
var reader = new FileReader();
reader.readAsDataURL(input.files[i]);
reader.onload = function (e) {
var img = new Image;
img.onload = function() {
if(img.width>=img.height){
ratio=img.height/img.width;
height=ratio*100;
height_rem=(100-height)/2;
var crt=document.createElement('div');
crt.id="main_some";
crt.className="ind_req_sty";
var Friend="Friend";
crt.innerHTML="<img id="+i+" width='100px' height='"+height+"px' src='"+e.target.result+"'/>";
document.getElementById('10').appendChild(crt);
}else{
ratio=img.width/img.height;
width=ratio*100;
var crt=document.createElement('div');
crt.id='main_req';
crt.className="ind_req_sty";
crt.innerHTML="<img id="+i+" height='100px' width='"+width+"' src='" + e.target.result +"'/>";
document.getElementById('10').appendChild(crt);
}
}
img.src=reader.result;
}
}
}
</script>
</html>
Problem is that, this script executes before all the elements are displayed. As a result only few images are displayed(say 4 out of 10 selected). I tried adding .ready() and .load() but that doesn't work. However if I add an alert('something') all images are displayed without any issue. is there a way I can delay execution so that all images are loaded. I have also tried setTimeout() without any luck. Thanks for your help
If you properly indent your code, you will set that $("#files).change(/*..*/) line is not inside the submit_rr function.
Wrap all your code with
$(function () {
/* your code here */
});
Basically what it does is, creating event handler on dom ready event and after that we are executing our script.
Also, this is a commonly asked question. If you believe the problem you are having is not unique to your case, do your research, if you still cannot find the answer, go ahead and ask.
The link at http://whathaveyoutried.com tells about developers' feelings on answering a repeatedly asked question.
Try putting your <script> tag before the closing </body> tag
Hi After searching .....
I found this works ...
function eecute(event){
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for(var i = 0; i< files.length; i++)
{
var file = files[i];
//Only pics
if(!file.type.match('image'))
continue;
var upload_pic = new FileReader();
upload_pic.addEventListener("load",function(event){
var pic_u = event.target;
var img = new Image;
img.src=pic_u.result;
if(img.width>=img.height){
var div = document.createElement("cover");
div.innerHTML= "<div style='text-align: center; margin-top:8px; width:150px;margin-right:5px; height:150px;float:left'><img style='display:inline-block;' width='150' src='" + pic_u.result + "'/></div>";
output.insertBefore(div,null);
}else{
var div = document.createElement("cover");
div.innerHTML="<div style='text-align: center ;margin-top:8px;width:150px; margin-right:5px; height:150px;float:left'><img style='display:inline-block; margin:auto;' src='" + pic_u.result + "'height='150' /></div>";
output.insertBefore(div,null);
}
});
//Read the image
upload_pic.readAsDataURL(file);
}
}
I am trying to delay the loading of images using plain JS. my method to do this is by giving empty src field for the image and inserting the image url into a temp attribute called "lang" as used in the example below. ie >
<img lang="logo.gif"> instead <img src="logo.gif">. When pressing a button the js below is initiated to insert into src attr the value of the dummy "lang" attr.
function showimagesunderdiv(divid)
{
tr = document.getElementById(divid);
pics=tr.getElementsByTagName('img');
for(i=0;i<pics.length;i++)
{
if(pics[i].lang)
{
pics[i].src=pics[i].lang;
pics[i].style.display='';
}
}
}
While this works is Chrome and FF, IE is doing problems. Any idea?
Maybe this:
<html>
<body>
<p>Images:</p>
<img name=image0>
<img name=image1>
<img name=image2>
<img name=image3>
End of document body.
</body>
<script type="text/javascript">
function LoadImage(imageName,imageFile)
{
if (!document.images) return;
document.images[imageName].src = imageFile';
}
LoadImage('image4','number4.gif');
LoadImage('image5','number5.gif');
LoadImage('image6','number6.gif');
LoadImage('image7','number7.gif');
</script>
</html>
Or this:
<html>
<body>
<p>Images:</p>
<img name=image0 onLoad="LoadImage('image1','number1.gif')">
<img name=image1 onLoad="LoadImage('image2','number2.gif')">
<img name=image2 onLoad="LoadImage('image3','number3.gif')">
<img name=image3>
End of document body.
</body>
<script type="text/javascript">
var loadingImage = false;
function LoadImage(imageName,imageFile)
{
if ((!document.images) || loadingImage) return;
loadingImage = true;
if (document.images[imageName].src.indexOf(imageFile)<0)
{
document.images[imageName].src = imageFile;
}
loadingImage = false;
}
LoadImage('image0','number0.gif');
</script>
</html>
I know it is not a correction of your code but I cant see whats wrong...
This is a very compatible solution!
Hope it helps! resource:
http://www.cryer.co.uk/resources/javascript/script3.htm
Give each image tag an ID, store the IDs and URLs in an array:
imagesToLoad = [["imgId1", "http://..."], ["imgId2", "..."], ...];
And use:
function showimages(imageList)
{
for(var x = 0; x < imageList.length; x++) {
document.getElementById(imageList[x][0]).src = imageList[x][1];
}
}
showImages(imagesToLoad);