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
}
Related
I'm doing an upload function that will allow the user to upload a chosen image to the server, and it is supposed to show a thumbnail of the current image. But when another image is chosen, it will add in the newer image thumbnail, and wouldn't remove the older image thumbnail.
So, how do I remove the previous image thumbnail and replace it with the newer one?
Here is my javascript code:
function previewFiles() {
var preview = document.querySelector('#preview');
var files = document.querySelector('input[type=file]').files;
function readAndPreview(file) {
// Make sure `file.name` matches our extensions criteria
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.height = 200;
image.title = file.name;
image.style.marginTop = '10px';
image.style.marginRight = '10px';
image.style.borderRadius = '3px';
image.style.marginBottom = '220px';
image.src = this.result;
preview.appendChild(image);
}, false);
reader.readAsDataURL(file);
}
}
if (files) {
[].forEach.call(files, readAndPreview);
}
}
And here is my HTML code:
<input type="file" id="browse" accept='.jpeg, .png, .jpg' onchange='previewFiles()' name="image" />
<div id='preview'></div>
Thanks in advance!
You need to remove all the children before adding new one.
reader.addEventListener("load", function () {
var image = new Image();
image.height = 200;
image.title = file.name;
image.style.marginTop = '10px';
image.style.marginRight = '10px';
image.style.borderRadius = '3px';
image.style.marginBottom = '220px';
image.src = this.result;
//removes all children (images)
preview.childNodes.forEach(c => preview.removeChild(c));
preview.appendChild(image);
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);
});
}
HTML Template
<html>
<form>
Image to resize: <input type="file" id="getImage"><br><br>
</form>
<img src="." id="image">
<html>
Java Script
<script>
document.getElementById('getImage').onchange = imageResize(60,60);
var imageResize = function (Width, Height) {
//-- GET FILE FROM FORM
var selectedFile = this.files[0];
//-- GET BASE 64
File.prototype.convertToBase64 = function (callback) {
var reader = new FileReader();
reader.onload = function (e) {
callback(e.target.result);
};
reader.readAsDataURL(this);
};
selectedFile.convertToBase64(function (base64) {
//-- MAKE IMAGE
var img = document.createElement('img');
img.src = base64;
//-- PUSH INTO CANVAS
img.onload = function () {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = Width; // If i change Width & Height to numbers it works!!
canvas.height = Height;
ctx.drawImage(this, 0, 0, Width, Height);
//-- SHOW IMAGE ON PAGE
document.getElementById("image").src = canvas.toDataURL();
};
});
};
</script>
Just above I'm setting the canvas width and height to 60x60 but i cant use the variables I've passed in without getting an error, and I cant figure out why. the error is
Uncaught TypeError: Cannot read property 'files' of undefined
here you should attach the event listener to input element.but instead you attached to img element
and you also want to access the files inside the event listener,so you should pass this reference to the listener
and the way you are attaching the event is not right.
your are doing this document.getElementById('getImage').onchange = imageResize(60,60);
this is wrong as it will execute the imageResize() and assigns the result to on change event.
actually you should attach reference of the function like below
document.getElementById('getImage').onchange = imageResize;
i edited your code a little.
try this snippet.
var imageResize = function(Width, Height, files) {
var selectedFile = files[0];
File.prototype.convertToBase64 = function(callback) {
var reader = new FileReader();
reader.onload = function(e) {
callback(e.target.result);
};
reader.readAsDataURL(this);
};
selectedFile.convertToBase64(function(base64) {
var img = document.createElement('img');
img.src = base64;
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = Width;
canvas.height = Height;
ctx.drawImage(this, 0, 0, Width, Height);
document.getElementById("image").src = canvas.toDataURL();
};
});
};
var file = document.getElementById('getImage');
file.onchange = function() {
imageResize(160, 160, this.files);
};
<form>
Image to resize:
<input type="file" id="getImage">
<br>
<br>
</form>
<img src="." id="image">
I am using HTML5 and fabric js for uploading multiple image in canvas. Right now i am uploading multiple image in canvas. But i want to find uploaded image width and height. I have seen one link Check image width and height before upload with Javascript
In this link not using file reader. But in my case using file reader.
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change",function (e) {
var file = e.target.files[0];
var reader = new FileReader();
console.log("reader " + reader);
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({ width: 250, height: 200, angle: 0}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});
};
reader.readAsDataURL(file);
});
canvas{
border: 1px solid black;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file">
<div style="">
<canvas id="canvas" width="450" height="450"></canvas>
</div>
You can create an img tag and get the dimensions from it.
document.getElementById('file').addEventListener("change",function (e) {
var file = e.target.files[0];
var reader = new FileReader();
var output = document.getElementById('output');
reader.onload = function (f) {
var data = f.target.result;
var img = document.createElement('img');
img.src = data;
img.onload = function() {
output.innerHTML = 'width: ' + img.width + '\n' +
'height: ' + img.height;
};
};
reader.readAsDataURL(file);
});
<input type="file" id="file"/>
<pre id="output"></pre>
#jcubic is right about using an <img> tag, (while there would be some ways to get this info without it) but he is absolutely wrong in how he gets the image's dimensions.
.clientWidth and .clientHeight will return the computed width of the <img> element. You don't care about it, since what you are drawing on your canvas is the image contained in the <img>, not the <img> element itself.
What you need then is .width and .height properties or .naturalWidth and .naturalHeight.
document.getElementById('file').addEventListener("change",function (e) {
var file = e.target.files[0];
var reader = new FileReader();
var output = document.getElementById('output');
reader.onload = function () {
var data = this.result;
var img = new Image();
img.src = data;
img.onload = function() {
output.innerHTML = 'width: ' + img.width + '\n' +
'height: ' + img.height;
};
};
reader.readAsDataURL(file);
});
<input type="file" id="file"/>
<pre id="output"></pre>
I have a function that takes an img-element and returns a data url. This works like 7/10 times and returns a blank image 3/10 times. I view the created data url through my browser(chrome) and use the same images so I know that this function is returning broken images. Can anyone spot why?
function imgToDataURL(img) {
var canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
var c = canvas.getContext('2d');
c.drawImage(img, 0, 0);
dataurl = canvas.toDataURL();
return dataurl;
}
$(function() {
img = new Image();
img.crossOrigin = '';
img.onload = function() {
newimg = new Image();
newimg.onload = function() {
document.body.appendChild(newimg);
}
newimg.src = imgToDataURL(img);
}
img.src = 'https://somedomain.s3.amazonaws.com/someimg.png';
});
This example works most of the time but sometimes ends with a large white rectangle instead of the image.
You have to wait for images to load before drawing them using .drawImage function.
Only after the image is loaded by the browser you can call your imgToDataURL function.
Something like this:
var image_sources = ["img1.png", "img2.png", "..."];
for(var i=0; i<image_sources.length; i++) {
var new_img = document.createElement("img");
new_img.onload = function() {
imgToDataURL(this);
};
new_img.src = image_sources[i];
}