I tried to load images into several canvas elements, but only the last image was loaded from the list of files. I need different images in different canvas elements, each in its own. Thanks for help.
HTML
<input type='file' id='imgfile' multiple />
The canvas element will be created by jQuery.
JavaScript
function loadImage(picture) {
var canvas = document.querySelectorAll('canvas');
var input, fr, file, img;
input = document.getElementById('imgfile');
$.each(canvas, function(i, v) {
file = input.files[i];
fr = new FileReader();
fr.onload = function createImage() {
img = new Image();
img.onload = function imageLoaded() {
var ctx = canvas[i].getContext("2d");
ctx.drawImage(img, 0, 0, 50, 50);
}
img.src = fr.result;
}
fr.readAsDataURL(file);
});
}
$("input").change(function() {
var picture = this.files;
var leng = picture.length;
for (var i = 0; i < picture.length; i++) {
$("input").after('<canvas width="50" height="50" style="border:1px solid red"></canvas>');
}
loadImage();
});
You need to declare variables inside iteratee function
function loadImage(picture) {
var canvas = document.querySelectorAll('canvas');
var input = document.getElementById('imgfile');
$.each( canvas, function( i, v) {
var file = input.files[i];
var fr = new FileReader(); // file reader per file
fr.onload = function createImage() {
var img = new Image(); // image per file
img.onload = function imageLoaded() {
var ctx = canvas[i].getContext("2d");
ctx.drawImage(img,0,0, 50, 50);
}
img.src = fr.result;
}
fr.readAsDataURL(file);
});
}
Related
So I'm trying to display image on canvas using File Reader. But it won't work. I don't know where the problem is.
var canvas = document.getElementById("ourCanvas"),
context = canvas.getContext('2d'),
uploadedFile = document.getElementById('uploaded-file');
window.addEventListener('DOMContentLoaded', initImageLoader);
function initImageLoader() {
uploadedFile.addEventListener('change', handleManualUploadedFiles);
function handleManualUploadedFiles(ev){
var file = ev.target.files[0];
handleFile(file);
}
}
function handleFile(file) {
var imageType = /image.*/;
if(file.type.match(imageType)){
var reader = new FileReader();
reader.onloadend = function(event) {
var tempImageStore = new Image();
tempImageStore.onLoad = function(ev){
canvas.height = ev.target.height;
canvas.width = ev.target.width;
context.drawImage(ev.target, 0, 0);
}
tempImageStore.src = event.target.result;
}
reader.readAsDataURL(file);
}
}
After I upload the file, image don't show on the Canvas, and does'nt show anything wrong in Console. Is there any problem with my code?
I am facing problem for checking height and width for multiple images upload
there is no option for check height & width for image file using:
document.getElementById('id').files;
So I need help to check height & width of multiple uploaded images using JavaScript
//html code
<input type='file' name='images[]' id='image' multiple>
//javascript code
$("#image").change(function () {
var this_image = $(this);
var img = document.getElementById('image').files;
var img_len = img.length;
for(var i=0;i<img_len;i++)
{
var this_img = document.getElementById('image').files[i];
var reader = new FileReader();
//Read the contents of Image File.
reader.readAsDataURL(document.getElementById('image').files[i]);
reader.onload = function (e) {
//Initiate the JavaScript Image object.
var image = new Image();
//Set the Base64 string return from FileReader as source.
image.src = e.target.result;
//Validate the File Height and Width.
image.onload = function () {
var height = this.height;
var width = this.width;
console.log(height+"---"+width);
};
}
});
Function for getting image width & height from File object:
function getImageSize(file, callback) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.onload = function(e2) {
callback(img.width, img.height);
}
img.src = e.target.result;
};
reader.readAsDataURL(file);
};
For example, if the file upload input has the id 'inputFile', the following code will print to the console the size of all its images:
var files = document.getElementById('inputFile').files;
for (var i = 0; i < files.length; i++) {
getImageSize(files[i], function(width, height) {
console.log('Image: Width = ' + width + ', height = ' + height);
});
}
Note: it won't necessarily print the images sizes as their order!
As per my previously posted question below which i got answered. I need to get image name along with dimension.
I already tried lot of things to get them but the name and dimension is getting mismatched
How to read(image data / dimension / filesize / name) multiple images on file select?
below is the complete function to get image file information.
fileSelect.addEventListener("change", getSomeFile, false);
function getSomeFile(ev){
var file= ev.target.files;
if (file) {
for(var i=0,f; f = file[i]; i++){
if(!f.type.match('image.*')){continue;}
(function(f){
var reader = new FileReader();
reader.readAsDataURL(file[i]);
reader.onload = function () {
var img = new Image();
img.onload = function() {
var span = document.createElement('span');
span.innerHTML = ['<img id="thumb" src="', img.src,'"/>'].join('');
document.getElementById('mid').appendChild(span, null);
var fileName =f.name;
var fileSize =Math.round(f.size/1024)+' KB';
var imageWidth = img.width;
var imageHeight = img.height;
};
img.src = reader.result;
};
})(file[i]);
}
}
fileSelect.value='';
}
Image is getting created in full original size, even last two arguments 150, 150 are height and width context.drawImage(img, 0, 0, 150, 150); in the code below:
function (file) { //uploaded files are always images
var reader = new FileReader(); //FileReader for uploading files from local stroge.
reader.onload = function () {
var links = document.createElement('a'); //link when image is clicked
var img = document.createElement('img');
img.src = reader.result; //src = url from uploaded file
img.className = 'images'; //css -> .images { margin-top: 30px; padding: 30px; }
img.onload = function () { //repaint image to 150 - 150 size with canvas, because setting width and height on image itself would just resize the image but I want to create new image with new size
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0, 150, 150) //draw image with canvas
}
links.href = reader.result; // url from local storage needed when image is clicked -
links.target = "_blank"; // open new blank page with original image
links.appendChild(img); // image is appended to <a>
document.body.appendChild(links); // <a> is appended to body, that body contains image thumbnail with a link linked to the image source
}
if (file) {
reader.readAsDataURL(file); // read uploaded files url
}
}
img.onload does not making any sense here. result is the same even when I remove it.
You are not drawing back the cropped image to your <img> tag... you will have to create two image Objects, let's call the first originalImage, and the second one croppedImage.
The one you will append to the document is croppedImageand originalImage will just stay in the cache.
When originalImage has loaded, you will paint it to a canvas, and then set croppedImage to the result of the canvas' toDataURL() method.
var read = function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function() {
var links = document.createElement('a');
// this will be the appended image
var croppedImage = new Image();
// do your DOM stuff
croppedImage.className = 'images';
links.href = reader.result;
links.target = "_blank";
links.appendChild(croppedImage);
document.body.appendChild(links);
// create a buffer image object
var originalImage = new Image();
// set its load handler
originalImage.onload = function() {
// create a canvas
var canvas = document.createElement('canvas');
// set canvas width/height
canvas.width = canvas.height = 150;
var context = canvas.getContext('2d');
// draw the buffered image to the canvas at required dimension
context.drawImage(originalImage, 0, 0, 150, 150);
// set the appended to doc image's src to the result of the cropping operation
croppedImage.src = canvas.toDataURL();
}
originalImage.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
}
};
upload.onchange = read;
.images {
margin-top: 30px;
padding: 30px;
}
<input type="file" id="upload" />
You could also have used only a single image object, but this would have required to reset the onload event in the onload event, to avoid an infinite loop, which is a little bit less clear :
var read = function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function() {
var links = document.createElement('a');
var img = new Image();
img.className = 'images';
links.href = reader.result;
links.target = "_blank";
links.appendChild(img);
document.body.appendChild(links);
img.onload = function() {
//reset the onload event so it does fire in a loop
img.onload = function(){return;};
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 150;
var context = canvas.getContext('2d');
context.drawImage(this, 0, 0, 150, 150);
this.src = canvas.toDataURL();
}
img.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
}
};
upload.onchange = read;
.images {
margin-top: 30px;
padding: 30px;
}
<input type="file" id="upload" />
var reader = new FileReader();
reader.onload = function () {
var links = document.createElement('a');
var img = new Image();
img.src = reader.result;
img.className = 'images';
img.onload = function () {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(this, 0, 0, 150, 150);
this.src = canvas.toDataURL(); // convert the canvas back to the image
links.appendChild(this); // append the updated image to the document
}
links.href = reader.result;
links.target = "_blank";
document.body.appendChild(links);
}
if (file) {
reader.readAsDataURL(file); //reads the data as a URL
}
I am trying to make a image preview before upload. But when i am trying to upload them, there are upload only the latest ones.
Example: Firstly i upload 3 images(and it appears 3 file selected), then i want to upload 4 more images. And my problem is that it appears 4 images selected(not 7 images selected) but in the image preview there are all of them.
I use python to upload them in the datastore and in the datastore there are only the latest images.
Javascript
//<![CDATA[
$(function(){
jQuery(function ($) {
var fileDiv = document.getElementById("upload");
var fileInput = document.getElementById("upload-image");
console.log(fileInput);
fileInput.addEventListener("change", function (e) {
var files = this.files
showThumbnail(files)
}, false)
function showThumbnail(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i]
var imageType = /image.*/
if (!file.type.match(imageType)) {
console.log("Not an Image");
continue;
}
var image = document.createElement("img");
// image.classList.add("")
var thumbnail = document.getElementById("thumbnail");
image.file = file;
thumbnail.appendChild(image)
var reader = new FileReader()
reader.onload = (function (aImg) {
return function (e) {
aImg.src = e.target.result;
};
}(image))
var ret = reader.readAsDataURL(file);
var canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
image.onload = function () {
ctx.drawImage(image, 100, 100)
}
}
}
});
});
//]]>
Html
<div class="row">
<div class="large-12 medium-12">
<input type="file" name='file' id="upload-image" multiple></input>
<div id="thumbnail">
</div>
</div>
</div>
Python
imagesnumber=len(self.get_uploads('file'))
while imagesnumber!=0:
image = self.get_uploads('file')[0]
img = DateBase()
img.blob_key = image.key()
img.img_url = images.get_serving_url( image.key() )
img.put()
imagesnumber=imagesnumber-1