frontend-image-compress
v3.0.2
Published
compress image-type file in frontend using canvas
Downloads
383
Maintainers
Readme
A simple function using canvas to compress image file.
Usage
using cdn
<input type='file' id='test'/>
<script src="https://unpkg.com/frontend-image-compress@latest/dist/index.min.js"></script>
<script>
const $file = document.querySelector('#test');
$file.onchange = async function(e) {
const file = e.target.files[0];
window.Compress.compressImageFile(file).then(compressedFile=>{}).catch(err=>{
alert(err.toString())
})
}
</script>
using npm or yarn
- yarn:
yarn add frontend-image-compress
- npm:
npm i frontend-image-compress
import { compressImageFile } from 'frontend-image-compress'
const $file = document.querySelector('#test');
$file.onchange = async function(e) {
const file = e.target.files[0];
const compressedFile = await compressImageFile(file)
}
API
when using script tag, you need to use window.Compress.xx
, Compress
is just a namespace
compressImageFile(file, quality):newFile
name | type | description ---|---| --- file | File | from input[type="file"] quality | number | range: 0~1, default is 0.7(decrease this value if you got console warning) return | Promise<File> | compressed file
Changelog
- 2020-4-26
3.0.1
:- [breaking] filename changed when using cdn (from
frontend-image-compress.min.js
toindex.min.js
)
- [breaking] filename changed when using cdn (from
- 2019-03-16
3.0.0
:
- [breaking] add namespace to methods
- support
commonjs