cropperjs下载

npm i cropperjs

npm官网- https://www.npmjs.com/package/cropperjs

cropperjs关键参数

aspectRatio 图片裁剪比例
- 默认值：NaN
- 作用：图片裁剪比例
- 值：自定义裁剪比例，例如1 / 1 , 4 / 3 , 16 / 9等

viewMode 裁剪模式
- 默认值：0
- 值：
  - 0：无限制
  - 1：限制裁剪框不超过画布的大小。
  - 2：限制画布的最小大小以适应容器。如果画布和容器的比例不同，最小画布将在其中一个维度上被额外的空间包围。
  - 3：限制画布的最小尺寸以填充容器。如果画布和容器的比例不同，则容器将无法在其中一个维度中容纳整个画布。
  - 定义裁剪器的视图模式。如果将viewMode设置为0，则裁剪框可以扩展到画布之外，而值为1、2或3则会将裁剪框限制为画布的大小。viewMode为2或3时，将额外将画布限制为容器。当画布和容器的比例相同时，2和3之间没有区别。

dragMode 裁剪器的拖动模式
- 默认值：crop
- 值
  - crop：创建新的裁剪框，将裁剪的区域外删除
  - move：移动画布，裁剪的同时，可拖动图片
  - none：什么也不做，不可拖动图片

cropperjs常用方法

ready([ev])
- 类型：函数
- 作用：cropperjs加载完成执行该方法
- 用作场景：当cropperjs加载完成，可在该方法里获取图片数据。例：cropperjs加载完成，获取第一次裁剪完成的图片数据

cropend(callback([ev]))
- 类型：函数
- 作用：鼠标/手指抬起事件，当裁剪完图片时。可在该事件函数里对图片操作，例如将图片转为png,jpg等操作

getCroppedCanvas()
- 作用：获取已裁剪的cnavas图片数据
类型：函数
例↓

cropper.getCroppedCanvas()

setAspectRatio(rt)
- 类型：函数
- 作用：设置cropperjs实例的裁剪比例
- 参数：
  - rt：裁剪比例
    - 类型：Number
- 例：cropper.setAspectRatio(16 / 9)

replace(url, [hasSameSize])
- 作用：设置新裁剪的图片url
- 类型：函数
- 参数：
  - url：替换图片的url
  - hasSameSize：如果新图像的大小与旧图像的大小相同，那么它将不会重建cropper，而只更新所有相关图像的URL。这可用于应用过滤器。
- 例：cropperjs.replace('/public/123.png')

vue里封装cropperjs组件

监听props的作用
- 改变父级参数，实时改变cropper设置

src/components/cropperjs.vue

