html2canvas screenshot an image
Question
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>
1 answers
solution1
0 2014-07-09 10:02:14
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.