So the alert gives undefined values for the width and height. I think the w and h values of the image from the img.onload calculation is not being passed to the values to return, or it may be returning w and h before the onload calculates them:
function getMeta(url){
var w; var h;
var img=new Image;
img.src=url;
img.onload=function(){w=this.width; h=this.height;};
return {w:w,h:h}
}
// "http://snook.ca/files/mootools_83_snookca.png" //1024x678
// "http://shijitht.files.wordpress.com/2010/08/github.png" //128x128
var end = getMeta("http://shijitht.files.wordpress.com/2010/08/github.png");
var w = end.w;
var h = end.h;
alert(w+'width'+h+'height');
How can I have the alert show the correct width and height?
http://jsfiddle.net/YtqXk/
Get image size with JavaScript
In order to read the data from an image you'll need to make sure it's first loaded. Here's a callback-based approach and two promise-based solutions:
Callback
const getMeta = (url, cb) => {
const img = new Image();
img.onload = () => cb(null, img);
img.onerror = (err) => cb(err);
img.src = url;
};
// Use like:
getMeta("https://i.stack.imgur.com/qCWYU.jpg", (err, img) => {
console.log(img.naturalWidth, img.naturalHeight);
});
Using the load Event listener (Promise):
const getMeta = (url) =>
new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = (err) => reject(err);
img.src = url;
});
// Usage example:
;(async() => {
const img = await getMeta('https://i.stack.imgur.com/qCWYU.jpg');
console.dir(img.naturalHeight + ' ' + img.naturalWidth);
})();
Using HTMLImageElement.decode() (Promise)
const getMeta = async (url) => {
const img = new Image();
img.src = url;
await img.decode();
return img
};
// Usage example:
getMeta('https://i.stack.imgur.com/qCWYU.jpg').then(img => {
console.dir(img.naturalHeight +' '+ img.naturalWidth);
});
MDN Docs: HTMLImageElement
Just pass a callback as argument like this:
function getMeta(url, callback) {
const img = new Image();
img.src = url;
img.onload = function() { callback(this.width, this.height); }
}
getMeta(
"http://snook.ca/files/mootools_83_snookca.png",
(width, height) => { alert(width + 'px ' + height + 'px') }
);
ES6
Using async/await you can do below getMeta function in sequence-like way and you can use it as follows (which is almost identical to code in your question (I add await keyword and change variable end to img, and change var to let keyword). You need to run getMeta by await only from async function (run).
function getMeta(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.onload = () => resolve(img);
img.onerror = () => reject();
img.src = url;
});
}
async function run() {
let img = await getMeta("http://shijitht.files.wordpress.com/2010/08/github.png");
let w = img.width;
let h = img.height;
size.innerText = `width=${w}px, height=${h}px`;
size.appendChild(img);
}
run();
<div id="size" />
Rxjs
const { race, fromEvent, map, mergeMap, of } = rxjs;
function getMeta(url) {
return of(url).pipe(
mergeMap((path) => {
const img = new Image();
let load = fromEvent(img, 'load').pipe(map(_=> img))
let error = fromEvent(img, 'error').pipe(mergeMap((err) => throwError(() => err)));
img.src = path;
return race(load, error);
})
);
}
let url = "http://shijitht.files.wordpress.com/2010/08/github.png";
getMeta(url).subscribe(img=> {
let w = img.width;
let h = img.height;
size.innerText = `width=${w}px, height=${h}px`;
size.appendChild(img);
}, e=> console.log('Load error'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.5.2/rxjs.umd.min.js" integrity="sha512-wBEi/LQM8Pi08xK2jwHJNCiHchHnfcJao0XVQvkTGc91Q/yvC/6q0xPf+qQr54SlG8yRbRCA8QDYrA98+0H+hg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="size" />
The w and h variables in img.onload function are not in the same scope with those in the getMeta() function. One way to do it, is as follows:
Fiddle: http://jsfiddle.net/ppanagi/28UES/2/
function getMeta(varA, varB) {
if (typeof varB !== 'undefined') {
alert(varA + ' width ' + varB + ' height');
} else {
var img = new Image();
img.src = varA;
img.onload = getMeta(this.width, this.height);
}
}
getMeta("http://snook.ca/files/mootools_83_snookca.png");
Get image size with jQuery
(depending on which formatting method is more suitable for your preferences):
function getMeta(url){
$('<img/>',{
src: url,
on: {
load: (e) => {
console.log('image size:', $(e.target).width(), $(e.target).height());
},
}
});
}
or
function getMeta(url){
$('<img/>',{
src: url,
}).on({
load: (e) => {
console.log('image size:', $(e.target).width(), $(e.target).height());
},
});
}
You will can try package.
import getImageSize from 'image-size-from-url';
const {width, height} = await getImageSize('URL');
Related
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
}
How do I return height from function getImgSize(imgSrc)? Bear in mind that onload() is async.
function getImgSize(imgSrc) {
const img = new Image();
img.onload = function() {
const height = img.height;
}
img.src = url;
}
You can wrap it in a promise (called "promisification"):
function getImgSize(imgSrc){
const img = new Image();
img.src = imgSrc;
return new Promise((resolve, reject) => {
img.onload = function() {
const height = img.height;
resolve(height); // Promise resolves to this value
};
img.onerror = function(error) {
reject(error); // Promise rejects with the error
};
});
}
But then you can only call this function in an async context. Most modern browsers support top-level await (in scripts where type=module), but just in case, you may want to wrap it in a function:
(async () => {
const heightOfImage = await getImgSize("...");
})();
At first I thought it should be as easy as:
const img = document.createElement('img');
img.onload = () => { ... }
img.onerror = () => { ... }
img.src = url;
But then it turned out I need to draw it on a canvas, then toBlob(). And don't forget to add CORS and crossorigin="anonymous" to the img tag. Isn't it a bit too involved? Is there a better way?
To show you the final solution (you need CORS headers):
function getFileFromURL(url) {
return new Promise((resolve, reject) => {
const fileName = url.split('/').pop();
const img = document.createElement('img');
img.setAttribute('crossorigin', 'anonymous');
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
canvas.toBlob(blob => {
resolve(new File([blob], fileName));
});
};
img.onerror = () => {
reject('something went wrong');
};
img.src = url;
})
}
The solution suggested by CBroe is arguably better:
function getFileFromURL(url) {
const fileName = url.split('/').pop();
return fetch(url)
.then(response => {
return new File([response.data], fileName);
});
}
Make sure you add CORS headers to the request(s).
I have an array list of image urls. I want to get an image width and height, to do so, I use:
const url = 'https://via.placeholder.com/350x150'
const img = new Image()
img.addEventListener('load', function () {
const isWide = img.width > img.height
const isTall = img.height > img.width
console.log(url, isWide, isTall, img.width, img.height) // <--- WORKS FINE
img.src = url
})
I have a list of images where I want to extract them all in some one Promise.all(arrayOfImageUrls).
How would I make it Promise so it awaits for all of the urls in the image array to complete ?
Here is my code which does not work, it just ignores the "await" and trigger the function before it was even finished:
const array = [
"https://via.placeholder.com/350x150",
"https://via.placeholder.com/650x250",
"https://via.placeholder.com/350x150",
"https://via.placeholder.com/650x250",
"https://via.placeholder.com/150x550",
"https://via.placeholder.com/510x450",
"https://via.placeholder.com/800x800"
]
function doSomethingAsync(url) {
return new Promise((resolve) => {
const img = new Image()
img.addEventListener('load', function() {
const isWide = img.width > img.height
const isTall = img.height > img.width
img.src = url
resolve({ url, isWide, isTall })
})
})
}
async function doAsync() {
const promises = []
array.forEach(url => {
promises.push(doSomethingAsync(url))
})
console.log('before promise all')
const results = await Promise.all(promises)
console.log('after promise all', results)
}
doAsync()
You have to put img.src = url before waiting for the images to load, not inside the onload handler. You are currently waiting for images with no src to load.
const array = [
"https://via.placeholder.com/350x150",
"https://via.placeholder.com/650x250",
"https://via.placeholder.com/150x550",
"https://via.placeholder.com/510x450",
"https://via.placeholder.com/800x800"
]
function doSomethingAsync(url) {
return new Promise((resolve) => {
const img = new Image();
img.src = url; // <--- Move this line here
img.addEventListener('load', function() {
const isWide = img.width > img.height
const isTall = img.height > img.width
resolve({ url, isWide, isTall })
})
})
}
async function doAsync() {
const promises = []
array.forEach(url => {
promises.push(doSomethingAsync(url))
})
console.log('before promise all')
const results = await Promise.all(promises)
console.log('after promise all', results)
}
doAsync()
I'm trying to create a JavaScript function that will return a dataURL from a JPEG. This function is intended to be called multiple times in the creation of a pdf document in a Vue.js application.
The following is code I've managed to cobble together from various web sites in seeking code examples for jsPDF use.
async loadImg (url) {
var dataURL = null
var toDataURL = async function (url) {
var img = new Image()
img.onError = function () {
alert('Cannot load image: "' + url + '"')
}
img.onload = async function () {
var canvas = document.createElement('canvas')
var context = canvas.getContext('2d')
canvas.height = this.naturalHeight
canvas.width = this.naturalWidth
context.drawImage(this, 0, 0)
dataURL = canvas.toDataURL('image/jpeg')
console.log('onload ' + dataURL)
}
img.src = url
}
await toDataURL(url)
console.log('end of function ' + dataURL)
return dataURL
}
I've tried using a callback approach, but no matter how what I've done I ultimately end up in the same state the console shows the 'end of function' as a null and then a few milliseconds later the onload remark shows up with a long string, which I assume is the dataURL of the graphic (jpg)
OK I thought async / await construct was the same as using promise.. but just to be on the safe side I rewrote my code using promise
toDataURL (url) {
return new Promise(function (resolve, reject) {
var img = new Image()
img.onError = function () {
reject(Error('Cannot load image: "' + url + '"'))
}
img.onload = async function () {
var canvas = document.createElement('canvas')
var context = canvas.getContext('2d')
canvas.height = this.naturalHeight
canvas.width = this.naturalWidth
context.drawImage(this, 0, 0)
resolve(canvas.toDataURL('image/jpeg'))
}
img.src = url
})
}
// in the function to create the pdf
imageData = toDataURL(url).then(function (response) {
console.log('Success!', response)
}, function (error) {
console.error('Failed!', error)
})
}
There are three jpgs that the main is trying to include in the pdf
In the console I see:
Report.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:277 Promise {<pending>}
Report.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:277 Promise {<pending>}
Report.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:277 Promise {<pending>}
Report.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:284 841.89 595.28
Report.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:272 Success! data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCALaBEcDASIAAhEBAxEB/8QAHgAAAAcBAQEBAAAAAAAAAAAAAAIDBAUGBw ...
There are two additional Success! data:image/ ...
My interpretation is while the results are different in that I get a promise object, which is pending then I get the image data. I'm still no further ahead.