3.0.2 • Published 4 years ago

frontend-image-compress v3.0.2

Weekly downloads
15
License
MIT
Repository
github
Last release
4 years ago

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

nametypedescription
fileFilefrom inputtype="file"
qualitynumberrange: 0~1, default is 0.7(decrease this value if you got console warning)
returnPromise\<File>compressed file

Changelog

  1. 2020-4-26 3.0.1
    • [breaking] filename changed when using cdn (from frontend-image-compress.min.js to index.min.js)

  2. 2019-03-16 3.0.0
  • [breaking] add namespace to methods
  • support commonjs
3.0.2

4 years ago

3.0.1

5 years ago

3.0.0

5 years ago

2.0.1

5 years ago

2.0.0

6 years ago

1.1.0

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago