When you use input file, you can get base64 string as array without worrying about orientation
of exif.
$ npm install exif-rotate-js
const data = await getBase64Strings(files, {maxSize, type, quality}))
- a promise returning array string as base64 like
["data:image/jpeg;base64,/9j/4AAQS..."]
files
: input target files. User can select multiple files.maxSize = 720
: canvas max size. When image's width is greater than height,maxSize
applies to width. And vice versa.type = 'image/jpeg'
: the mime type of the generated image. Any mime type supported by HTMLCanvasElement.toDataURL() is supported.quality (optional)
: a number between0
and1
indicating the image quality to use for image formats that use lossy compression such asimage/jpeg
andimage/webp
. If this argument is anything else, the default value for image quality is used. As per the spec, the default (undefined
) value will use0.92
.
import { getBase64Strings } from 'exif-rotate-js';
const elem = document.getElementById('fileImage');
if (elem) {
elem.onchange = async (e) => {
if (!e.target) return;
const data = await getBase64Strings(e.target.files, { maxSize: 1024 });
console.log(data); // ["data:image/jpeg;base64,/9j/4AAQS..."] as type of Array
};
}