I want to check the image alpha channel to see if it has a background, and reject it if true, allow it if false but when I upload an image using the const changefile, the hasAlpha function doesn't serve an 'error' alert if the image has a background.
Function for checking if the image has a transparent background:
export function hasAlpha(file) {
return new Promise((resolve, reject) => {
let hasAlpha = false;
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.crossOrigin = "Anonymous";
img.onerror = reject;
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
for (let j = 0; j < imgData.length; j += 4) {
if (imgData[j + 3] < 255) {
hasAlpha = true;
break;
}
}
resolve(hasAlpha);
};
img.src = URL.createObjectURL(file);
});
}
Where the image is uploaded:
const changefile = async (e) => {
if (e.target.id === "mainImg") {
1;
let file = e.target.files[0] ? e.target.files[0] : "";
if (file) {
let extension = file.name.substr(file.name.lastIndexOf(".") + 1);
if (validExtensions.includes(extension)) {
setTempImg(URL.createObjectURL(file));
setstate({
...state,
image: file
});
if (hasAlpha(URL.createObjectURL(file))) {
alert(hasAlpha(URL.createObjectURL(file)));
} else {
alert("error");
}
} else {
setstate({
...state,
image: ""
});
}
} else {
setstate({
...state,
image: ""
});
setTempImg("");
}
}
};
I am here from your Google Docs bug. I have already sent a proposal to you. I tested this code. If it doesn't work in your project, it means another bug exists in your React project. To solve those bugs I need to see your whole react component code.
function hasAlpha(file) {
return new Promise((resolve, reject) => {
const img = new Image()
// create image from file
img.src = URL.createObjectURL(file)
img.onerror = reject
img.onload = () => {
// create canvas
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = img.width
canvas.height = img.height
ctx.drawImage(img, 0, 0)
// get image data
const data = ctx.getImageData(0, 0, canvas.width, canvas.height)
// check if image has any transparent background
const hasTransparent = [...data.data].some((value, index) => {
return index % 4 === 3 && value < 255
})
return hasTransparent ? resolve(true) : resolve(false)
}
})}
You have to wait before hasAlpha() resolve or reject. So, you should call await hasAlpha(file) and wrap entire call with try catch. If promise rejected you can access it in catch block.
try {
if(await hasAlpha(file)) {
// promise resloved, image is transparent
} else {
// promise resloved, image is not transparent
}
} catch (e) {
// promise rejected
}
I need to modify existing code with new requirement:
Image dimensions has to be validated before upload from browser.
If height or width of image is less than 500 px it has to be increased to 500px.
Here is the code that currently used in our app to upload images.
var fileInputElem = document.getElementById('P3_FILE');
var fileIndex = 0;
var deferredObject = $.Deferred();
var s$=apex.widget.waitPopup;
// builds a js array from long string
function clob2Array(clob, size, array) {
loopCount = Math.floor(clob.length / size) + 1;
for (var i = 0; i < loopCount; i++) {
array.push(clob.slice(size * i, size * (i + 1)));
}
return array;
}
// converts binaryArray to base64 string
function binaryArray2base64(int8Array) {
var data = "";
var bytes = new Uint8Array(int8Array);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
data += String.fromCharCode(bytes[i]);
}
return btoa(data);
}
// a recursive function that calls itself to upload multiple files synchronously
function uploadFile(pFileIndex) {
var fileCount = 0;
var file = fileInputElem.files[pFileIndex];
var reader = new FileReader();
var uploadTarget = apex.item("P3_UPLOAD_TARGET").getValue();
reader.onload = (function(pFile) {
return function(e) {
if (pFile) {
var base64 = binaryArray2base64(e.target.result);
var f01Array = [];
f01Array = clob2Array(base64, 30000, f01Array);
apex.server.process(
'UPLOAD_FILE',
{
x01: file.name,
x02: file.type,
x03: uploadTarget,
x04: apex.item("P3_FILE_TYPE").getValue(),
x05: parent.apex.item('P2_SCREEN_TYPE').getValue(),
f01: f01Array
},
{
dataType: 'json',
success: function(data) {
if (data.j_retn_status == 'SUCCESS') {
if (fileIndex === 0) {
apex.item('P3_PRIMARY_ID').setValue(data.j_primary_id);
}
fileIndex++;
if (fileIndex < fileInputElem.files.length) {
// start uploading the next file
var d = fileIndex - 1;
uploadFile(fileIndex);
} else {
// all files have been uploaded at this point
apex.item('P3_FILES_COUNT').setValue(fileIndex);
fileInputElem.value = '';
deferredObject.resolve('done');
}
} else {
//alert('Oops! Something went terribly wrong. Please try again or contact your application administrator.' + data.j_retn_status);
$('#FILEDISP'+pFileIndex).html($('#FILEDISP'+pFileIndex).text() + '<p class="fa-window-close" aria-hidden="true"></p>' ) ;
}
}
}
);
}
}
})(file);
$('#FILEDISP'+pFileIndex).html($('#FILEDISP'+pFileIndex).text() + '<p class="fa fa-check" aria-hidden="true"></p>' ) ;
reader.readAsArrayBuffer(file);
return deferredObject.promise();
}
How can we modify it to validate image dimensions and increase image width or height before upload please?
Thank you!
You could probably do something like below, although I'd look into using a library for doing something like this in case there are gotchas for certain situations.
const MIN_WIDTH = 500;
const MIN_HEIGHT = 500;
const imageInputEl = document.getElementById('example-image');
imageInputEl.addEventListener("change", handleFiles, false);
function handleFiles() {
const fileList = this.files;
const file = fileList[0];
if ( /\.(jpe?g|png)$/i.test(file.name) ) {
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.src = this.result;
document.getElementById('input-image').src = this.result;
image.onload = () => {
const width = image.naturalWidth;
const height = image.naturalHeight;
let canvasWidth = MIN_WIDTH;
let canvasHeight = MIN_HEIGHT;
if (width >= MIN_WIDTH) canvasWidth = width;
if (height >= MIN_HEIGHT) canvasHeight = height;
const canvas = document.createElement("canvas");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
const ctx = canvas.getContext("2d");
ctx.drawImage(document.getElementById('input-image'), 0, 0, canvasWidth, canvasHeight);
const resizedImage = canvas.toDataURL("image/png");
document.getElementById('resized-image').src = resizedImage;
};
});
reader.readAsDataURL(file);
} else {
throw new Error('Not a valid image file.');
}
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div class="container">
<input type="file"id="example-image" accept="image/png, image/jpeg">
<div>
Input Image:
</div>
<img id="input-image">
<div>
Resized Image:
</div>
<img id="resized-image">
</div>
I am trying to do a validation where uploaded image cannot have width or height more than 1024px. This is what I did, but it doesn't work every time for some reason:
readThumbUrl(event: any) {
this.thumbnailFile = [];
const eventObj: MSInputMethodContext = <MSInputMethodContext> event;
const target: HTMLInputElement = <HTMLInputElement> eventObj.target;
const files: FileList = target.files;
if (files) {
this.thumbnailFile.push(files[0]);
}
var image;
if (event.target.files && event.target.files[0]) {
let reader = new FileReader();
reader.onload = (event: ProgressEvent) => {
this.thumbUrl = (<FileReader>event.target).result;
// This part is for validation
image = new Image();
image.src = (<FileReader>event.target).result;
// Here, sometimes it takes width 0 and sometimes it takes image width,
// dont know for what reason.
if (image.width > 1024 || image.height > 1024) {
this.dimensionError = true;
}
};
reader.readAsDataURL(event.target.files[0]);
}
this.videoModel.thumbnail = event.target.value;
}
So validation sometimes triggers, sometimes does not, is there a better way to do it?
I have a Javascript that allows to resize multiple images and uploads them. So far it works until you choose more than about 5 files. From about 5 to 25 selected files Chrome browser (or others) just gets really slow, if you choose even more the browser crashes.
It seems to take a lot of memory.
Do you have any suggestions what could avoid the freezing of the browser/computer or the crash?
Thank you very much for your help!
// Once files have been selected
document.querySelector('form input[type=file]').addEventListener('change', function(event){
$( "#load" ).html( "<img src=\"http://www.maxk.at/image_uploader/ajax-loader.gif\"> Upload läuft" );
// Read files
var files = event.target.files;
// Iterate through files
var j=1;
var k=files.length;
for (var i = 0; i < files.length; i++) {
// Ensure it's an image
if (files[i].type.match(/image.*/)) {
// Load image
var reader = new FileReader();
reader.onload = function (readerEvent) {
var image = new Image();
image.onload = function (imageEvent) {
// Add elemnt to page
var imageElement = document.createElement('div');
imageElement.classList.add('uploading');
imageElement.innerHTML = '<span class="progress"><span></span></span>';
var progressElement = imageElement.querySelector('span.progress span');
progressElement.style.width = 0;
document.querySelector('form div.photos').appendChild(imageElement);
// Resize image
var canvas = document.createElement('canvas'),
max_size = 1200,
width = image.width,
height = image.height;
if (width > height) {
if (width > max_size) {
height *= max_size / width;
width = max_size;
}
} else {
if (height > max_size) {
width *= max_size / height;
height = max_size;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
// Upload image
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// Update progress
xhr.upload.addEventListener('progress', function(event) {
var percent = parseInt(event.loaded / event.total * 100);
progressElement.style.width = percent+'%';
}, false);
// File uploaded / failed
xhr.onreadystatechange = function(event) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
imageElement.classList.remove('uploading');
imageElement.classList.add('uploaded');
imageElement.style.backgroundImage = 'url('+xhr.responseText+')';
console.log('Image uploaded: '+j+k+'Abstand'+xhr.responseText);
j++;
if (j==k){$("#load").html("Upload beendet");}
if (k==1){$("#load").html("Upload beendet");}
} else {
imageElement.parentNode.removeChild(imageElement);
}
}
}
// Start upload
xhr.open('post', 'process.php', true);
xhr.send(canvas.toDataURL('image/jpeg'));
}
}
image.src = readerEvent.target.result;
}
reader.readAsDataURL(files[i]);
}
}
// Clear files
event.target.value = '';
});
I have a JPS with a form in which a user can put an image:
<div class="photo">
<div>Photo (max 240x240 and 100 kb):</div>
<input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/>
</div>
I have written this js:
function checkPhoto(target) {
if(target.files[0].type.indexOf("image") == -1) {
document.getElementById("photoLabel").innerHTML = "File not supported";
return false;
}
if(target.files[0].size > 102400) {
document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)";
return false;
}
document.getElementById("photoLabel").innerHTML = "";
return true;
}
which works fine to check file type and size. Now I want to check image width and height but I cannot do it.
I have tried with target.files[0].width but I get undefined. With other ways I get 0.
Any suggestions?
The file is just a file, you need to create an image like so:
var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
var file, img;
if ((file = this.files[0])) {
img = new Image();
var objectUrl = _URL.createObjectURL(file);
img.onload = function () {
alert(this.width + " " + this.height);
_URL.revokeObjectURL(objectUrl);
};
img.src = objectUrl;
}
});
Demo: http://jsfiddle.net/4N6D9/1/
I take it you realize this is only supported in a few browsers. Mostly firefox and chrome, could be opera as well by now.
P.S. The URL.createObjectURL() method has been removed from the MediaStream interface. This method has been deprecated in 2013 and superseded by assigning streams to HTMLMediaElement.srcObject. The old method was removed because it is less safe, requiring a call to URL.revokeOjbectURL() to end the stream. Other user agents have either deprecated (Firefox) or removed (Safari) this feature feature.
For more information, please refer here.
In my view the perfect answer you must required is
var reader = new FileReader();
//Read the contents of Image File.
reader.readAsDataURL(fileUpload.files[0]);
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;
if (height > 100 || width > 100) {
alert("Height and Width must not exceed 100px.");
return false;
}
alert("Uploaded image has valid Height and Width.");
return true;
};
};
I agree. Once it is uploaded to somewhere the user's browser can access then it is pretty easy to get the size. As you need to wait for the image to load you'll want to hook into the onload event for img.
Updated example:
// async/promise function for retrieving image dimensions for a URL
function imageSize(url) {
const img = document.createElement("img");
const promise = new Promise((resolve, reject) => {
img.onload = () => {
// Natural size is the actual image size regardless of rendering.
// The 'normal' `width`/`height` are for the **rendered** size.
const width = img.naturalWidth;
const height = img.naturalHeight;
// Resolve promise with the width and height
resolve({width, height});
};
// Reject promise on error
img.onerror = reject;
});
// Setting the source makes it start downloading and eventually call `onload`
img.src = url;
return promise;
}
// How to use in an async function
(async() => {
const imageUrl = 'http://your.website.com/userUploadedImage.jpg';
const imageDimensions = await imageSize(imageUrl);
console.info(imageDimensions); // {width: 1337, height: 42}
})();
Older example:
var width, height;
var img = document.createElement("img");
img.onload = function() {
// `naturalWidth`/`naturalHeight` aren't supported on <IE9. Fallback to normal width/height
// The natural size is the actual image size regardless of rendering.
// The 'normal' width/height are for the **rendered** size.
width = img.naturalWidth || img.width;
height = img.naturalHeight || img.height;
// Do something with the width and height
}
// Setting the source makes it start downloading and eventually call `onload`
img.src = "http://your.website.com/userUploadedImage.jpg";
This is the easiest way to check the size
let img = new Image()
img.src = window.URL.createObjectURL(event.target.files[0])
img.onload = () => {
alert(img.width + " " + img.height);
}
Check for specific size. Using 100 x 100 as example
let img = new Image()
img.src = window.URL.createObjectURL(event.target.files[0])
img.onload = () => {
if(img.width === 100 && img.height === 100){
alert(`Nice, image is the right size. It can be uploaded`)
// upload logic here
} else {
alert(`Sorry, this image doesn't look like the size we wanted. It's
${img.width} x ${img.height} but we require 100 x 100 size image.`);
}
}
Attach the function to the onchange method of the input type file /onchange="validateimg(this)"/
function validateimg(ctrl) {
var fileUpload = ctrl;
var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
if (regex.test(fileUpload.value.toLowerCase())) {
if (typeof (fileUpload.files) != "undefined") {
var reader = new FileReader();
reader.readAsDataURL(fileUpload.files[0]);
reader.onload = function (e) {
var image = new Image();
image.src = e.target.result;
image.onload = function () {
var height = this.height;
var width = this.width;
if (height < 1100 || width < 750) {
alert("At least you can upload a 1100*750 photo size.");
return false;
}else{
alert("Uploaded image has valid Height and Width.");
return true;
}
};
}
} else {
alert("This browser does not support HTML5.");
return false;
}
} else {
alert("Please select a valid Image file.");
return false;
}
}
const ValidateImg = (file) =>{
let img = new Image()
img.src = window.URL.createObjectURL(file)
img.onload = () => {
if(img.width === 100 && img.height ===100){
alert("Correct size");
return true;
}
alert("Incorrect size");
return true;
}
}
I think this may be the simplest for uploads if you want to use it other functions.
async function getImageDimensions(file) {
let img = new Image();
img.src = URL.createObjectURL(file);
await img.decode();
let width = img.width;
let height = img.height;
return {
width,
height,
}
}
Use like
const {width, height } = await getImageDimensions(file)
Suppose you were storing an image for Tiger taken in Kenya. So you could use it like to upload to cloud storage and then store photo information.
const addImage = async (file, title, location) => {
const { width, height } = await getImageDimensions(file)
const url = await uploadToCloudStorage(file) // returns storage url
await addToDatabase(url, width, height, title, location)
}
function validateimg(ctrl) {
var fileUpload = $("#txtPostImg")[0];
var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
if (regex.test(fileUpload.value.toLowerCase())) {
if (typeof (fileUpload.files) != "undefined") {
var reader = new FileReader();
reader.readAsDataURL(fileUpload.files[0]);
reader.onload = function (e) {
var image = new Image();
image.src = e.target.result;
image.onload = function () {
var height = this.height;
var width = this.width;
console.log(this);
if ((height >= 1024 || height <= 1100) && (width >= 750 || width <= 800)) {
alert("Height and Width must not exceed 1100*800.");
return false;
}
alert("Uploaded image has valid Height and Width.");
return true;
};
}
} else {
alert("This browser does not support HTML5.");
return false;
}
} else {
alert("Please select a valid Image file.");
return false;
}
}
You can do the steps for previewing the image without showing it which is supported on all browsers. Following js code shows you how to check the width and height :
var file = e.target.files[0];
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.src = this.result as string;
image.addEventListener('load', function () {
console.log(`height: ${this.height}, width: ${this.width}`);
});
}, false);
reader.readAsDataURL(file);
}
Based on Mozilla docs:
The readAsDataURL method is used to read the contents of the specified
Blob or File. When the read operation is finished, the readyState
becomes DONE, and the loadend is triggered. At that time, the result
attribute contains the data as a data: URL representing the file's
data as a base64 encoded string.
And the browser compatibility is listed too.
In my case, I needed to also prevent the form from being submited, so here is the solution that worked for me.
The preventDefault will stop the form action, then we check the size and dimensions of the image in the onload function.
If all good, we allow the submit.
As the submit button gets disabled if a user still tries to submit the form with an invalid image, I also had to re-able the submit button once a valid image is inputted.
const validateMaxImageFileSize = (e) => {
e.preventDefault();
const el = $("input[type='file']")[0];
if (el.files && el.files[0]) {
const file = el.files[0];
const maxFileSize = 5242880; // 5 MB
const maxWidth = 1920;
const maxHeight = 1080;
const img = new Image();
img.src = window.URL.createObjectURL(file);
img.onload = () => {
if (file.type.match('image.*') && file.size > maxFileSize) {
alert('The selected image file is too big. Please choose one that is smaller than 5 MB.');
} else if (file.type.match('image.*') && (img.width > maxWidth || img.height > maxHeight)) {
alert(`The selected image is too big. Please choose one with maximum dimensions of ${maxWidth}x${maxHeight}.`);
} else {
e.target.nodeName === 'INPUT'
? (e.target.form.querySelector("input[type='submit']").disabled = false)
: e.target.submit();
}
};
}
};
$('form.validate-image-size').on('submit', validateMaxImageFileSize);
$("form.validate-image-size input[type='file']").on('change', validateMaxImageFileSize);
function uploadfile(ctrl) {
var validate = validateimg(ctrl);
if (validate) {
if (window.FormData !== undefined) {
ShowLoading();
var fileUpload = $(ctrl).get(0);
var files = fileUpload.files;
var fileData = new FormData();
for (var i = 0; i < files.length; i++) {
fileData.append(files[i].name, files[i]);
}
fileData.append('username', 'Wishes');
$.ajax({
url: 'UploadWishesFiles',
type: "POST",
contentType: false,
processData: false,
data: fileData,
success: function(result) {
var id = $(ctrl).attr('id');
$('#' + id.replace('txt', 'hdn')).val(result);
$('#imgPictureEn').attr('src', '../Data/Wishes/' + result).show();
HideLoading();
},
error: function(err) {
alert(err.statusText);
HideLoading();
}
});
} else {
alert("FormData is not supported.");
}
}