<template><img ref="image" class="img" :src="props.url">
</template><script setup>
// 引入cropperjs库与相关css
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'// 传来的图片地址
const props = defineProps({url: '',// 比例aspectRatio: {default: 1 / 1,}
}),image = ref(null),//img元素 emit = defineEmits(['clip-img'])// 监听props
watch(props, val => {// 设置croppercropper.setAspectRatio(val.aspectRatio)cropper.replace(val.url)
})/*** 获取裁剪的base64图片发给父级* @param {canvas} cvs canvas数据*/
const clipImgEmitBase64Img = cvs => {// 将canvas转为图片数据 → 参数1:图片格式[image/webp, image/jpeg, image/png] | 参数2：图片裁剪后的清晰度，相当于压缩图片 0 - 1(只对jpeg与webp有效)                 const base64 = cvs.toDataURL('image/webp', .75), // 裁剪后发送数据给父级 emit('clip-img', base64)
}let cropper = null
onMounted(() => {cropper = new Cropper(image.value, {aspectRatio: props.aspectRatio,//裁剪比例 → [1 / 1, 19 / 9 ,...........] viewMode: 1,//裁剪模式 [0,1,2,3]dragMode: 'move',// 重点：加载完成将第一次裁剪的图片数据发给父级ready() {clipImgEmitBase64Img (this.cropper.getCroppedCanvas())},cropend() {clipImgEmitBase64Img (this.cropper.getCroppedCanvas())}})
})
</script><style scoped>
.img {width: 100%;height: 100%;object-fit: contain;display: block;max-width: 100%;
}
</style>

简单使用cropperjs组件

src/views>HomeView.vue

<template><button @click="updateImgUrl">修改图片</button><cropper :url="clipImgCfg.url" @clip-img="clipImg" /></template><script setup>
import { reactive } from 'vue';
const clipImgCfg = reactive({url:'/public/111.jpg',rt:1 / 1
})const updateImgCfg = ()=> {clipImgCfg.url='/public/99999.jpg' clipImgCfg.rt=16 / 9
}// 裁剪后的图片事件
const clipImg = imgData => console.log(imgData)
</script>

效果图

base64转文件对象File

当图片裁剪后需转file对象上传服务器时↓
base64转文件对象File
备用地址 - http://t.csdn.cn/jQ1A5

【cropperjs】优秀、优雅的前端图片裁剪库相关推荐

前端图片裁剪 cropperjs的简单使用
https://github.com/fengyuanchen/cropperjs 演示 <!DOCTYPE html> <html lang="zh">& ...
android 图片裁剪库,（译）uCrop介绍 —— 我们自己的Android图片裁剪库
我们在 Yalantis 开发了许多不同的 Android 应用,经验告诉我们,几乎在所有的应用中,都需要图片裁剪的功能.图片裁剪的用途很广,从简单的用户头像调整到图片的比例裁剪.灵活变换等各种复杂的 ...
百度一款前端图片合成工具库MI开源啦！
什么是MI Mi全称mix-img,是一个前端图片合成工具库,它可以将多张图片和文字合成一个全新的图片.作为一个轻量级的图片合成解决方案,Mi支持多张图片并行加载合成,减少图片合成时间,提升前端开发者 ...
android 图片剪切组件,Android 图片裁剪库 uCrop
软件介绍 uCrop 是[Yalantis](https://yalantis.com/) 组织开源的图片裁剪库, 支持缩放, 旋转图片, 支持各种比例的裁剪框, 非常强大的一个图片裁剪库. 使用 1 ...
Android 图片选择器和图片裁剪库
前言:现在大部分的App都支持上传图片和裁剪图片的功能,比如设置用户头像.聊天发送图片.发表动态.论坛帖子等.上传图片需要先从选择手机中选择要上传的图片,所以图片选择器在App中是很常见的组件,一般的 ...
smartcrop.js智能图片裁剪库
今天将为大家介绍一款近期github上很不错的开源库 – smartcrop.js.它是一款图片处理的智能裁剪库.在很多项目开发中,经常会遇见上传图片的场景,它可能是用户照片信息,也可能是商品图片等. ...
android图片布局填冲满,Android图片裁剪库——cropper使用，完美解决图片填充不满布局问题...
前些时间请了一个月假,远程办公,期间项目主要做图片裁剪,脑子里第一反应就是github上开源裁剪库,试了排名的前几个,其中不是UI定制度太低就是裁剪效果不怎么样.当然你也可以直接intent一下系统的 ...
剪刀手:Android平台上的图片裁剪库
原文链接 : Scissors: an image cropping library for Android 原文作者 : Evelio Tarazona 译文出自 : 开发技术前线 www.devt ...
前端图片裁剪cropper.js
背景:我们在项目中常常都会有更换登陆人头像的需求,这个很简单直接上传一张图片展示就可以了,但是如果上传的图片需要剪裁成正方形的话就需要我们来做一些特殊的处理: 这里我们会用到一个图片剪裁插件:crop ...

【cropperjs】优秀、优雅的前端图片裁剪库

cropperjs下载

cropperjs关键参数

cropperjs常用方法

vue里封装cropperjs组件

简单使用cropperjs组件

效果图

base64转文件对象File

【cropperjs】优秀、优雅的前端图片裁剪库相关推荐

最新文章

热门文章