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.
Related
I am working on a rudimentary site that enables users to upload images to the server and download them from it. I want to add a "preview" feature that will allow the user to see its photo beforehand. Here is my code:
<div class="container">
<input type="file" class="title3" id="picker"/>
<img src= this.input alt="IDK why, but I can't display that." class="title3">;
You can use JavaScript to dynamically update the image source of the img tag.
const img = document.getElementById('preview');
const input = document.getElementById('picker');
input.onchange = function(ev) {
const file = ev.target.files[0]; // get the file
const blobURL = URL.createObjectURL(file);
img.src = blobURL;
}
<div class="container">
<input type="file" class="title3" id="picker" />
<img id="preview" alt="IDK why, but I can't display that." class="title3" width="200">
</div>
I updated the code.
const selectFile = evt => {
const [file] = evt.target.files;
if (file) {
document.getElementById('preview').src = URL.createObjectURL(file);
}
}
<div class="container">
<input type="file" class="title3" id="picker" onchange="selectFile(event)" />
<img id="preview" alt="IDK why, but I can't display that." class="image">;
</div>
I need to check the image size in kilobyte and the dimension (height, width)
How can I get the size of the in bytes?
"Max file size reached" error message should be displayed.
I can't figure out how to check after Drag and Drop image upload.
$('#fileinput').bind('change', function() {
alert('This file size is: ' + this.files[0].size/1024/1024 + "MB");
});
$(function(){
var viewModel = {};
viewModel.fileData = ko.observable({
dataURL: ko.observable(),
// base64String: ko.observable(),
});
viewModel.multiFileData = ko.observable({
dataURLArray: ko.observableArray(),
});
viewModel.onClear = function(fileData){
if(confirm('Are you sure?')){
fileData.clear && fileData.clear();
}
};
viewModel.debug = function(){
window.viewModel = viewModel;
console.log(ko.toJSON(viewModel));
debugger;
};
ko.applyBindings(viewModel);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/adrotec/knockout-file-bindings/master/knockout-file-bindings.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="https://rawgit.com/adrotec/knockout-file-bindings/master/knockout-file-bindings.js"></script>
<div class="well" data-bind="fileDrag: fileData">
<div class="form-group row">
<div class="col-md-6">
<img style="height: 125px;" class="img-rounded thumb" data-bind="attr: { src: fileData().dataURL }, visible: fileData().dataURL">
<div data-bind="ifnot: fileData().dataURL">
<label class="drag-label"> Drag file here</label>
</div>
</div>
<div class="col-md-6">
<input type="file" id="fileinput" data-bind="fileInput: fileData, customFileInput: {
buttonClass: 'btn btn-success',
fileNameClass: 'disabled form-control',
onClear: onClear,
}" accept="image/*">
</div>
</div>
</div>
check codepen.io
You can use FileReader to read the image as base64 data which can be set as the src of <img />. The width and height of the <img /> are what you need.
<!doctype html>
<html>
<body>
<div>
<input type="file" />
<div id="preview">
file size: <span id="file-size"></span><br />
image preview: <img id="img" /><br />
image size: <span id="image-size"></span>
</div>
</div>
<script>
const img = document.getElementById('img')
document.addEventListener('dropenter', e => e.preventDefault())
document.addEventListener('dragover', e => e.preventDefault())
function renderImage(file) {
document.getElementById('file-size').innerText = file.size
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = e => {
img.src = e.target.result
img.onload = () => document.getElementById('image-size').innerText = `${img.width}x${img.height}`
}
}
document.addEventListener('drop' , e => {
e.preventDefault()
renderImage(e.dataTransfer.files[0])
})
document.querySelector('input').addEventListener('change', e => {
renderImage(e.target.files[0])
})
</script>
</body>
</html>
Code update. Both input and drag/drop work.
I've tried several different ways to upload image to database, using Bootstrap. My IDE is Visual Studio. What I need is to let the uploaded image appear in a preview. Although I've seen a working demo before, when I run my code, the photo file appears on screen without a preview image. Because of this, I'm not sure if the image is stored in database successfully or not. Any advice would be very appreciated! I've included all of the current code:
HTML:
<div>
<form>
<div>
<div class="form-group hirehide is-empty is-fileinput width100">
<div class=socialmediaside2>
<input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic[] type=file value="Choose a file">
<div class=input-group>
<input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
<span class="input-group-btn input-group-sm">
<button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button>
</span>
</div>
</div>
</div>
<div class=upload-demo>
<div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>
</div>
</form>
</div>
JavaScript:
function readURL() {
var $input = $(this);
var $newinput = $(this).parent().parent().parent().find('.portimg');
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
reset($newinput.next('.delbtn'), true);
$newinput.attr('src', e.target.result).show();
$newinput.after('<input type="button" class="delbtn removebtn" value="remove">');
}
reader.readAsDataURL(this.files[0]);
}
}
$(".fileUpload").change(readURL);
$("form").on('click', '.delbtn', function (e) {
reset($(this));
});
function reset(elm, prserveFileName) {
if (elm && elm.length > 0) {
var $input = elm;
$input.prev('.portimg').attr('src', '').hide();
if (!prserveFileName) {
$($input).parent().parent().parent().find('input.fileUpload').val("");
//input.fileUpload and input#uploadre both need to empty values for particular div
}
elm.remove();
}
}
CSS:
body {
img.portimg {
display: none;
max-width: 200px;
max-height: 200px;
}
}
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
In my code first div is for showing the image. Second div for uploading ani image and third div will show the preview. I want to display the uploaded image in the first div on button press.
<html>
<body>
<div id="imgspace1" class="container">
<!-- image preview div -->
<div id="image_preview1"><img id="previewing1" src="" /></div>
</div>
<!--image upload part-->
<div>
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<input type='file' onchange="readURL(this);" />
</form>
</div>
<div id="image_edit" class="container">
<img id="image_preview" src="#" alt="Upload Image"/> </div>
<div>
<input id="confirm_button" type="button" value="Confirmn" onclick="('')"/>
</div>
</body>
</html>
If your prime concern is displaying a preview of the image you may use EZDZ
js library.Then you just have to add an image tag and import the .js and .css files and you will be able to see the preview and then upload it by ajax.
function readURL(input) {
if ( input.files && input.files[0] ) {
var FR= new FileReader();
FR.onload = function(e) {
$('#previewing1').attr( "src", e.target.result );
};
FR.readAsDataURL( input.files[0] );
}
}
This code will read the uploaded image in file element.
<script type="text/javascript">
$(document).ready(function(){
$("#confirm_button").click(function{
var preview = $('#image_preview').attr('src');
$("#previewing1").attr("src", preview);
});
});
</script>
You can copy the src of third div image to first div image. And confirm button will be . You can write this unction in javascript also with onclick event.