首页 > 代码库 > 前端裁切图片插件之cropper介绍
前端裁切图片插件之cropper介绍
给大家介绍一个前端非常实用的依赖于jquery的图片裁切插件cropper.
因为前端无法做到图片的裁切,所以实际中需要用cropper和后台的GraphicsMagick相互配合.
先贴上cropper的网址https://fengyuanchen.github.io/cropperjs/和github地址:https://github.com/fengyuanchen/cropper
第一步:下载cropper:
npm install cropper.
第二部:引入依赖包和插件包:
<script src="http://www.mamicode.com/path/to/jquery.js"></script><!-- jQuery is required --> <link href="http://www.mamicode.com/path/to/cropper.css" rel="stylesheet"> <script src="http://www.mamicode.com/path/to/cropper.js"></script>
第三部:在js中调用方法:
$(‘#image‘).cropper({ aspectRatio: 16 / 9, crop: function(e) { // Output the result data for cropping image. console.log(e.x); console.log(e.y); console.log(e.width); console.log(e.height); console.log(e.rotate); console.log(e.scaleX); console.log(e.scaleY); } });
其中aspectRatio 是指图片的长宽比
只需要将x,y,width,height,rotate,scaleX,scaleY这些数据传给后台,后台就可以根据数据进行图片的裁切.
使用cropper要注意一点,这个插件会在dom中构建一些标签,所以在图片展示的时候多注意:
前端裁切图片插件之cropper介绍
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。