When user clicks on "Save" button, I am taking a screenshot of browser page and saving that screenshot in server with help of this link.... it's working fine.
Requirement :
Here I want to save only the Content present inside div. So I am displaying some paragraph in Div & taking a screenshot of that div only...
Issue :
But along with content, its displaying white space in the screenshot.
Below is Screenshot saved in server :
Html :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://139.59.24.243/ecom1/site/test/screen/screenshot/js/html2canvas.js"></script>
<script type="text/javascript" src="http://139.59.24.243/ecom1/site/test/screen/screenshot/js/jquery.plugin.html2canvas.js"></script>
<div id="target">
<p class="paragraph">some text
</p>
</div>
<input class="save" type="submit" value="save" onclick="capture();" />
<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>
<style>
.save {
font-size: 20px;
}
.paragraph {
font-size: 25px;
}
</style>
<script>
function capture() {
$('#target').html2canvas({
onrendered: function(canvas) {
//Set hidden field's value to image data (base-64 string)
$('#img_val').val(canvas.toDataURL("image/png"));
//Submit the form manually
document.getElementById("myForm").submit();
}
});
}
</script>
Save.php
<?php
//Show the image
echo '<img src="'.$_POST['img_val'].'" />';
//Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);
//Decode the string
$unencodedData=base64_decode($filteredData);
//Save the image
file_put_contents('/images/image.png', $unencodedData);
?>
Edit
When i include the div in table, then that extra whitespace will not display , but is there any other way so that without using table, can i remove that whitespace ?
<table>
<tr>
<td>
<div id="target">
<p>some text</p>
</div>
</td>
</tr>
</table>
You will need to set the size for the target element here. before capturing the image.
you could detect which page you are on, then set the sizes from a predetermined list of possible sizes.
this is due to the capture is converting the #target element to canvas.
but if you have multiple settings/ pages then add a switch with some page casing.
function capture() {
$('#target').html2canvas({
onrendered: function(canvas) {
//Set hidden field's value to image data (base-64 string)
$('#img_val').val(canvas.toDataURL("image/png"));
//Example with pages
let page = 1; //Page 1? (detect which page you are on then set the value here
switch(page){
case 1:
// Set Width and Height here.
$('#target').css('width', '200px');
$('#target').css('height', '200px');
break;
case 2:
// Set Width and Height here.
$('#target').css('width', '450px');
$('#target').css('height', '900px');
break;
case 3:
// Set Width and Height here.
$('#target').css('width', '250px');
$('#target').css('height', '480px');
break;
/* etc etc*/
}
//Submit the form manually
document.getElementById("myForm").submit();
}
});
}
Related
I have a problem with my Pixel Art Maker.
Here is my HTML code:
<body>
<h1> PIXEL ART MAKER </h1>
<form class='gridForm' >
Grid Height:
<input type="number" id="gridHeight">
Grid Width:
<input type="number" id="gridWidth">
<input type="submit">
</form>
<div class='colorPicker'>Pick a color
<input type='color' name='colorCanvas'> </div>
<p class='designCanvas'>Design Canvas</p>
<table id='pixels'>
</table>
<script src="app.js" type="text/javascript" charset="utf-8"></script>
</body>
And JS:
function makeGrid() {
$(".gridForm").submit(function(e) {
e.preventDefault();
x=$('#gridHeight').val(); // value of height
y=$('#gridWidth').val(); // value of width
for(i=0; x>i;x--){
$('#pixels').append('<tr><td></td></tr>');
}
for(j=1; y>j ;y--){
$('tr').append('<td></td>');
}
});
}
makeGrid();
Everything work as I want except 1 thing. When I choose height and width and click submit it creates the correct table form but when I choose other values and again click submit it just add new new table cells to old one. And I need new one to overwrite the old ones each time.
To clear the table, please put this in the top of the function
$('#pixels').html("");
You have used $('#pixels').append() to dynamically insert html. So it will keep on appending to what you have before. If you want to override the previous html you have its better to clear before you start anything.
function makeGrid() {
$(".gridForm").submit(function(e) {
e.preventDefault();
x=$('#gridHeight').val(); // value of height
y=$('#gridWidth').val(); // value of width
$('#pixels').html("");
$('tr').html("");
for(i=0; x>i;x--){
$('#pixels').append('<tr><td></td></tr>');
}
for(j=1; y>j ;y--){
$('tr').append('<td></td>');
}
});
}
makeGrid();
In my html file, I have a file input that is hidden behind an image, so that when an image is clicked, the window where you search for images shows. The problem is with the submit part, I need a submit button, but I don't want it to show unless the image is clicked.
Then when the button is clicked, I want to reload the page, now with the button not showing (unless the image is clicked again, of course).
Here's my html code:
<form>
<input id="file-input" type="file" file-model="formData.img" style="display: none;"/>
<br>
<button class="btn btn-booking" id = "uploadButton" ng-click = "changeImage(user._id)" style = "display:block; margin: 0 auto; "> Upload </button>
</form>
You can use the CSS display property to hide the form until the image is clicked, then hide the image until the form is submitted, like so:
var hiderImg = document.getElementById('hiderImg');
hiderImg.addEventListener('click', function() {
// hide image, show form
document.forms[0].style.display = "inline";
hiderImg.style.display = "none";
});
document.getElementById('uploadButton').addEventListener('click', function() {
// show image, hide form
hiderImg.style.display = "inline-block";
document.forms[0].style.display = "none";
});
#hiderImg {
height: 200px;
width: 200px;
}
#hiddenForm {
display: none;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/7/74/White_domesticated_duck%2C_stretching.jpg" id="hiderImg" />
<form id="hiddenForm" onsubmit="javascript: return false;">
<input id="file-input" type="file" file-model="formData.img" />
<br>
<button class="btn btn-booking" id = "uploadButton" ng-click = "changeImage(user._id)" style = "display:block; margin: 0 auto; "> Upload </button>
</form>
Note: I added onsubmit="javascript: return false;" to the form just so that it won't try to submit in this example; you can remove that.
Another note: If you want the upload button to display under the Browse bar, remove the display:block; setting from the button.
First of All put this directive to the your image:
ng-show="fileExist"
After that put this in the your controller:
var uplader = angular.element(document.getElementById("file-input"));
uplader.bind("change", function(){
if(uplader.val()){
$scope.fileExist =true;
}else{
$scope.fileExist =false;
}
});
it's kind of watch in the your input file that handle visibilty of your image.
I am using a code snippet that I found to display a multipage form using visibility hidden.
There is a very good possibility that all of my problem stems from this method. That resource was from here:
http://www.devx.com/webdev/Article/10483/0/page/2
It is a fairly straightforward way to display multiple pages of a form...it probably was never intended to be able to allow printing.
<html>
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script language="JavaScript">
$.getScript("printThis.js", function(){
});
var currentLayer = 'page1';
function showLayer(lyr){
hideLayer(currentLayer);
document.getElementById(lyr).style.visibility = 'visible';
currentLayer = lyr;
}
function hideLayer(lyr){
document.getElementById(lyr).style.visibility = 'hidden';
}
function showValues(form){
var values = '';
var len = form.length - 1; //Leave off Submit Button
for(i=0; i<len; i++){
if(form[i].id.indexOf("C")!=-1||form[i].id.indexOf("B")!=-1)
continue;
values += form[i].id;
values += ': ';
values += form[i].value;
values += '\n';
}
alert(values);
}
</script>
<style>
body{
font: 10pt sans-serif;
}
.page{
position: absolute;
top: 10;
left: 100;
visibility: hidden;
}
</style>
</head>
<body>
<form id="multiForm" action="App1.php" method="POST" action="javascript:void(0)" onSubmit="showValues(this)" id="app">
<div id="page1" class="page" style="visibility:visible;">
Applicant Name: <input type="text" size="50" name="name1" >
</form>
<p><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p>
</div>
<div id="page2" class="page">
This is Page 2
<br>
<input type="button" id="B1" value="Go Back" onClick="showLayer('page1')">
<input type="button" id="B2" value="Print App" onClick="$('#page1').printThis({})">
<br><br>
</div>
</form>
</body>
</html>
The "Print App" button is properly calling the printThis plugin. However, I get no content from the page1 DIV section. All that is printed is the normal header portion (Page 1 of 1) in the upper right and about:blank in lower left and date in lower right of page…no content, which with my sample file should be Applicant Name input box.
I assume that this is because the DIV for page1 is set to "hidden" while the content of page2 is being displayed. If I substitute "page2" in the button call then I get the content from page2 as expected.
So...I guess what I am after is a way to temporarily change the DIV being referenced in the printThis button call to be visible just long enough to perform the page print.
Any ideas?
I'm the plugin author - you need to incorporate the print media query into your css.
This would also help users that select file > print or control + P, as it will show all form elements.
The print media query allows you to make styling changes specifically for the printed page.
Example:
#media print {
#page1, #page2 {
display: block;
visibility: visible;
position: relative;
}
}
You include this in your css.
Additionally, based on your above code - you have css and javascript inline in your page. You should consider moving both to an external files, for maintenance and improved code standards.
printThis won't work with your current setup, because the plugin looks for the container (selector) you have specified and any linked css in the head of the document.
So for the above, you can do the following:
<!-- move all of this to the bottom of the page for performance -->
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="printThis.js"></script>
<script type="text/javascript" src="myJavascript.js"></script>
<!-- the above file is your javascript externalized, remove $.getScript, wrap in $(document).ready() -->
Then put this in your head:
<link type='text/css' rel='stylesheet' href='style.css'>
<!-- contains your css from the page, including the print media query -->
<body>
<div class="container">
Input
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" id="getString" placeholder="Enter some string">
</div>
<button type="button" class="btn btn-primary" id="nowBtn">Now</button>
</form>
<br/>
<br/>
All Headings<textarea class="form-control" rows="6"></textarea>
</div>
</body>
I am using bootstrap and I will give some string in the form, when the Now button is pressed.
I should get the <h1> tag of that string in the textarea (i.e <h1>some string</h1> in the textarea with applied <h1> tag ).
Is it achievable? I want to use jQuery.
From your comments I've understood you'd like to set the font-size in the textarea to same size as h1 tag would have.
Since there's no h1 tag in your HTML, you need to create a one in the click event handler function of the #nowBtn:
var header = document.createElement('h1'),
size = window.getComputedStyle(header, null).fontSize; // Depending used browser and CSS, this returns for example 32px
Then you can set the font-size of textarea like this:
$('textarea').css('font-size', size);
A live demo at jsFiddle.
EDIT
As bfavaretto has mentioned, a cross-browser way would be to use jQuery to get the size of the h1:
size = $(header).css('font-size');
Have a look at this fiddle - it might be what you want.
http://jsfiddle.net/Nj7pj/
$(document).ready(function () {
$('.btn-primary').on('click', function () {
inputVal = $('#getString').val();
newTextAreaVal = "<h1>" + inputVal + "</h1>";
$('textarea').val(newTextAreaVal);
});
});
I think you can do
var h1 = $("h1.classYouWant");
$(".form-control").val( "<h1>" + h1.text() + "</h1>" );
if is dynamic the header (h1 or h2 or h3 )
you can do
var header = $(".classYouWant").get(0);
$(".form-control").val( header.outerHTML );
I want to place a number of images inside a form and be able to select them by just clicking on them. Once an image is selected I can show a border around it indicating that it has been selected, like checkboxes multiple images can be selected in the same form.
But how to go about this? I am not sure how to have the form register the images as being selected elements, so when the form is submitted to the server side the values on these images will be sent over as well.
I wish I could just set the images as backgrounds of checkboxes but of course that won't work due to browser restrictions. Any ideas on how this could be done?
for your html do have this.
<form id="form1">
<img src="barney.jpg" title="barney" id="barneyCheckImage" />
<input type="checkbox" id="imgCheck" name="imgCheck" value="barney" style="visibility: hidden;" />
<input type="submit" value="Submit" />
</form>
for your scripts
$(document).ready(function() {
$('form#form1').find('img#barneyCheckImage').toggle(
function(){
$(this).css('border', '1px solid green');
$('form#form1').find('input[id=imgCheck]').attr('checked', 'checked');
},
function(){
$(this).css('border', 'none');
$('form#form1').find('input[id=imgCheck]').removeAttr('checked');
}
);
// just to test for the checkbox.
$('form#form1').submit(function(e){
e.preventDefault();
var form = $('form#form1').serialize();
alert(form);
});
});
Edit:
I've edited it for BalusC's concern.
For the input type image you can also do a $('#imgCheck') directly instead of $('form#form1').find('input[id=imgCheck]') but for me, I don't want to have a lot of id's on my form.
check out: http://api.jquery.com/image-selector/
<input type="image" />
$("input:image").css({background:"yellow", border:"3px red solid"});
<!-- Choose some styles for our custom form elements -->
<style>
.imageCheckbox {
display: none;
}
.imageToggle .toggleImage {
/* default/unselected image styles here */
}
.imageToggle .selectedImage {
/* selected image styles here */
}
</style>
<!-- Add a script to handle when the user clicks on an image -->
<script>
function toggleImage(containerElem) {
//toggle the checkbox value
var checkBox = containerElem.getElementsByClassName("imageCheckbox");
checkBox.checked = ! checkBox.checked;
//update the image styles
var image = containerElem.getElementsByClassName("toggleImage");
if (checkBox.checked) {
image.className += " selectedImage";
}
else {
image.className = "toggleImage";
}
}
</script>
<!-- Build the form -->
<form>
<div class="imageToggle" onclick="toggleImage(this);">
<input class="imageCheckbox" type="checkbox" id="checkbox_0" name="checkbox_0" />
<img class="toggleImage" src="/img_0.png" />
</div>
<div class="imageToggle" onclick="toggleImage(this);">
<input class="imageCheckbox" type="checkbox" id="checkbox_1" name="checkbox_1" />
<img class="toggleImage" src="/img_1.png" />
</div>
<!-- etc. -->
</form>