// 警告！ 如果您仍使用测试版（<1.0.0），请阅读。 :fire: 小心！ 您目前正在寻找Vue 2的分支。如果您正在寻找Vue 3的分支， 。 Vue Advanced Cropper是一个高级库，可让您有机会创建适合任何网站设计的自己的裁剪器。 这意味着您不仅可以更改裁纸器的外观，还可以自定义其行为。 特征： 全面的移动/桌面支持 支持 支持画布和坐标模式，最小和最大纵横比，自定义大小限制 缩放，旋转，调整图像大小 自动缩放，过渡 上面的 / 示例的codeandbox。 安装 npm install --save vue-advanced-cropper yarn add vue-advanced-cropper 如果要使用CDN，请阅读相应的 用法 import Vue from 'vue' import { Cropper } from 'vue-advanced-cropper' import 'vue-advanced-cropper/dist/style.css' ; new Vue ( { el : '#app' , data : {

基于taro的高性能图片裁剪组件 支持移动 支持旋转 支持缩放 可导出绘制的图片的本地地址 使用 下载代码 赋值src/components/ImageCropper 下的文件到你的项目中 引入import ImageCropper from "@/components/ImageCropper" 使用 参数说明 属性 类型 描述 必填 imgSrc String 图片地址 是 cut_ratio Number 裁剪框的 宽/高 比 否 img_height Number 图片的高度 否 img_width Number 图片的宽度 否 img_left Number 图片相对屏幕的左边距 否 img_top Number 图片相对屏幕的上边距 否 如何拿到绘制的图片地址 class demo extend Component{

由于官方Vue-Cropper提供的实例都是第V2.x的，自己整理了一份以备忘！ 注意，提交有两个按钮，选base64按钮获取的不上传到服务器，直接返回客户端base64图片，选bobo则需要自己写服务端接口，并返回图片地址。

前端工作中，经常需要图片裁剪的场景，cropper.js是一款优秀的前端插件，api十分丰富。 本文是在vue-cli项目下封装图片裁剪插件，效果图如下： 话不多说，看步骤吧。 第一步：准备开发环境 cropper.js是基于jquery的，所以要先安装jquery 执行命令：   npm  install --save-dev jquery cropper  为webpack配置添加jquery的映射 修改webpack.base.conf.js配置，添加标红的一行 第二步：新建图片裁剪组件 index.vue内容： 由于用了element-ui,其中布局就引用了element-ui的

基于image-cropper自己封装后的组件。

通过cropper.js裁剪图片并上传通过canvas获取base64位编码传给后台接口。如有问题可留言

上传图片以及裁剪图片，用WebUploader+cropper结合使用

智能作物 |中文 目前优化了一套更高识别率的模型和算法，有意向合作的请联系邮箱： 简单易用的智能图片裁剪库，适用于身份证，名片，文档等照片的裁剪。 您也可以关注我的另一个库 ：SmartCamera是一个Android相机扩展库，能够实时采集和识别相机内部物体是否对准吻合指定区域。 支持特性 使用智能算法（基于opencv）识别图片中的边框 支持先进锚点，手动调节选区，放大镜效果提升定位体验 使用透视变换裁剪并矫正正选区，还原正面图片 支持丰富的UI设置，如辅助线，蒙版，锚点，放大镜等 例子（） 1.选择图片后智能选区，使用透视变换裁剪和矫正正选区： 2.预先锚点，手动调节选区，右上角放大镜

小程序图片裁剪组件image-cropper

cropper非常强大，做出的图片裁剪插件不失真，可用于裁剪图片，banner,头像等等