fe-cropper

support cropperjs to crop image, and support crop gif

Usage no npm install needed!

<script type="module">
  import feCropper from 'https://cdn.skypack.dev/fe-cropper';
</script>

README

fe-cropper

JavaScript裁剪图片工具库，基于CropperJS，且在其功能上拓展了对GIF文件的支持。

在文件格式支持上，支持CropperJS所支持的所有格式，并可以支持GIF裁切后仍为动态图。

  • jpg
  • jpeg
  • png
  • bmp
  • webp
  • gif

快速开始（Quick Start）

安装（Installation）

npm i fe-cropper

使用（Usage）

语法（Syntax）

实例化一个Cropper对象

import { Cropper } from 'fe-cropper'

new Cropper(options);

  • options（必选）

    • encoder（可选）

      • Name Default Description
        repeat 0 重复次数, -1 = no repeat, 0 = forever
        quality 10 图片质量
        workers 2 线程数
        workerScript gif.worker.js 加载工作程序脚本的url

    • background（可选）：默认值#fff

    • mimeType（可选）：文件类型，主要用于区分gif类型和静态图片类型

      • static（默认值）
      • gif

    • src（必选）：图片路径

    • onerror（可选）：错误回调

使用示例（example）

import { Cropper } from 'fe-cropper'

const cropperInstance = new Cropper({
    encoder: {
        quality: 10
    },
    src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2151106510,2213335010&fm=26&gp=0.jpg',
    background: '#eee',
    onerror: function(code, error) {
        console.log(code, error);
    }
});

方法（Methods）

crop

执行裁剪。

Arguments

  • options
    • x：横向偏移量
    • y：纵向偏移量
    • width（必填）：输出图片宽
    • height（必填）：输出图片高
    • scaleX：横向缩放量
    • scaleY：纵向缩放
    • rotate：旋转角度
  • success：成功回调方法
    • blob：回调方法参数

使用示例（example）

cropperInstance.crop
(
  {
      x: 0,
      y: 0,
      width: 735,
      height: 452,
      scaleX: 2,
      scaleY: 2,
      rotate: 0
  },
  (blob) => {
      console.log(blob);
  }
);

setOptions

修改配置项。

Arguments

同构造方法参数。

使用示例（example）

cropperInstance.setOptions({
    mimeType: 'gif',
    background: '#999',
    src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3302796350,1983499883&fm=26&gp=0.jpg'
});