图片剪裁在线html,前端图片裁剪实战
苏格团队
作者:Bigben
在当下的的前端项目中,图片功能可以说是非常常见的,图片的展示、图片的裁剪编辑、图片的上传等,那么我们的项目便来了个需求。
当下我们项目中需要一个可自由编辑图片的功能,当图片可能出现需要频繁编辑,同时能满足发现裁剪不满意想要微调的时候,会发现如果我们处理图片按照平常的习惯,如裁剪后上传服务器或者转base64,都是不符合需求的。那么该怎么处理比较好呢?如何以尽量少的网络请求、少占用存储来解决应用场景呢?那么,便想到了只用纯数据来跟我们的功能打交道。
先安利个裁图神器cropperjs,个人认为是个易上手,配置和api方法蛮齐全的一个组件库。
项目内引入,一定不要漏了引用样式
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';
复制代码
这里我们以react为例
this.state = {
width: 640, //图片展示宽
height: 360, //图片展示高
imgWidth: 640, //图片实际宽
imgHeight: 360, //图片实际高
imgLeft: 0, //图片左偏移
imgTop: 0, //图片上偏移
editing: false //是否编辑中
}
//展示图片的基本dom结构,我们使用外div内img的形式,来跟数据结合控制裁剪图片的展示
const { width, height, imgWidth, imgHeight, imgLeft, imgTop, editing } = this.state;
const containerStyle = {
width: `${width}px`,
height: `${height}px`
}
const imgStyle = {
width: `${imgWidth}px`,
height: `${imgHeight}px`,
left: `${imgLeft}px`,
top: `${imgTop}px`
}
.img-container {
overflow: hidden;
position: relative;
}
.crop-img {
position: absolute;
left: 0;
top: 0;
}
className="img-container"
style={containerStyle}
>
className="crop-img"
src={picture}
style={imgStyle}
alt="pic"
>
复制代码
简单来说就是外层元素控制裁剪展示的宽高,同时根据项目需求的元素定位也挂在这,内部img挂载图片实际大小和偏移。
cropperjs初始化后的元素,是会与初始化对象img处在同一dom层级,也就是说如果我们直接对展示img进行初始化的话,编辑区域展示将会受父元素,如图,放大图片时候会不方查看超出部分
所以在这里,为了图片编辑的自由度,建议分开展示dom与用以初始化cropper对象的dom,在这里编辑区域为全屏幕为例,根据项目实际功能区域进行调整
.edit-container {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
className="img-container"
style={containerStyle}
>
className="crop-img"
src={picture}
style={imgStyle}
alt="pic"
>
//cropper初始化
this.myRef = React.createRef();
this.myCropper = new Cropper(this.myRef.current, options);
//options配置
const options = {
dragMode: 'move', //使裁剪时图片可拖动
background: false, //因为我们现在是全屏可编辑,需要隐藏掉默认的背景
}
//当然还有许多常见的配置项,如编辑框尺寸比例等,大家可自行查看api
//裁剪保存
save() {
const cropBoxData = this.myCropper.getCropBoxData(); //获取裁剪框数据
const canvasData = this.myCropper.getCanvasData(); //获取图片数据
this.setState({
width: cropBoxData.width,
height: cropBoxData.height,
imgLeft: canvasData.left - cropBoxData.left,
imgTop: canvasData.top - cropBoxData.top,
imgWidth: canvasData.width,
imgHeight: canvasData.height
})
}
复制代码
这样的话 我们就可以完全在自定义的全屏内编辑,保存效果如下,到这里我们就完成了第一部分功能,裁剪并保存数据和展示
重点介绍下我们用到的两个api方法getCropBoxData和getCanvasData,getCanvasData是用来获取图片的实际数据的(当前的宽高,和相对于父元素可视区域的位移偏移量),getCropBoxData则是获取相对于图片区域的裁剪区相关数据。
那么后续的需求接着来了,我们怎么做到二次编辑的时候,能还原效果呢,嗯,其实在前面我们记录裁图数据的时候,把相应的数据关系再计算一遍就好了,在初始化cropper的options中增加配置
const options = {
dragMode: 'move',
background: false,
//控件初始化后重置相应配置
ready: () => {
const { width, height, imgWidth, imgHeight, imgLeft, imgTop } = this.state;
//根据实际需要出现裁图功能进行定位,此处left和top仅为测试暂时默认值定义
const left = 50;
const top = 50;
this.myCropper.setCanvasData({
width: imgWidth,
height: imgHeight,
left: left,
top: top
});
this.myCropper.setCropBoxData({
left: left - imgLeft,
top: top - imgTop,
width: width,
height: height
})
}
}
this.myCropper = new Cropper(this.myRef.current, options);
复制代码
这时候我们再点击裁图,就完美还原了,左边和上边的间隙就是setCanvasData的top和left,根据实际项目进行调整,setCropBoxData的left和top是相对于cropper-canvas的定位,才有了以上的计算形式。
此时,基本功能到此结束,如果说是应用在h5编辑中,设计到scale缩放的话,相关的数据计算都要算上scale的缩放值哦,不然就会出现展示图片和编辑图片大小不对等的状况。同时还有许多功能就不做展示了,设置裁剪框比例,编辑缩放等,欢迎尝试。
当然了,如果想要保存图片,也有相应的方法到处裁剪图片的数据
this.myCropper.getCroppedCanvas().toDataURL('image/jpeg')
复制代码
最后,我们可以看到,在整个功能过程中,我们需要的只是裁剪的数据,读写快,也不需要进行额外的图片存储,减少文件服务器存储的开销与优化。
感谢大家收看,欢迎讨论和指正。
图片剪裁在线html,前端图片裁剪实战相关推荐
- 前端图片合成技术_前端图片合并方案调研
介绍 通过产品线数据分析,发现70%左右的图片为小于300K的图片,50%左右为小于100K的图片,因此调研前端图片合并方案是否有利于提高图片批量上传速度.之前做过的前端ZIP方案也是类似的思路. 工 ...
- php web裁剪图片上传,WEB前端实现裁剪上传图片功能
最后的效果如下: 这里面有几个功能,第一个是支持拖拽,第二个压缩,第三个是裁剪编辑,第四个是上传和上传进度显示,下面依次介绍每个功能的实现: 1. 拖拽显示图片 拖拽读取的功能主要是要兼听html5的 ...
- 图片怎么在线压缩?图片在线压缩方法分享
通过压缩图片,可以减小图片的大小,从而减少所需的存储空间.这对于在有限存储空间的设备上存储大量照片和视频非常有用.此外,还可以减少在设备之间传输和处理图片所需的时间和精力,从而提高工作的效率.特别是在 ...
- html 图片剪裁控件,h5图像裁剪(基于canvas)插件Image-Clip
插件描述:支持旋转,预览,裁剪框选择,压缩比例设置等 Image-Clip 图像的裁剪压缩 功能包括:canvas绘制图片 裁剪框选择裁剪大小 旋转功能 放大镜(方便旋转) 裁剪功能 缩放.压缩功能( ...
- 简单html图片轮播_web前端入门到实战:简单的图片轮播
效果: 功能: 1.左右箭头切换 2.状态控制点切换 3.鼠标悬念 4.自动轮播 HTML: <div class="zh-carousel"><div clas ...
- java图片的在线预览_【Java】web实现图片在线预览
一.场景还原 用户上传了一张图片,已有服务器保存路径,现由于系统配置无法直接通过图片URL打开预览图片,需实现点击预览将图片显示在浏览器上. 二.实现方法 html: 预览 此处用预览按钮方法实现 J ...
- [js] 使用js实现一个图片剪裁的功能
[js] 使用js实现一个图片剪裁的功能 /** * 裁切图片* @param imgUrl 原始图片路径* @param x,y,width,height 从点[x, y]开始,将宽度width,高 ...
- uve 使用百度ueditor自定义图片上传,在线图片插入,在线图片管理
前言 本帖所有内容均用于学习使用,如有涉及侵权,请看到后联系我进行删帖 上图片 环境 "axios": "^0.21.1", "element-ui& ...
- android开发怎么写图片,Android开发实践:自己动手编写图片剪裁应用(2)
上篇文章主要介绍了我开源在Github上的图片剪裁库(ImageCropper)的基本特性和用法,从本文开始,慢慢介绍一些开发图片剪裁应用中涉及的知识点和技术. 其实Android系统本身也提供了图片 ...
- cropper.js 图像旋转问题_JavaScript开源良心插件,纯前端网页图片剪裁插件——cropperjs...
介绍 cropperjs是一款基于JavaScript的网页端图片裁剪插件,可能相对于图片预览来说,图片的裁剪使用场景貌似并不是很多,但是图片预览插件又要比裁剪插件容易找到,而且从实现难度上来说也不及 ...
最新文章
- 调用jsapi缺少参数appid_【Python学习笔记】18、函数的参数关键字参数
- mysql select time,MySql查询时间段的方法
- 1月3日学习内容整理:modelform
- linux---谈谈vfork和fork的区别及exit与return
- Go框架 gin 源码学习--路由的实现原理剖析
- js的eval代码快速解密
- sphereface result
- 深度探秘大数据新应用,2018 中国大数据技术大会(BDTC)强势来袭!
- shell笔记[转]
- 什么才是Web前端开发的必备核心技能?
- 2017微信小程序全套源代码 最新 最全 好用
- 数字电子技术-逻辑门电路
- flask实现浏览器实时视频播放
- mybatis原理分析(五)---参数处理
- [训练9] 创建猫类
- Paper:GPT之《Improving Language Understanding by Generative Pre-Training》翻译与解读
- OpenCV截取一段视频
- 一、大数据_课程导论(P2~P6)
- python中pop什么意思
- 后渗透篇:劫持技术(lpk.dll劫持游戏注入【Win7 实例】)
热门文章
- 计算摄影学基础知识(1)
- Day11:股市风险
- 327、浏览历史数据库表设计与缓存设计
- 电脑如何检查驱动程序是否正常
- 国外免费图片素材站收集
- 威斯敏斯特教堂(西敏寺)墓碑上的话(WestMinster Abbey,When I was young and fre
- 在阿里云注册域名后如何网站备案
- java word书签_JAVA 创建移除Word书签
- Unable to start ServletWebServerApplicationContext due to missing ServletWebServerFactory bean.
- golang正则匹配中文字符,查询中文字符会panic退出的问题