Comments (10)
Something like this should work:
imageTransformVariants: {
thumb_medium_: (transforms) => {
console.log(transforms);
transforms.resize = {
size: {
width: 400,
height: 400,
}
}
return transforms;
},
thumb_small_: (transforms) => {
transforms.resize = {
size: {
width: 200,
height: 200,
}
}
return transforms;
}
}
from filepond-plugin-image-transform.
I'm sorry but I'm not sure I understand the issue, can you elaborate?
from filepond-plugin-image-transform.
Sure, using the code above, if I try to upload an image that is 800px by 800px (it's less than 1280), it will error on the transforms.resize.size.width = 640;
line saying the resize transform doesn't exist. BUT if I change the imageResizeUpscale
to true
, then it will work, but it's not the outcome I want since the image will be upscaled to 1280.
from filepond-plugin-image-transform.
Can you try something like:
transforms.resize = {
size: { width: 640 }
}
from filepond-plugin-image-transform.
I don't understand where to add this, and also If I should leave imageResizeUpscale true or false.
from filepond-plugin-image-transform.
@xcrap inside a imageTransformVariants function.
from filepond-plugin-image-transform.
Well I already had that
'thumb_medium_': transforms => {
transforms.resize.size.width = 500
// transforms.resize = { size: { width: 500 }}
return transforms;
},
This has no effect, the original image is scaled to the full size or gives an error if upscale is set to false.
Adding transforms.resize = { size: { width: 500 }} inside imageTransformVariants I get this.
custom.min.js:1 Uncaught TypeError: Failed to execute 'createImageData' on 'CanvasRenderingContext2D': Value is not of type 'long'.
from filepond-plugin-image-transform.
It worked, actually, the problem was the lack of height, without it I get this error.
custom.min.js:formatted:8915 Uncaught TypeError: Failed to execute 'createImageData' on 'CanvasRenderingContext2D': Value is not of type 'long'.
Setting the height works perfectly. I wonder if a height it's really necessary.
from filepond-plugin-image-transform.
Something like this should work:
imageTransformVariants: { thumb_medium_: (transforms) => { console.log(transforms); transforms.resize = { size: { width: 400, height: 400, } } return transforms; }, thumb_small_: (transforms) => { transforms.resize = { size: { width: 200, height: 200, } } return transforms; } }
Hi @rikschennink could you update the imageTransformVariants
example in the documentation with the proposed solution? I think a lot of these problems (including my own) arise from using the example in the documentation which sets transforms.resize.size.width
. At first blush I thought that was equivalent to the solution above, but it isn't. The current documentation is the problem not the solution. ;)
from filepond-plugin-image-transform.
@tomdav999 Good point, done.
from filepond-plugin-image-transform.
Related Issues (20)
- TypeError: Cannot read property 'data' of undefined - when outputting Base64 string HOT 2
- Uncaught error for TIFF image files HOT 4
- can't find docs for adding text to the bottom of an image with a metadata object HOT 4
- Filename is lost after transform HOT 6
- Image Thumbnail Creation with Resize HOT 2
- transforming animated GIFs HOT 3
- Question variants name APPENDED HOT 1
- TypeScript support? HOT 2
- imageTransform is re-compressing (even when no changes) unless imageTransformOutputMimeType is set
- Documentation 404 HOT 2
- [Feature request] Add method on file to retrieve the blob of the transformed image HOT 6
- Duplicate Identifier 'FilePondFile' HOT 2
- Backend can get only last image object HOT 3
- Can we add webp? HOT 6
- No Releases yet. HOT 1
- Error when uploading file with specific bitmap
- Offline SVG markup causes Filepond to stop handling files HOT 1
- Crop and resize to exact ratio HOT 3
- Filesizes increases while image is (visually) not being transformed. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from filepond-plugin-image-transform.