Get real image dimensions javascript - javascript

Ok, i have this function right here:
function realImgDimension(img) {
var i = new Image();
i.src = img.src;
return {
naturalWidth: i.width,
naturalHeight: i.height
};
}
var myImage = document.getElementById('blah');
myImage.addEventListener('load', function() {
var realSize = realImgDimension(this);
console.log('My width is: ', realSize.naturalWidth);
console.log('My height is: ', realSize.naturalHeight);
});
when I upload image that is for example 1530x2500 it prints that width is 2500 and height 1530. Why is this happening? If I have an image 2500x1300 it prints it corrctly. So something happens with the images that their width is smaller than their height, or images that are "tall"
Any ideas?
this is what i call onchange
function readURL(files) {
if (files && files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width($(window).width() * 0.3)
};
reader.readAsDataURL(files[0]);
}
}
and this is my form
<div class="form-group">
{{ Form::label('image', 'Slider Image') }}<br>
<img id="blah" alt="your image" style="background-color:black; margin-top:10px; border-radius:5px; image-orientation: from-image;"/><br><br>
<div style="position:relative;">
<a class='btn btn-primary' href='javascript:;'>
Choose File...
<input type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="image" id="image" size="40" accept="image/gif, image/jpeg, image/png" onchange="readURL(this.files);">
</a>
<span class='label label-info' id="upload-file-info"></span>
</div>
</div>

You should use/set images to dimensions with a power of two (i.e. 2500, 1600). You should also check orientations whether printing a portrait on a landscape and vice versa. Maybe this documentation may help you: WebGL and the power of two image size

Related

upload image then make it movable and resizable

