onurzorluer / react-image-file-resizer Goto Github PK
View Code? Open in Web Editor NEWResize Local Images with React ๐ ๐
License: MIT License
Resize Local Images with React ๐ ๐
License: MIT License
When setting the compressed format to PNG no matter what quality value you are writing it's just not changing the URI compressed file size result.
Have anyone faced that issue?
const resizeFile = (file) =>
new Promise((resolve) => {
Resizer.imageFileResizer(
file,
300,
300,
"PNG",
1,
0,
(uri) => {
resolve(uri);
},
"file"
);
});
Describe the bug
Passing in a width value to both maxWidth & minWidth, as well as a height to both maxHeight & minHeight, does not resize to the desired width & height values. It appears to prioritize minWidth/minHeight and ignore max.
@onurzorluer Would you merge a PR that fixes this?
To Reproduce
Steps to reproduce the behavior:
Resizer.imageFileResizer(
file,
1024, // maxWidth
768, // maxHeight
"PNG",
100,
0,
async resizedBlob => resolve(resizedBlob as Blob),
"blob",
1024, // minWidth
768, // minHeight
);
The resulting image has the dimensions 1365 x 1024 instead of 1024 x 768. It should ignore the original aspect ratio and resize to the provided values.
Expected behavior
Output image should be 1024 x 768.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Additional context
NA
I tried it with all default and it doesn't seem to have changed anything. What did I miss?
Here is my code:
let { width=300, height=300, compressFormat="JPEG", quality=50, rotation=0, outputType='base64' } = {}
Resizer.imageFileResizer(file, width, height, compressFormat, quality, rotation, result => {
console.log(result)
}, outputType)
Does this work with the Expo managed workflow?
Describe the bug
vars
minWidth, // is the minWidth of the new image
minHeight, // is the minHeight of the new image
);
are not in the index.d.ts and hence cant build
Blob output is not correct for upload system.
To Reproduce
1-) Upload image file.
2-) I can't get correct blob output.
Expected behavior
Blob output should be like this;
Screenshots
blob output not correct.
Desktop (please complete the following information):
Here height and width ratio is preserved. We want a fixed aspect ratio to crop our image.
Thank you.
Describe the bug
Any png or webp image which has a transparency layer, turns to black back when converted to jpeg
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Transparent back should preferably turn white. This is what photoshop does BTW.
I was trying to get the local image and tried to resize it, but getting this error..
Unhandled Rejection (TypeError): Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
I have imported the file
import sample from './assets/sample.jpg';
and passed it into this method :
const resizeFile = (file) =>
new Promise((resolve) => {
Resizer.imageFileResizer(
file,
300,
300,
'JPEG',
100,
0,
(uri) => {
// resolve(uri);
},
'base64'
);
});
I would like to resize the image by N% without knowing the width and height. If that is not currently possible, it seems very basic and useful.
Hello, I am running into problems with compressing a .heic image. It seems that all other image formats work perfectly, but when I use a .heic image, I do not get a response - neither a success or error in my catch.
I guess my question is, I don't seem to find anywhere how to specifically reject the returned promise from the 'resizeFile' method from the Resizer.imageFileResizer() method, how can I do that? Does this package even support heic (I cant find anything online about .heic files relating to this package at all -- curious).
This is my resizeFile method:
const resizeFile = (file: File) => {
return new Promise((resolve) => {
Resizer.imageFileResizer(
file,
1080,
1080,
'JPEG',
80,
0,
(uri) => {
resolve(uri);
},
'base64',
);
});
};
And this is my try catch which I am calling it from:
files.forEach(async (file, i) => {
try {
const image = await resizeFile(file);
const newFile = dataURIToBlob(image);
formData.append(file.name, newFile);
} catch (err) {
console.log(err);
}
});
Expected behavior
I expect a response, either an error or success from passing any type of image.
Desktop (please complete the following information):
Thanks for this excellent library, using it live here. https://www.nextelection.com/home
I think the param order should be:
Resizer.imageFileResizer(
file, //is the file of the new image that can now be uploaded...
maxHeight, // is the maxHeight of the new image
maxWidth, // is the maxWidth of the new image
I've tested with 800,1000 and got an image which is width = 1000. Then I tested with 1000,800, and correctly got an image which is width = 800.
The quality parameter seems to have no predictable pattern to its behavior.
Looking at the description, one is led to believe that setting to 100 will bypass compression, and no compression will be applied for PNG images. To test this, I tried various experiments with the following settings:
A. maxWidth = 800
B. maxHeight = 1000
C. quality = 90, and compressFormat is same as source image
A. maxWidth = 800
B. maxHeight = 1000
C. quality = 100, and compressFormat is same as source image
Some Images are getting rotated inspite of rotate is 0.
Describe the bug
Resizing a bmp image called xxx.bmp and choosing JPEG as output yields a jpg image named xxx.bmpJPEG
It seems like the input and output file extensions are concatenated, whilst the name should only be xxx.JPEG .
i can't find any way to keep the metadata while resize my photo.
i used a very simple resize:
const resizedFile = await new Promise<File>(( resolve ) => {
resizer.imageFileResizer(
file,
maxWidth,
maxHeight,
'jpeg',
100,
0,
( file ) => resolve( file as File ),
'file'
);
});
and here u can see I'm setting the rotation to 0
, but what if I'm actually meaning is to "SET", like override, not adding, like how it is done currently.
according to docs
if I'm setting 0 nothing is happening, i get that, but what if i want to "SET" 0, by doing that basically I'm "correcting rotation", is that possible to do?
Getting above reference error on IOS device.
iOS 16.4.1
Describe the bug
When passing a file that isn't an image, AND doesn't have a type
, the function never produces a usable result. The responseUriFunc
is never called, and an error is never thrown.
To Reproduce
Steps to reproduce the behavior:
new File([ /* presumably any data will do */ ], 'foo', { type: '' })
responseUriFunc
and any thrown errors by wrapping the Resizer.imageFileResizer
in a try-catch.Expected behavior
Either of these options:
responseUriFunc
callback is called with an empty/undefined parameter. Not recommended, but it might be the last option if the above two can't work.I noticed in the source code that if the filetype is empty, you just carry on trying to resize the image, which isn't an image. Filetype could never be empty in practice. Any file that is resizable, must also be recognized by the browser, and therefor must also have a valid filetype. Letting empty filetypes through seems like a bad idea.
Desktop (please complete the following information):
Hi, i think react-image-file-resizer need to data uri to blob. We can use this to upload image files and so it will be easier.
Describe the bug
Base64 is being returned in memory as well as the blob uri, i'm concerned this may cause a memory leak in my application.
To Reproduce
Steps to reproduce the behavior:
My code:
const file = e.target.files ? e.target.files[0] : e.dataTransfer.files[0];
Resizer.imageFileResizer(
file,
isLogo ? 512 : 1080, // maxHeight
isLogo ? 512 : 1920, // maxWidth
'PNG',
100,
0,
blob => {
// creates new converted PNG file using blob
const convertedFile = new File([blob], 'convertedImage.png', {
type: 'image/png',
lastModified: Date.now()
});
const fileSizeMb = (convertedFile.size / 1024 / 1024).toFixed(4);
if (fileSizeMb > 10) {
return setFileError({
hasError: true,
error: 'Image size must be less than 10MB.'
});
}
// creates blob reference in memory
setImgPreview(window.URL.createObjectURL(blob));
setFile(convertedFile);
},
'blob'
);
Expected behavior
A clear and concise description of what you expected to happen.
Should only return blob when blob type is specified
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
Can't resize the gif and animated webp
I am tired of searching for react native modules for resizing gif and animated webp files.
libvip
Sharp for NodeJS is quite smooth and fast for manipulating images. It uses libvips for this.
ImageMagick / libwebp / 'cwebp, dwebp, gif2webp'
There is lib called kmagick for kotlin on android and ImageMagick-Android (java) to manipulate images. I have tried ImageMagick windows cli version and it does the work. It uses libwebp to do the job. If you can build any of those libs specially the libvips of sharpjs it would be great.
I find example of this
let filesToStore = []
Resizer.imageFileResizer(
file,
331,
700,
'JPEG',
100,
0,
blob => {
filesToStore.push(blob)
},
'base64'
)
And if I make console.log(filesToStore) it works.
But I thinks there a some promise or what, because I cant get result when page loaded. Only after few seconds.
So, how can I get result string?
Example:
let filesToStore = 'string'
Resizer.imageFileResizer(
file,
331,
700,
'JPEG',
100,
0,
blob => {
filesToStore = blob
},
'base64'
)
console.log(filesToStore)
filesToStore returns 'string', not blob result.
This package is having a similar error as browser-image-compression in that blank black images are returned.
Can reproduce on iPhone 6S running Safari. Attach and compress 20 high-res images at a time (as part of my project's "create post" flow). Some come out as blank black boxes.
my react version is ^17.0.2 and this package does not seem to be compatible with this version.
Why not make it possible to force a resize?
For example 500x1900 to like 128x128 for example - just stretch the image?
I'm pretty baffled that this is the case, but indeed it seems to be.
My function looks like
resizeFaviconLogo = (file) => new Promise((resolve) => { Resizer.imageFileResizer( file, 256, 256, 'PNG', 100, 0, (uri) => { resolve(uri); }, 'file' ); });
And the output PNG has a white background instead of transparency.
Is your feature request related to a problem? Please describe.
Im not sure
Describe the solution you'd like
a snippet on how to get target size say 1136x574
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
Describe the bug
Works fine in development. I just built the project and am getting "imageFileResizer is not a function". Built with Vite, if that makes any difference.
To Reproduce
Steps to reproduce the behavior:
Build project with Vitejs.
Expected behavior
Well, it would be awesome if it would just work. :)
Desktop (please complete the following information):
Another typo -
code breaks when run.
index.js:1 Uncaught ReferenceError: hight is not defined
at Function.value (index.js:1)
at Function.value (index.js:1)
at Image.t.onload (index.js:1)
a(e=Math.round(hight
to repro:
Resizer.imageFileResizer (
myBlob,
3000, // maxWidth, // is the maxWidth of the new image
3000, // maxHeight, // is the maxHeight of the new image
'JPEG', // compressFormat, // is the compressFormat of the new image
100, // quality, // is the quality of the new image
90, // rotation, // is the degree of clockwise rotation to apply to the image.
uri => {
//aaa
debugger;
console.log ( uri );
myIContentState.dailyContent.url = uri;
},
'base64', // outputType, // is the output type of the new image
3000, // minWidth, // is the minWidth of the new image
3000, // minHeight, // is the minHeight of the new image
);
} )
seems issue in in changeHeightWidth()
can you document this?
how to use the file after it is resized. how can we use the uri in using the image name??
Is your feature request related to a problem? Please describe.
If a base64 encoded image using react-image-file-sizer gets sent a REST API then tried to be saved to Firebase Storage then Firebase will throw as it uses atob to decode. This issue is better described here
Describe the solution you'd like
An optional parameter to the api that specifies the encode method (i.e. atob)
Describe alternatives you've considered
I've tried using alternatives but it would mean using multiple apis as I need file conversion and resizing as well.
Additional context
Please check the stackoverflow link mentioned above.
Describe the bug
I have a loading indicator that fires when image is being resized. Works fine unless I add minWidth or minHeight properties in which case front end stops rendering. On Safari it failed to render the resulting image entirely.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Expect to function same as without minWidth and minHeight.
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
I want to use it with typescript react.
Describe the solution you'd like
type definition @types/react-image-file-resizer
Describe alternatives you've considered
I just want to create 150 x 150 thumbnail. I will have to do that on server.
When I create an image in blob type. I not contain uid, name, lastModified, lastModifiedDate
Hi @onurzorluer, for starters I would like to thank you for the lovely library ๐
Is your feature request related to a problem? Please describe.
I have two issues that I would like to address and can even create a PR with it ๐
imageSizeResizer
method has too many parameters, and it's not the best developer experience you can imagine.Describe the solution you'd like
imageSizeResizer
to take one object argument. It would be easier for developers to use it because they wouldn't need to check the order of the arguments that they need to pass. The exported method would look like this:export default imageFileResizer: ({
file,
maxWidth,
maxHeight,
compressFormat,
quality,
rotation,
responseUriFunc,
outputType,
minWidth,
minHeight,
}) {}
Please let me know what do you think about the solutions and my contribution towards it.
I am looking for minWidth and minHeight?
Hello,
currently following outputType
type is => File, base64 & blob, can you add the output type for an array or something similar to when we upload Image/Files using input (input type='file')
the reason being for this is that if we resize the image and we take the output type as an File, then it's quite difficult to rename the file name, and uploading to AWS S3 or similar places.
Describe the bug
Version is updated from 0.1.5
to 0.1.6
and the /src
directory is updated on npm to include This PR. But I think the project is not built on npm because the /build
directory is not updated.
To Reproduce
Steps to reproduce the behavior:
npm i -S react-image-file-resizer
/src/index.js
and /build/index.js
files.Expected behavior
/build
directory should include the latest update which involves the exported function to have 8 arguments.
Screenshots
This is the part in /src/index.js
: (Note 8 arguments)
This is the corresponding part in /build/index.js
: (Note 7 arguments)
Desktop:
Describe the bug
For some reason, after resizing an image using a specific aspect ratio, it getting a bit pixeled, it may happen because of the resizing algo.
To Reproduce
Steps to reproduce the behavior:
compressFormat: png, quality: 100, rotation: 0, outputType: file
Expected behavior
Shouldn't reduce the quality of the image after resizing it.
I'm seeking this terrific react-image-file-resizer, but for Vuejs3
Describe the bug
Using Vitejs this is the only library that is unable to compile correctly in production. I understand that it is related to the way of compiling the library because if I copy and paste the code in my repository I get the Resizer to compile correctly.
Uncaught (in promise) TypeError: er.imageFileResizer is not a function
It may have related with the construction of the project in CommonJS.
To Reproduce
Steps to reproduce the behavior:
Build project with Vitejs.
Expected behavior
Well, it would be awesome if it would just work. :)
Desktop (please complete the following information):
OS: Ubuntu 20.04
Browser Chrome Edge
This is basically the same problem that this user had in issue #60
When I try to upload jpg file and to change the extension to png, file name in uri callback still has old name: filename.jpg instead of filename.png.
Lib version: ^0.4.2
The source is written to be a class, and then an export is created, which is just a plain function calling a static function inside that class.
The whole source could be a collection of plain functions, and looking at the export, you could export the main resize function as-is. Currently, you're wrapping it in a function with an otherwise identical signature, which is unneccesary overhead.
In short:
This will make for a cleaner source, and smaller package size.
Hello, may I make a feature request - take a target file size as a prop, and allow fixing 1 or more levers to achieve roughly that file size.
I.e. file size is a result of 2 levers - resolution and compression in case of JPG. So we could set resolution as fixed, while the compression can be auto varied to hit (around) target file size. Or vice versa - i.e. compression is fixed, while the resolution can be auto changed. Or both can be varied, etc etc.
A small iterative algo could loop through some trials and provide the best fit within say 5 trials or some such. Obviously this can be implemented outside this component, and just iteratively call the component with different params till the size is achieved, but why not bake this inside your component?
I would imagine this is a rather standard usecase for uploading images, and a robust solution would be quite beneficial.
Is your feature request related to a problem? Please describe.
Yes, how do I know when resizer fails to resize.
Describe the solution you'd like
Get an error message/response from Resizer so that I can handle it.
Describe alternatives you've considered
I tried to get response rom Resizer but it does not return anything when resizing fails.
import React from "react";
import Resizer from "react-image-file-resizer";
const DisplayTest = () => {
const takeFile = React.useRef([]);
const takeBlob = React.useRef([])
const [file, setFile] = React.useState([]);
const upload = e => {
e.preventDefault();
const coll = e.target.files;
if (coll.length < 1) return;
takeFile.current=[];
takeBlob.current =[];
for (let i = 0; i < coll.length; i++) {
Resizer.imageFileResizer(
coll[i],
800,
800,
"JPEG",
100,
0,
uri => {
console.log(uri);
takeBlob.current.push(uri)
},
"blob"
);
takeFile.current.push(coll[i]);
}
setFile(takeBlob.current);
//setFile(takeFile.current)
};
return (
</div>);
};
export default DisplayTest;
The createObjectURL from the blob files does not display the images in the img tag but the normal uncompressed file shows the images. Please how can I preview the images?
Looking forward to hearing from you soon. Thanks in advance
Is your feature request related to a problem? Please describe.
Support bilinear interpolation algorithm to resize image.
Describe the solution you'd like
What is the current algorithm used for resizing? Bilinear interpolation is the most widely used algorithm for resizing. Can you start supporting it?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.