专业编程基础技术教程

网站首页 > 基础教程 正文

JavaScript开源良心插件,纯前端网页图片剪裁插件——cropperjs

ccvgpt 2024-12-23 09:06:16 基础教程 1 ℃

介绍

cropperjs是一款基于JavaScript的网页端图片裁剪插件,可能相对于图片预览来说,图片的裁剪使用场景貌似并不是很多,但是图片预览插件又要比裁剪插件容易找到,而且从实现难度上来说也不及图片裁剪,今天我们就一起来看看这款良心的图片裁剪插件——Cropperjs


JavaScript开源良心插件,纯前端网页图片剪裁插件——cropperjs





Github

作者的几个经典作品都在Github上,并且都获得不菲的stars,感谢作者提供这么好用的免费插件

https://github.com/fengyuanchen/cropperjs

特性

  • 支持39个配置选项
  • 支持27 种方法
  • 支持6 场事件
  • 支持触摸(移动)
  • 支持缩放
  • 支持旋转
  • 支持缩放(翻转)
  • 支持多种作物
  • 支持在画布上裁剪
  • 支持在画布上通过画布裁剪图像
  • 支持翻译Exif方向信息
  • 跨浏览器支持
  • 安装

    使用npm安装或者直接下载编译好的js文件

    npm install cropperjs
    <link  href="/path/to/cropper.css" rel="stylesheet">
    <script src="/path/to/cropper.js"></script>

    使用

    • 语法
    new Cropper(element[, options])
  • element
    1. 类型:HTMLImageElement或HTMLCanvasElement
    2. 用于裁剪的目标图像或画布元素。
  • options(可选)
    1. 类型: Object裁剪配置选项。

    使用案例:

    <div>
      <img id="image" src="picture.jpg">
    </div>
    img {
      display: block;
    
      /* This rule is very important, please don't ignore this */
      max-width: 100%;
    }
    import Cropper from 'cropperjs';
    
    const image = document.getElementById('image');
    const cropper = new Cropper(image, {
      aspectRatio: 16 / 9,
      crop(event) {
        console.log(event.detail.x);
        console.log(event.detail.y);
        console.log(event.detail.width);
        console.log(event.detail.height);
        console.log(event.detail.rotate);
        console.log(event.detail.scaleX);
        console.log(event.detail.scaleY);
      },
    });

    PS:具体的配置选项可以到Github上查看相关文档,同时也提供了一个在线的预览demo

    在线预览Demo

    https://fengyuanchen.github.io/cropperjs/


    总结

    cropperjs是一个纯前端的图片裁剪工具,同时笔者之前文章也介绍过和cropperjs同源作者的另一个佳作viewerjs,这是一个优秀的前端图片预览插件,功能丰富,配置简单,推荐使用,enjoy it!

    https://www.toutiao.com/i6775436136027259404/

    Tags:

    最近发表
    标签列表