This library provides basic image processing on the frontend side (inside the web browser) for use in TypeScript or Angular projects.
Available processing functions:
For best results I recommend to always use sharpen
after resize
- that's what Photoshop does, too ;)
Available File/HTMLImageElement utility functions:
Total canvas memory use exceeds the maximum limit
by using only one canvas for everythingnpm i ts-image-processor -S
import { getBlobForFile, imageProcessor, resize, sharpen, output } from 'ts-image-processor';
// If you have a file from <input>, convert it to base64-string first
getBlobForFile(file).then(base64 => {
// Use any of the functions with an existing blob (base64-string)
imageProcessor
.src(base64)
.pipe(
resize({maxWidth: 800, maxHeight: 800}),
sharpen(),
)
.then(processedBase64 => {
// Do whatever with your happy result :)
});
});
Feel free to create pull requests
imageProcessor.src()
should handle wrong inputimageProcessor.src()
should accept File
imageProcessor.src()
should accept FileList
imageProcessor.src()
should accept File[]
imageProcessor.src()
should accept string[]
(base64-array)rotate()
should provide more options than just 90° rotation