优秀的Web端开源图片裁剪插件——cropperjs

myzbx 2025-01-11 15:34 50 浏览

介绍

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

类型：HTMLImageElement或HTMLCanvasElement
用于裁剪的目标图像或画布元素。

options（可选）

类型： 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/

HTML 画布

上一篇：canvas不懂?看这篇文章就够了
下一篇：JavaScript开源良心插件，纯前端网页图片剪裁插件——cropperjs

优秀的Web端开源图片裁剪插件——cropperjs

介绍

Github

特性

安装

使用

在线预览Demo

总结

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