介绍

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

Github

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

https://github.com/fengyuanchen/cropperjs

特性

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

安装

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

npm install cropperjs

使用

语法

new Cropper(element[, options])

element

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

options(可选)

类型： Object裁剪配置选项。

使用案例：

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/

cropper.js 图像旋转问题_JavaScript开源良心插件，纯前端网页图片剪裁插件——cropperjs...相关推荐

cropper.js 图像旋转问题_快速提高前端开发效率：10个JavaScript图像处理库
用JavaScript处理图像可能非常困难且繁琐.幸运的是,有许多库可以使事情变得简单得多.以下就是一些前端开发经常要使用到的图片处理库,和千锋广州前端小编一起来看看吧! 如果发现有用的东西,请尝试将 ...
html中剪切图片所用插件,简单功能强大的jQuery图片剪裁插件Image Cropper
插件描述:相信很多朋友都在大型的网站,如新浪微博.QQ微博上看到过头像裁图工具,感觉很高大尚吧,今天朋友们有福了,今天就来说一说一款这么高大尚的插件cropper,cropper是一款使用简单且功能强 ...
php裁剪插件,简单功能强大的jQuery图片剪裁插件Image Cropper 中文api
图片剪裁插件Image Cropper使用方法引入必要的js和css核心文件构建html,可以将图片或canvas直接包裹到一个块级元素中初始化插件,可以使用$.fn.cropper方法来初始化 ...
JS魔法堂之实战：纯前端的图片预览
一.前言图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的 onchange事件,一旦更改路径则将图片上传至 ...
实用前端标注图片剪裁工具-AILabel.js
AILabel类库是一款集打点.线段.多段线.矩形.多边形.圆圈.涂抹等多标注形式于一体,附加文本(Text).标记(Marker).缩略图(EagleMap).Scale(比例尺)等控件以及Util ...
web安全：JS纯前端实现图片或文件安全的上传和下载功能
背景在做前端开发的过程中,做过很多的项目,都会遇到图片预览和展示.一般的图片都是用于页面美化,信息解释说明的作用.但是在接触某些业务场景时,例如用户注册需要上传用户个人身份证照片,办理业务需要上传证 ...
web图片裁切插件 cropper.js 详细介绍
cropper.js一个用来处理图片的插件,可以使用它来实现图片的各种模式下的裁切效果,当我们在做一个上传头像或者上传图片功能的时候,需要用户裁切出用户想要的图片位置就可以利用这个插件来实现','cr ...
聊一聊cropper.js
最近的项目中有一个纯前端实现的功能困扰了我好久,就是用户上传图片以后需要用户进入图片裁剪页并完成上传的功能,一开始我是打算自己去用canvas去写这样一个页面的,但是项目开发周期短,任务紧,所以我就在 ...
图片上传裁剪插件cropper.js的API详解
jQuery.cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. cropp ...

cropper.js 图像旋转问题_JavaScript开源良心插件，纯前端网页图片剪裁插件——cropperjs...

介绍

Github

特性

安装

使用

在线预览Demo

总结

cropper.js 图像旋转问题_JavaScript开源良心插件，纯前端网页图片剪裁插件——cropperjs...相关推荐

最新文章

热门文章