Cropperjs使用前端图像裁剪

下载引入

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

如果是基于服务端的裁切，则使用：getData 方法，该方法得到裁切的区域参数然后传给服务端。

this.myCropper.getData()

如果是纯客户端的图片裁切，则使用：getCroppedCanvas 方法，该方法得到裁切之后的图片对象（类似于URL.createObjectURL 方法得到的文件对象）。

this.myCropper.getCroppedCanvas()

配置项 new Cropper（操作对象，{ 配置项 } )

const image = this.$refs.image; //获取图片元素this.myCropper = new Cropper(image, {preview: '.afterCropper', // 拖动裁剪框预览视图 viewMode: 1, //裁切框的位置，0可以选择图片外，1只能在图片内dragMode: "move", //拖动方式，crop、move、noneaspectRatio: 0/0, //截取的比例  0/0设置关闭等比例缩放 可以使用setAspectRatio方法重新设置宽高比 autoCropArea: 0.8, //撑满画布cropBoxMovable: true, //截取框移动功能corpBoxResizable: true, //截取框缩放功能background: true, //背景movable: true, //画布是否可以移动});

下面是个demo 效果图和代码附上

<template><div style="padding: 20px"><div class="cropper"><!-- 剪裁框 --><div class="img-container"><img ref="image" src="./1b73704b282a8ec6.jpg" alt="" /></div><!-- 预览框 --><div class="afterCropper"><img :src="afterImg" alt="" /></div></div><el-button style="margin-top: 20px" @click="sureSava" > 剪切 </el-button></div>
</template><script>
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
export default {name: "Cropper",data() {return {myCropper: null,afterImg: "",};},mounted() {this.init();},methods: {init() {const image = this.$refs.image; //获取图片元素this.myCropper = new Cropper(image, {preview: '.afterCropper', // 拖动裁剪框预览视图 viewMode: 1, //裁切框的位置，0可以选择图片外，1只能在图片内dragMode: "move", //拖动方式，crop、move、noneaspectRatio: 0/0, //截取的比例  0/0设置关闭等比例缩放 可以使用setAspectRatio方法重新设置宽高比 autoCropArea: 0.8, //撑满画布cropBoxMovable: true, //截取框移动功能corpBoxResizable: true, //截取框缩放功能background: true, //背景movable: true, //画布是否可以移动});      },sureSava() {this.afterImg = this.myCropper.getCroppedCanvas({imageSmoothingQuality: "high",}).toDataURL("image/jpeg"); // 拿到裁剪后的base64的图片this.myCropper.getCropBoxData(); // 获取裁剪框数据      console.log(this.myCropper.getCropBoxData(), "获取裁剪框数据");console.log(this.myCropper.getCanvasData(), "获取图片数据");//   this.myCropper.setCropBoxData({//     left: 105.4774169921875,//     top: 89.11300048828127,//     width: 183.79999999999998,//     height: 183.79999999999998//   }) // 设置裁剪框数据// console.log(this.myCropper.setCropBoxData(), "设置裁剪框数据");// console.log(this.myCropper.setCanvasData(), "设置图片数据");},},
};
</script><style lang="scss" scoped>
.cropper {width: 100%;display: flex;
}.img-container {width: 50%;height: 400px;overflow: hidden;
}
.afterCropper {width: 50%;height: 400px;margin-left: 20px;border: 1px solid #ccc;text-align: center;overflow: hidden; // 这个属性可以得到想要的预览效果 必须加了才生效
}
.afterCropper img {
//   width: 400px;height: 400px;padding: 20px;
}
</style>

Cropperjs使用前端图像裁剪相关推荐

前端图片裁剪 cropperjs的简单使用
https://github.com/fengyuanchen/cropperjs 演示 <!DOCTYPE html> <html lang="zh">& ...
canvas实现图像裁剪
1.技术背景随着都市类程序开发业务推进,在各类活动.个人信息等模块逐渐依赖图像裁剪.上传等功能,那么如何实现图像缩放.裁剪就成了前端工程师们关注优化的重点. 2.应用技术本次使用的技术主要是依赖c ...
使用 jQuery Jcrop 实现图像裁剪
一.使用方法: 代码: // 载入CSS文件 <link rel="stylesheet" href="css/jquery.Jcrop.css"> ...
java图像处理之图像裁剪
图像裁剪即截取原始图像某一部分生成一幅新的图像,某些app也会要求用户将上传图像进行一定程度裁剪来作为头像.图像裁剪实现起来比较简单,下面介绍两种裁剪方式,矩形裁剪和圆形裁剪. 矩形裁剪,定义图像上某 ...
jQuery 图像裁剪插件Jcrop
Jcrop简介 Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:PHP)可以快速的实现图片裁剪的功能. Jcrop是一款免费的软件,采用MIT License发布. 注: ...
html图片自动剪裁,HTML canvas图像裁剪
canvas drawImage方法的图像裁剪理解可能会比较耗时,记录一下,以便供人翻阅! context.drawImage(img,sx,sy,swidth,sheight,x,y,width,h ...
3h精通OpenCV（三）-重调大小与图像裁剪
0.准备工作右击新建的项目,选择Python File,新建一个Python文件,然后在开头import cv2导入cv2库. 我们还要知道在OpenCV中,坐标轴的方向是x轴向右,y轴向下,坐标原 ...
ENVI5.3.1使用Landsat 8影像进行图像镶嵌和图像裁剪实例操作
数据介绍及数据其他操作详见此博客 ENVI5.3.1使用Landsat 8影像进行预处理及分析实例操作数据介绍参看这篇博客 ENVI5.3.1使用Landsat 8影像进行辐射定标和大气校正实例操作 ...
地图裁剪器，可以将图片裁剪成瓦片数据，主要用途是将高清卫星图像裁剪成瓦片图，可以做离线地图的开发，基于墨卡托坐标
废话不多说,直接上代码地图裁剪器,可以将图片裁剪成瓦片数据,主要用途是将高清卫星图像裁剪成瓦片图,可以做离线地图的开发,基于墨卡托坐标地图裁剪 package com.wwp.utils.map; ...

Cropperjs使用前端图像裁剪

Cropperjs使用前端图像裁剪相关推荐

最新文章

热门文章

Cropperjs使用 前端图像裁剪

Cropperjs使用 前端图像裁剪相关推荐

最新文章

热门文章

Cropperjs使用前端图像裁剪

Cropperjs使用前端图像裁剪相关推荐