I have found this code that takes a screenshot of a form. I am trying to take a screenshot of an image or a video.
Is there a way that can take a screenshot of a part of the webpage and saves it the way this code is saving the form ?
This is my html code
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css" />
<title>Poster</title>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
var Submit = function() {
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
};
</script>
</head>
<body>
<div id="main_image">
<img src="image.jpg" id= "image"/>
<div id="user_text">IT IS TOTALLY AWESOME</div>
</div>
<div id="edit_text_box">
<textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" > </textarea>
<div id="change_size">
<span style="float: left;">FONT-SIZE : </span>
<button id="decrease_size">-</button>
<button id="increase_size">+</button>
</div>
<button onclick="Submit();" >Submit</button>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/edit_text.js"></script>
</body>
</html>
To take the actual image from a canvas and copy it on another one you need to take all the imageData of the first canvas (the one with the edited video)
var myImageData = context.getImageData(left, top, width, height);
and put the imageData on the second canvas:
targetContext.putImageData(myImageData, dx, dy);
and to save it as an image:
var image = canvas.toDataURL();
After that you will have a string as image that can be used as the src attribute for html images.
Note that you're asking how to copy something onto a canvas that why I told you about the getImageData and putImageData. If you only need the image of the current status of the original image, you don't need the first step, just use canvas.toDataURL
Related
I am trying t load an image into div tag from a url which is obtained from a textbox.My current file is as follows..I don't know what else to be done
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<div class="ImageContainer">
image will appear here:
</div>
</body>
</html>
Using pure javascript you can load the image as follows. I am using the onChange event to detect whether url has been supplied to the textbox or not. On pressing Enter key, the image will be loaded in the div.
function addImage()
{
var url = document.getElementsByClassName("imageURL1")[0].value;
var image = new Image();
image.src = url;
document.getElementsByClassName("ImageContainer")[0].appendChild(image);
}
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1" onChange="addImage();">
<div class="ImageContainer">
image will appear here:
</div>
</body>
</html>
You can try something like this.
$(document).ready(function(){
$("#Submit").click(function(){
var image_url = $(".imageURL1").val();
$(".ImageContainer").html("<img src='"+image_url+"' width='200'>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="imageURL1">
<button id="Submit">Submit</button>
<div class="ImageContainer">
</div>
Js fiddle example -> http://jsfiddle.net/0kvxpnmv/
$('<img src="'+image_url+'">').load(function() {
$(this).appendTo('.ImageContainer');
});
JS Fiddle
Use php
index.php file
<form action="GetURL.php" method="post">
<input type="text" name="url">
<input type="submit">
</form>
Now when they click submit it will take you to the new page
GetURL.php
$image_url = $_REQUEST['url'];
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<div class="ImageContainer">
<?php echo '<img src="{$image}"/>'; ?>
</div>
</body>
</html>
On this page you can see that in your imageContainer class you have the image url being posted with PHP
The best way to handle this from here would be to have the form on the same page as the image and have it post the url with ajax.
So you would type in the url to the textbox and when your done it refreshes the image url.
How about using a button to call a funtion that'll change the image src with url in the text box
HTML
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<button onclick="func()">Load image</button>
<div class="ImageContainer">
<img src="" id="imgContainer">
</div>
</body>
</html>
javascript
(function(){
var func = function(){
var url = $(".imageURL1").val()
$('#imgContainer').attr('src',url)
}
})();
Here's the jsFiddle with jQuery and without jQuery
Please see my code below, on the change event of the text input, it would create an jQuery img tag then add then use the URL from the input as the source and clear the contents of the output div. Once the image is loaded, it will replace the content of the output div.
$('.imageURL1').change(function() {
var $img = $('<img/>');
$img.attr('src', $(this).val());
$img.load(function() {
$('.ImageContainer').html(this);
});
});
This solution requires jQuery.
Working fiddle here.
It always seems to be a problem and I fail to see why, I'm trying to change element p text by using his ID, element p id="para1" is inside PostEditor.html:
The elementID I want to change is para1 in the following html:
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/mainScript.js"> </script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
The following function is issued by a click on a link inside index.html and displaying the page you are seeing above and is then supposed to change its content:
From index.html I issue the function from link:
<a onclick="postEditing()"> Edit</a>
This line issue the following function:
function postEditing()
{
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.document.getElementById("para1").innerHTML = "11111111111";
result.document.getElementById("para1").innerText = "11111111111";
result.document.getElementById("para1").value = "11111111111";
}
As you can see I tried three methods. I'd never understand what is the difference between them, but I tried all three and none worked!
It's because you're searching the document of the window which shows the index.html, not the document of the newly opened window. try following:
...
var editorWindow = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
editorWindow.document.getElementById("para1").innerHTML = "11111111111";
...
EDIT:
NOW i see the problem: in the function you're trying to access a property of the parameter element, but you don't pass a value for it. So this will end in an error because the accessed object is undefinded!
So you have three options to get it working:
test the parameter (always a good idea): var ID = null; if(element) ID = element.id;
pass a value: <a onclick="postEditing(this)"> Edit</a>
remove the line var ID = element.id;
SOLUTION: (TESTED)
I could not really say why, but the index.html found the para1 and can successfully set the new text. But somehow the new window will reinitialize the old value again.
So you have to do the changing in an handler you run at onLoad:
index.html:
<html>
<head>
<script>
function postEditing() {
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.onload = function() {
result.document.getElementById("para1").innerHTML = "11111111111";
}
}
</script>
</head>
<body>
<a onclick="postEditing()"> Edit</a>
</body>
</html>
PostEditor.html:
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/mainScript.js"> </script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
I'm fairly sure you will need to query the return result of calling window.open like this:
function postEditing(element)
{
var ID = element.id;
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.getElementById("para1").innerHTML = "11111111111";
result.getElementById("para1").innerText = "11111111111";
result.getElementById("para1").value = "11111111111";
}
[Untested though]
Your button type is submit, which is posting the form. The object is changing in the DOM, only after the script runs, the DOM is reloaded back to it's original state. Try changing your button type to "button", and you should see the P element change appropriately.
Edit: Here's the HTML I used to determine the above. Keeping the button as "submit" caused me to see the text change and then swap back. The HTML below should keep the text in place. HTH!
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<script>
function postEditing(element)
{
document.getElementById('para1').innerHTML = "asdafs";
}
</script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="button" onclick="postEditing('caller')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
I made a small image gallery with one big image along with few small ones under neath. there is a zoomer attached with big image and when i click on small image it replaces the big image but zoomer shows the old image instead of new one
jQuery
jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom()
})
javascript
function movImg(img){
var bImg = document.getElementById('myimage');
bImg.src=img.src;
$(document).trigger("ready");
}
html
<img id="myimage" src="img/abc.jpg" alt="" />
<image src="thumbnails/xyz.jpg" onClick="movImg(this);" width="73px" style="cursor: pointer;" />
where i am wrong or what's the right way to do it?
Thanks
Try to call $('#myimage').addpowerzoom(); instead of $(document).trigger("ready");
This worked for me. It looks like the slight delay that happens when you change the source of the image breaks powerzoom. The idea is to call addpowerzoom() after image is loaded.
<!DOCTYPE html>
<html lang="en-AU">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="ddpowerzoomer.js"></script>
<script type="text/javascript">
function movImg(img){
var bImg = document.getElementById('myimage');
bImg.src = img.src;
jQuery('#myimage').one("load", function() {
jQuery('#myimage').addpowerzoom();
});
};
jQuery(document).ready(function($){
$('#myimage').addpowerzoom();
});
</script>
</head>
<body>
<img id="myimage" src="img/abc.jpg" alt="" />
<img id="thumb" src="thumbnails/xyz.jpg" onClick="movImg(this);" width="64px" style="cursor: pointer;" />
</body>
</html>
So I'm trying to automatically update an image source using javascript but for some reason it won't work. The image is being retrieved from my php text generator (generates an image with text on it) the text is grabbed from a input box. I want it to automatically grab the text inside the inputbox then change the src of image to gen.php?text=Input_box_text_goes_here
here is my code:
<html>
<head>
<title>text generator</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
</head>
<body>
<script language=javascript type='text/javascript'>
setInterval(function () {
var str= document.form.letters.value;
$('#logo').src("gen.php?text="+str);
}, 10);
</script>
<img id="logo" name="logo" src="gen.php?text=default" />
<form name="form" action="">
Text: <input type="text" name="letters"/>
</form>
</body>
</html>
any help will be appreciated.
Change $('#logo').src("gen.php?text="+str); to $('#logo').attr("src", "gen.php?text="+str);.
try:
<script>
$(function(){
//reference the image
var img = $('#logo');
//use onkeyup instead of polling
$('input[name="letters"]').on('keyUp',function(){
//get the value every keystroke
var inputValue = $(this).val();
//apply the values to the image source
img.each(function(){
this.src = "gen.php?text="+inputValue;
});
});
});
</script>
I would like to create a button that when clicked a static image is displayed as the html canvas elements background?
How can I go about doing this?
Not sure if a stylesheet switcher is the right direction? Maybe there is a smarter solution?
Try this
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btnSet').click(function(){
$('#canvas').css("background","url('plant1.jpg')");
});
});
</script>
</head>
<body>
<canvas id="canvas" width="500" height="200">
</canvas>
<br/>
<button id="btnSet">Set Canvas BG</button>
</body>
</html>
if all you want to do is display an image, you might as well use an img tag:
<script>
function() setImage() {
document.geTElementById("myImage").src = "myImage.jpg";
}
</script>
<input type="button" value="Set Image" onclick="setImage()"/>
<img id="myImage"/>
make sure myImage.jpg actually points to your image offcourse.