So, I've got this working javascript and it loads an image that a user uploads to the HTML on the screen displaying it.
But, it displays the image without a max height or width so it moves buttons on the page to where they can't be seen or pressed. This includes the submit button if the image uploaded is big enough.
So, is there some way to make the 'uploaded' image display really small: like max 30px in height?
$(function(){
$('#user_avatar').change(function(e){
var files = event.target.files;
var image = files[0];
for (var i = files.length - 1; i >= 0; i--) {
var reader = new FileReader();
var file = files[i];
reader.onload = function(file) {
var img = new Image();
img.src = file.target.result;
$('#inputpic').attr('src', file.target.result);
}
reader.readAsDataURL(image);
};
});
});
I have tried adding:
theimage = getElementById('inputpic')
theimage.style.height='10px';
But this had no effect.
EDIT 1
html.slim that the JS talks to:
= image_tag('temp.png', id: "inputpic", class: 'tiny_image_display')
SCSS that I made:
.tiny-image-display {
max-height: 30px;
}
You can set this in CSS very easily:
#inputpic {
max-height: 30px;
}
$(function(){
$('#user_avatar').change(function(e){
var files = event.target.files;
var image = files[0];
for (var i = files.length - 1; i >= 0; i--) {
var reader = new FileReader();
var file = files[i];
reader.onload = function(file) {
var img = new Image();
img.src = file.target.result;
img.height = "30";
$('#inputpic').attr('src', file.target.result);
}
reader.readAsDataURL(image);
};
});
});
Related
I would like to add to the preview of uploaded images before uploading to the server the option to add a description of the image, which will be saved in the database, below the script displaying images and a preview image. Is anyone able to help me ?
$(function() {
// Multiple images preview with JavaScript
var multiImgPreview = function(input, imgPreviewPlaceholder) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#chooseFile').on('change', function() {
multiImgPreview(this, 'div.imgGallery');
});
});
enter image description here
When I upload image in editor, I am able to find it's size.
But I want it's height and width to restrict for height and width above particular limit.
Below is result which I'm getting when I upload image.
See image to image upload result
For size restriction it's working as below-
onImageUpload(images, insertImage) {
if (images[0].size <= 100000) {
for (let i = 0; i < images.length; i++) {
const reader = new FileReader();
reader.onloadend = () => {
insertImage(reader.result);
};
reader.readAsDataURL(images[i]);
}
} else {
alert('Image not saved, max allowed image size is 100kb');
}
};
What editor are you using? UEditor is a very good rich-text editor.
onImageUpload(images, insertImage) {
console.log('onImageUpload', images);
if (images[0].size <= 100000) {
for (let i = 0; i < images.length; i++) {
const reader = new FileReader();
reader.onloadend = () => {
var i = new Image();
i.src = reader.result;
i.onload = function () {
if (i.width <= 200 && i.height <= 200) {
insertImage(reader.result);
} else {
cogoToast.warn('Image not saved, image width and height should be less than 200*200');
}
};
};
reader.readAsDataURL(images[i]);
}
} else {
cogoToast.warn('Image not saved, max allowed image size is 100kb');
}
};
It will work in this way.Thanks!
What i'm trying to do is : if all the dragged files was images drop them, but if there was other file exstensions don't drop them, but drop the images only.
Here's my try :
HTML :
<div id="dropzone"></div>
Javascript :
var dropzone = document.getElementById("dropzone");
dropzone.ondrop = function (e) {
e.preventDefault();
e.stopPropagation();
var files = e.dataTransfer.files;
for(x = 0; x < files.length; x = x + 1){
if(files[x].type.split("/")[0] == 'image') {
console.log(files[x].name + "is image");
}else {
console.log(files[x].name + "is not image");
}
}
}
i need to loop through the files that i dragged and if the file was image do something otherwise do something else, for example
file.jpeg is image
file.txt is not image
But using my code if i dragged other file extension with the image it's not dropping the image, it's skipping both files.
The point is : Dropping only images.
You could use the FileReader and test the file type for an image like this:
// don't try to process non-images
var imageType = /image.*/;
if (file.type.match(imageType)) {
// it's an image, process it
}
Here's example code and a Demo:
// dropzone event handlers
var dropzone;
dropzone = document.getElementById("dropzone");
dropzone.addEventListener("dragenter", dragenter, false);
dropzone.addEventListener("dragover", dragover, false);
dropzone.addEventListener("drop", drop, false);
//
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
//
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
//
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
handleFiles(files);
}
//
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
// get the next file that the user selected
var file = files[i];
var imageType = /image.*/;
// don't try to process non-images
if (!file.type.match(imageType)) {
continue;
}
// a seed img element for the FileReader
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
// get an image file from the user
// this uses drag/drop, but you could substitute file-browsing
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.onload = function() {
// draw the aImg onto the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = aImg.width;
canvas.height = aImg.height;
ctx.drawImage(aImg, 0, 0);
// make the jpeg image
var newImg = new Image();
newImg.onload = function() {
newImg.id = "newest";
document.body.appendChild(newImg);
}
newImg.src = canvas.toDataURL('image/jpeg');
}
// e.target.result is a dataURL for the image
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
} // end for
} // end handleFiles
body {
background-color: ivory;
}
canvas {
border: 1px solid red;
}
#dropzone {
border: 1px solid blue;
width: 300px;
height: 300px;
}
<h4>Drag file(s) from desktop to blue dropzone.<br>Only image files will be processed.</h4>
<div id="dropzone"></div>
<div id="preview"></div>
I'm trying to use elevate zoom jquery plugin on an image created with the file api right off the user's computer. However it doesn't seem to work! It's as if elevate zoom doesn't recognize the "src" of the image.
Any ideas?
Thanks a lot!
Here's my JS:
$("#testing").change(function(e) {
var file, i, image_width, img, reader, _results;
i = 0;
image_width = void 0;
_results = [];
while (i < e.originalEvent.srcElement.files.length) {
file = e.originalEvent.srcElement.files[i];
img = document.createElement("img");
img.id = "draggable";
reader = new FileReader();
reader.onloadend = function() {
var image_h, image_w;
img.src = reader.result;
};
reader.readAsDataURL(file);
$("#preview_images").after(img);
_results.push(i++);
}
return _results;
});
$(function() {
$("img").elevateZoom({
zoomType: "inner"
});
return {
cursor: "crosshair"
};
});
Here's my HTML:
<img src="data:image/jpeg;base64,/{HUGE LINES OF CODE HERE}">
reader.result is base64 string of image,so try this
reader.onloadend = function() {
var image_h, image_w;
img.src = 'data:image/png;base64,'+reader.result;
};
The below handleFiles method is being passed files from both drag and drop and a file input. After it gets the data url for a given file it passes it to the processImage function. This function creates a new image and sets the src and file for that image. I then take different actions based on the width of the incoming image and insert the image into the dom. However, I noticed when dropping in a bunch of images imageWidth will get set to 0. I have confirmed the image.src is correctly set and that dropping the same image in by itself works fine. I also have confirmed that if I remove the width calculations the image does display correctly on the page. When I enter the debugger I can confirm that immediately after imageWidth is set to 0 i.width returns a correct value. At first I thought it might be a threading issue in Chrome, but then when I saw it happen in FireFox as well I became alarmed. I have not been able to pinpoint a certain threshold, but the more load you put on the browser the less likely it is to correctly get the width.
I am seeing the problem in both FireFox 16.0.2 and Chrome 23.0.1271.95.
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
if( !isImage(file) ) {
continue;
}
var reader = new FileReader();
reader.onloadend = function(e) {
var dataURL = e.target.result;
processImage(file, dataURL);
}
reader.readAsDataURL(file);
}
}
function processImage(file, dataURL) {
var i = new Image();
i.src = dataURL;
i.file = file;
//console.log(i);
var maxWidth = 600;
var imageWidth = i.width;
......
}
As with all images, they may need time to load before they will tell you their width:
var i = new Image();
i.onload = function() {
//console.log(i);
var maxWidth = 600;
var imageWidth = this.width;
}
i.src = dataURL;
i.file = file;
The width (and height) might be 0 because it's not loaded yet.
Try adding the load event like so:
function processImage(file, dataURL) {
var i = new Image();
i.addEventListener("load", function () {
var maxWidth = 600;
var imageWidth = i.width;
......
});
i.src = dataURL;
i.file = file;
}