I'm trying to make an image uploader, and after the upload, make it movable and resizable. I have 2 scripts with jquery, I can upload an image, and move/resize an other one, but can't use it together.
uploader:
<div class="upload">
<input type='file' onchange="readURL(this);" /> <br>
</div>
<div class="block">
<div id="background">
<img id="bg" src="" alt="" width="auto" height="50%"/>
</div>
</div>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#bg')
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
make another image resizable and movable:
$(document).ready(function () {
$(document).on('click', '.block-add', function () {
var a = $(this);
var src = a.find('img:first').attr('src');
var elem = $('<div class="container"><img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});
It works separately but if I want to make it to an uploaded image, the image just doesn't appear.
the operation you wanna do is a little bit confusing.
first of all, decide what you are gonna do? If it was me I would use libraries like Comman js or Pica resize image lib for production use in order to store it on back-end too.

Uploading an image and displaying it using a button

How can I display an image I uploaded immediately in HTML using button like a profile picture
Thank you
<div>
<img id="myImg" class="img img-circle" src="#" alt="your image"
height=200 width=100>
</div>
<input type='file' />
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$('#myImg').attr('src', e.target.result);
$('#yourImage').attr('src', e.target.result);
};
So you essentially want an image preview without a page reload? Here is some code that will do just that.
HTML:
<img id="myImg" alt="your image" class="img img-circle" style="visibility: hidden; display: none" height="200" width="100">
<input type="file" onchange="showimagepreview(this)" accept=".png,.jpg,.jpeg,.gif" />
JavaScript:
function showimagepreview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById("myImg").setAttribute("src", e.target.result);
document.getElementById("myImg").style = "visibility: visible; display: inline";
}
reader.readAsDataURL(input.files[0]);
}
}
Your code already successfully displays the image preview. As far as I understand your question you intend to display the full image on button click.
You will need an image for that
<img id="yourImage">
on file upload you will need to store the src somewhere, for the sake of simplicity that will be a global variable here:
var src = "";
and then:
function imageIsLoaded(e) {
$('#myImg').attr('src', e.target.result);
src = e.target.result;
};
and the button click:
$("#yourbutton").click(function() {
$("#yourImage").att("src", src);
});
So basically you want to use an image as a button.Here is the solution you are looking for
<button>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" id="dagger" />
</button>
$(function(){
$("#dagger").click(function(){
alert("click");
});
});

get new Value of div in function

I want to get width and height of the displayed image inside an image wrapper to do stuff with it. The Image ist displayed when selected, so the size of the wrapper changes. Since I need the size of the wrapper to do other stuff I use it as parameters. So after updating the image I get the height and width of the OLD image wrapper. So how can I modify my code to get the new dimensions of the wrapper after displaying the new image?
(I don't need information about submitting or anything. This is a reduced version of the code.)
<div style="width:300px">
<div id="image-wrapper" style="border:2px dashed blue">
<img src="text.jpeg" id="image" style="width:100%">
</div>
<p>width: <span id="x"></span></p>
<p>height: <span id="y"></span></p>
</div>
<form method="POST" enctype="multipart/form-data">
<input type="file" id="user-file" accept="image/jpeg, image/jpg, image/png, image/gif" onchange="Image.display(this, document.getElementById('image'));Image.ready(document.getElementById('image-wrapper'),document.getElementById('x'),document.getElementById('y'))">
<button type="submit">Submit
</button>
</form>
<script>
class Image {
static display ( event, target ) {
if ( event.files[0] ) {
let fileReader = new FileReader();
fileReader.onload = function (event) {
target.setAttribute( 'src', event.target.result );
}
fileReader.readAsDataURL(event.files[0]);
}
}
static ready (wrapper, x, y) {
x.innerHTML = wrapper.clientWidth;
y.innerHTML = wrapper.clientHeight;
}
}
</script>
EDITED: You have to wait for the image to load and THEN call your ready method!
<div style="width:300px">
<div id="image-wrapper" style="border:2px dashed blue">
<img src="text.jpeg" id="image" style="width:100%" onload="Image.ready(document.getElementById('image-wrapper'),document.getElementById('x'),document.getElementById('y'))">
</div>
<p>width: <span id="x"></span></p>
<p>height: <span id="y"></span></p>
</div>
<form method="POST" enctype="multipart/form-data">
<input type="file" id="user-file" accept="image/jpeg, image/jpg, image/png, image/gif" onchange="Image.display(this, document.getElementById('image'));">
<button type="submit">Submit
</button>
</form>
<script>
class Image {
static display ( event, target ) {
if ( event.files[0] ) {
let fileReader = new FileReader();
fileReader.onload = function (event) {
target.setAttribute( 'src', event.target.result );
}
fileReader.readAsDataURL(event.files[0]);
}
}
static ready (wrapper, x, y) {
x.innerHTML = wrapper.clientWidth;
y.innerHTML = wrapper.clientHeight;
}
}
</script>
Try accessing the image itself's width, clientWidth, or offsetWidth property instead of the wrapper.

how to use push button as image field in itext 5

can anyone please help me with the java code to use push button as an image field using itext 5. I have tried the below code but does not work
com.itextpdf.text.pdf.PushbuttonField button = new com.itextpdf.text.pdf.PushbuttonField(writer, new com.itextpdf.text.Rectangle(90, 500, 140, 800), "submit");
button.setText("POST");
button.setBackgroundColor(new com.itextpdf.text.BaseColor(255, 255, 255));
button.setVisibility(com.itextpdf.text.pdf.PushbuttonField.VISIBLE_BUT_DOES_NOT_PRINT);
com.itextpdf.text.pdf.PdfFormField submit = button.getField();
submit.setAction(com.itextpdf.text.pdf.PdfAction.createSubmitForm("/book/fdf", null, 0));
writer.addAnnotation(submit);
com.itextpdf.text.pdf.TextField file = new com.itextpdf.text.pdf.TextField(writer, new com.itextpdf.text.Rectangle(90, 500, 140, 800), "image");
file.setOptions(com.itextpdf.text.pdf.PushbuttonField.FILE_SELECTION);
com.itextpdf.text.pdf.PdfFormField upload = file.getTextField();
upload.setAdditionalActions(com.itextpdf.text.pdf.PdfName.U, com.itextpdf.text.pdf.PdfAction.javaScript("this.getField('image').browseForFileToSubmit();"+ "this.getField('submit').setFocus();", writer));
writer.addAnnotation(upload);
try this one:
<div class="col-md-2">
<label for="pre">
Your Image
</label>
<a id="pre" onclick="$('#imagetr').trigger('click'); ">
<img id="preview" class="col img img-fluid" src="images/defaultloadimage.jpg" title="your default place holder" />
</a>
<input type="file" name="image" id="imagetr" style="display:none;" />
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imagetr").change(function () {
readURL(this);
});
</script>

How to show image while image select

I am using javascript code.this code show the image which image you select before uploading.
Javascript
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
</script>
Html
<form id="imageform" method="post" enctype="multipart/form-data" >
<input type="file" name="photoimg" id="imgInp" >
<img id="blah" src="#" alt="your image" />
<input type="submit" Value="Upload">
</form>
This piece of code work perfectly.SO i need normaly when image not select than image dispaly:none; and if image select than show image.i want to handle this problem with client side scripting.
Modify the markup so that the image is hidden by default:
<img id="blah" src="#" alt="your image" style="display:none" />
And then call the jQuery show method on the image when you have read the file like so:
$('#blah').attr('src', e.target.result);
$('#blah').show();
Fiddle is here
Try
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').prop('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
jQuery(function () {
$("#imgInp").change(function () {
readURL(this);
});
})
Demo: Fiddle

Categories

Resources