移动端图片剪裁工具cropperjs

第三方依赖：cropperjs
适用于原生js，jquery，vue及其他框架。
下载：

npm install cropperjs

引入css及js：

import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

初始化：（必须在mounted中）

  mounted() {// 获取图片const image = this.$refs.img// 获取cropper实例const cropper = new Cropper(image, {viewMode: 1, // 只能在裁剪的图片范围内移动dragMode: 'move', // 画布和图片都可以移动aspectRatio: 1, // 裁剪区默认正方形autoCropArea: 1, // 自动调整裁剪图片cropBoxMovable: false, // 禁止裁剪区移动cropBoxResizable: false, // 禁止裁剪区缩放background: false, // 关闭默认背景// crop可省略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)}})},

结构：

<div class="photo"><img :src="img" ref="img" />
</div>

样式：

  img {max-width: 100%;display: block;}

注意：img要包裹在div中，并且display:block，设置最小宽度为了使图片能够在页面完全展示。
图片剪裁通常结合popup弹出层使用，准备一个弹层和一张图片即可。

剪裁完毕：

客户端剪裁使用getCroppedCanvas()方法，服务器端剪裁使用getData()方法。

confirm() {this.cropper.getCroppedCanvas().toBlob(blob => {console.log(blob)// blob为剪裁完成后的图片地址})}

移动端图片剪裁工具cropperjs相关推荐

基于vue的图片剪裁工具vue-croppe
基于vue的图片剪裁工具vue-croppe 安装 // npm安装 npm install --save vue-croppa // yarn 安装 yarn add vue-croppa 使用引 ...
阿里的图片剪裁工具类及依赖的jar包
阿里的图片剪裁工具类包含以下7个方法,这都好理解,关键是这个jar包的maven依赖不好找,有人卖这个依赖已经卖到50个下载币,黑心啊,我找了很久终于找到了. 1.按固定长宽进行缩放 2.按固定文件大 ...
html 图片剪裁工具_HTML5图像裁剪工具
html 图片剪裁工具 HTML5 image crop tool I have prepared new great HTML5 tool for you (with tutorial). I ha ...
cropper.js 图像旋转问题_JavaScript开源良心插件，纯前端网页图片剪裁插件——cropperjs...
介绍 cropperjs是一款基于JavaScript的网页端图片裁剪插件,可能相对于图片预览来说,图片的裁剪使用场景貌似并不是很多,但是图片预览插件又要比裁剪插件容易找到,而且从实现难度上来说也不及 ...
基于canvas的图片剪裁工具
工具下载地址:https://github.com/zforler/clip 直接再浏览器中打开index.html即可(基于canvas的图片操作,在谷歌浏览器中会受到同源策略的限制,放到服务容器里 ...
实用前端标注图片剪裁工具-AILabel.js
AILabel类库是一款集打点.线段.多段线.矩形.多边形.圆圈.涂抹等多标注形式于一体,附加文本(Text).标记(Marker).缩略图(EagleMap).Scale(比例尺)等控件以及Util ...
vue项目使用cropperjs制作图片剪裁，压缩组件
1.需求:制作一个vue版本的图片剪裁组件,并将剪裁的图片返回 2.思路:使用cropperjs制作一个剪裁组件 3.实现: 引入依赖 npm install cropperjs 引入到页面 impo ...
【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）...
Vue 资源典藏,包括:UI组件开发框架服务端辅助工具应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
Android 调用系统剪裁工具剪裁用户头像
在Activity中加入以下代码段: private final int CODE_CROP = 0x131;//用于请求系统剪裁的请求码private Handler handler = new H ...

移动端图片剪裁工具cropperjs

移动端图片剪裁工具cropperjs相关推荐

最新文章

热门文章