@uppy/thumbnail-generator
Advanced tools
Uppy plugin that generates small previews of images to show on your upload UI.
Package description
@uppy/thumbnail-generator is a plugin for the Uppy file uploader that generates image thumbnails for preview purposes. It is particularly useful for providing users with a visual representation of the images they are uploading.
Generate Thumbnails
This feature allows you to generate thumbnails for images that are being uploaded. The `thumbnailWidth` option specifies the width of the generated thumbnail. The `thumbnail:generated` event is triggered when a thumbnail is successfully created, providing the file and preview URL.
const Uppy = require('@uppy/core');
const ThumbnailGenerator = require('@uppy/thumbnail-generator');
const uppy = Uppy();
uppy.use(ThumbnailGenerator, {
thumbnailWidth: 200,
});
uppy.on('thumbnail:generated', (file, preview) => {
console.log(file.name, preview);
// You can now use the preview URL to display the thumbnail
});Custom Thumbnail Dimensions
This feature allows you to specify custom dimensions for the generated thumbnails. By setting both `thumbnailWidth` and `thumbnailHeight`, you can control the size of the thumbnails more precisely.
const Uppy = require('@uppy/core');
const ThumbnailGenerator = require('@uppy/thumbnail-generator');
const uppy = Uppy();
uppy.use(ThumbnailGenerator, {
thumbnailWidth: 300,
thumbnailHeight: 300,
});
uppy.on('thumbnail:generated', (file, preview) => {
console.log(file.name, preview);
// You can now use the preview URL to display the thumbnail
});Thumbnail Quality
This feature allows you to set the quality of the generated thumbnails. The `quality` option accepts a value between 0 and 1, where 1 is the highest quality.
const Uppy = require('@uppy/core');
const ThumbnailGenerator = require('@uppy/thumbnail-generator');
const uppy = Uppy();
uppy.use(ThumbnailGenerator, {
thumbnailWidth: 200,
quality: 0.8,
});
uppy.on('thumbnail:generated', (file, preview) => {
console.log(file.name, preview);
// You can now use the preview URL to display the thumbnail
});Sharp is a high-performance image processing library that can resize, crop, and convert images in various formats. Unlike @uppy/thumbnail-generator, which is specifically designed for generating thumbnails within the Uppy ecosystem, Sharp is a more general-purpose library that can be used in a variety of image processing tasks.
Jimp is an image processing library for Node.js that supports image resizing, cropping, and various other manipulations. Similar to Sharp, Jimp is a general-purpose library and not specifically tied to any file uploader like Uppy. It offers a wide range of image processing functionalities.
GraphicsMagick (gm) is a Node.js wrapper for the GraphicsMagick and ImageMagick image processing libraries. It provides extensive image manipulation capabilities, including resizing and thumbnail generation. Unlike @uppy/thumbnail-generator, gm is not specifically designed for integration with file uploaders but offers a broader range of image processing features.
Changelog
0.27.3
Released: 2018-09-03.
New versions in this release:
| Package | Version | Package | Version | |-|-|-|-| | uppy | 0.27.3 | @uppy/instagram | 0.27.3 | | @uppy/aws-s3-multipart | 0.27.2 | @uppy/progress-bar | 0.27.2 | | @uppy/aws-s3 | 0.27.2 | @uppy/provider-views | 0.27.2 | | @uppy/companion-client | 0.27.2 | @uppy/react | 0.27.3 | | @uppy/companion | 0.14.3 | @uppy/redux-dev-tools | 0.27.2 | | @uppy/core | 0.27.1 | @uppy/status-bar | 0.27.2 | | @uppy/dashboard | 0.27.3 | @uppy/thumbnail-generator | 0.27.2 | | @uppy/drag-drop | 0.27.2 | @uppy/transloadit | 0.27.3 | | @uppy/dropbox | 0.27.2 | @uppy/tus | 0.27.3 | | @uppy/file-input | 0.27.2 | @uppy/url | 0.27.3 | | @uppy/form | 0.27.2 | @uppy/utils | 0.27.1 | | @uppy/golden-retriever | 0.27.2 | @uppy/webcam | 0.27.2 | | @uppy/google-drive | 0.27.3 | @uppy/xhr-upload | 0.27.2 | | @uppy/informer | 0.27.2 | - | - |
Changes:
z-index primarily. (@goto-bus-stop)getFileType (#1022 / @goto-bus-stop)buffer warnings in IE10 when using the uppy CDN package. (#1019 / @goto-bus-stop)UPPYSERVER_ environment variables to COMPANION_ + more. The old names still work for now but will be dropped in a future release (#1037 / @kvz)https://api2.transloadit.com/companion, using the hosted uppy-server URLs will now throw an error (#1038 / @goto-bus-stop)Readme
Uppy plugin that generates small previews of images to show on your upload UI.
Uppy is being developed by the folks at Transloadit, a versatile file encoding service.
const Uppy = require('@uppy/core')
const ThumbnailGenerator = require('@uppy/thumbnail-generator')
const uppy = Uppy()
uppy.use(ThumbnailGenerator, {
thumbnailWidth: 200
})
$ npm install @uppy/thumbnail-generator --save
We recommend installing from npm and then using a module bundler such as Webpack, Browserify or Rollup.js.
Alternatively, you can also use this plugin in a pre-built bundle from Transloadit's CDN: Edgly. In that case Uppy will attach itself to the global window.Uppy object. See the main Uppy documentation for instructions.
FAQs
Uppy plugin that generates small previews of images to show on your upload UI.
The npm package @uppy/thumbnail-generator receives a total of 133,270 weekly downloads. As such, @uppy/thumbnail-generator popularity was classified as popular.
We found that @uppy/thumbnail-generator demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
uv, Python's new package manager, offers a faster and more efficient alternative to pip with features that simplify tooling, manage Python versions, and streamline development workflows.
Research
Security News
Socket researchers have uncovered 3.7 million fake GitHub stars, highlighting a growing threat linked to scams, fraud, and malware, with these campaigns rapidly increasing over the last six months.
Security News
Deno's Standard Library has stabilized after four years of development, offering developers a collection of well-maintained tools compatible with Deno, Node.js, Cloudflare Workers, and browsers with bundlers.