imagezooming

图片压缩裁剪

Usage no npm install needed!

<script type="module">
  import imagezooming from 'https://cdn.skypack.dev/imagezooming';
</script>

README

按比例压缩图片尺寸图片质量

Including

<script src="./dist/imageZooming.js"></script>

Usage

<input type="file" class="selectImg" accept="image/*" />
<img class="img">
<script>
let imgFile = document.querySelector('.selectImg')
let img = document.querySelector('.img')

imgFile.fileChange((err, url) => {
   if (err) {
      console.log(err)
      return
   }
   imageZooming(url, 50)
      .then(res => {
         img.src = res.base64
      })
      .catch(err => {
         console.log(err)
      })
})
</script>

API

  1. HTMLInputElement.prototype.fileChange( callback )
    • input[type='file']选中图片时返回图片地址
    • callback(err, url)
  2. imageZooming(picUrl, width, type = 'jpeg', encoderOptions = 1)
    • @param {String} picUrl 需要上压缩的图片 必填
    • @param {Number} width 压缩后的图片宽度
    • @param {String} type 压缩后的图片格式:png/jpg
    • @param {Number} encoderOptions 图片质量。0 - 1 之间。只有jpg格式图片才支持此选项
    • @returns {Object} 返回压缩后的图片:blob 二进制文件,和base64格式的图片